Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

UPLOADS: Handle Admin Dropzone Uploads in a Module

Scot Ranney • April 10, 2024


The problem with uploads in a miva module is that you need to initialize the store for things to work out.

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>

https://www.scotsscripts.com/mvblog/uploads-handle-admin-dropzone-uploads-in-a-module.html

mvkb_upload mvkb_dropzone