2024 DROPZONE:

Original dropzone is not being maintained. There is a github fork with active updates. Probably best to download the code and have the store host it rather than trying to use cdn.

https://github.com/NicolasCARPi/dropzone

https://unpkg.com/@deltablot/dropzone@7/dist/dropzone-min.js

https://cdn.jsdelivr.net/npm/@deltablot/dropzone/dist/dropzone-min.js

Miva Merchant Uploads

The problem with uploads in a miva module is that you need to initialize the store using various json_store(..) style functions. It is better to use the json_module features (json) if you can. Those (json) features work in the front and back end via AJAX. Not going through that here though.

You also need to pass some variables in the upload like g.store_code.

The code below is in my generic "include" file that has all my utilities et al for every module. This generic include contains the miva upload handlers, and they in turn call the upload handlers in my module which take the same parameters (so my modules must have ValidateFIleUpload(...) and ProcessFileUpload(...)

<MvFUNCTION NAME="Miva_ValidateFileUpload" PARAMETERS="field,filename,content_type">
	<MvASSIGN NAME = "l.return" VALUE = "{ ValidateFileUpload(l.field,l.filename,l.content_type) }" />
	
	<MvIF EXPR = "{ l.return EQ 0 OR NOT l.return }">
		<MvASSIGN NAME = "l.return" VALUE = "{ '0' }" />		
	</MvIF>
	<MvFUNCRETURN VALUE = "{ l.return }">
</MvFUNCTION>

<MvFUNCTION NAME="Miva_ProcessFileUpload" PARAMETERS="field,filename,status,tempfile,content_type,size">	
	<MvCOMMENT>
	#
	#  system settings
	#
	</MvCOMMENT>
	<MvDO FILE = "../../lib/config.mvc">
	<MvASSIGN NAME = "g.library_db" VALUE = "{ g.Module_Root $ g.library_db }" />
	<MvASSIGN NAME = "g.session_type" VALUE = "{ 'runtime' }" />
	<MvASSIGN NAME = "g.function" VALUE = "{ 'module' }" />
	<MvDO FILE = "../../json.mvc" NAME = "l.ok" VALUE="{ JSON_Initialize_Session() }">
	<MvASSIGN NAME = "l.ok" VALUE = "{ [ g.Module_JSON ].JSON_Store_Open() }" />
	<MvASSIGN NAME = "g.module_library_db" VALUE = "{ g.Module_Root $ 'lib/db.mvc' }" />
	<MvASSIGN NAME = "l.ok" VALUE = "{ ProcessFileUpload(l.field,l.filename,l.status,l.tempfile,l.content_type,l.size) }" />
</MvFUNCTION>

To use dropzone html element includes the upload url which in this case points to the module in question.  For me l.settings:module_path points to the module in use.

<div action="{ l.settings:module_path $ '?_action=qna_upload&module_library_db=' $ g.module_library_db $ '&Store_Table_Prefix=' $ g.Store_Table_Prefix $ '&store_code=' $ g.store_code }" 
	id="divdropzone" 
	class="dropzone mt-4"
	style="min-height: 300px;">
	<div class="dz-default dz-message"><span>Drop CSV Here to Upload</span></div>
</div>

The dropzone head is:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js" integrity="sha512-U2WE1ktpMTuRBPoCFDzomoIorbOyUv0sP8B+INA3EzNAhehbzED1rOJg6bCqPf/Tuposxb5ja/MAUnC8THSbLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" integrity="sha512-jU/7UFiaW5UBGODEopEqnbIAHOI8fO6T99m7Tsmqs2gkdujByJfkCbbfPSN4Wlqlb9TGnsuC0YgUgWkRBK7B9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>
	#divdropzone {
		margin-bottom: 3rem; 
		min-height: 225px;
	}
	.dropzone {
	  border: teal dashed 1px;
	  border-radius: 5px;
	  background: white;
	  min-height: 40px; 
	}
	 .dropzone .dz-message {
		font-weight: 400; 
	}
	.dropzone .dz-message .note {
		font-size: 0.8em;
		font-weight: 200;
		display: block;
		margin-top: 1.4rem; 
	}
	*, *:before, *:after {
		box-sizing: border-box; 
	}
	</style>

Dropzone foot/js:

<script>
		  Dropzone.options.divdropzone = {
			init: function() {
				this.on("success", function(file, responseText) {
					$('#featuredImage').val(  $.trim(responseText)  )		 
				});
			}
		  };
</script>