Update to latest dropzone.js. New OnQueueComplete microflow, multiple/single uploaded, image resizing

README.md

@@ -4,11 +4,11 @@
 Mendix implementation of the DropZone widget.
 
 Credits to: http://www.dropzonejs.com/
- 
+
 **Description**
 
  Upload multiple images or filedocuments on a canvas an upload them together. All processed files are marked with a tick-box, errors with a red cross.
- 
+
 **History**
 
 Update 3.0.2: css loading on linux and Mendix cloud
@@ -26,7 +26,7 @@ Update 3.0.2: css loading on linux and Mendix cloud
  -   Put the widget on a context form.
 
 **Properties**
- 
+
 -   Image entity: filedocument or inherited entity
 
 -   Association to context: Set this to associate the images to the context. For example Item has multiple images use Image\_Item.
@@ -41,6 +41,8 @@ Update 3.0.2: css loading on linux and Mendix cloud
 
 -   On remove: when a file is uploaded and then deleted, this microflow is called an should delete the filedocument.
 
+-   On queue complete: when the upload queue completes uploading.
+
 -   maxFileSize: Maximum file size in MB
 
 -   Button caption: Text on the upload button (can be translated).
@@ -49,22 +51,34 @@ Update 3.0.2: css loading on linux and Mendix cloud
 
 -   Auto Start Upload: Hides upload button start uploading on drop.
 
+-   Multiple Files: If true allow multiple files to be uploaded, if false only one at a time.
+
+-   Resize Width: If set, the image will be resized to this maximum width BEFORE upload.
+
+-   Resize Height: If set, the image will be resized to this maximum height BEFORE upload.
+
+-   Resize Quality: The quality of the resize.
+
+-   Resize Method: Either "crop" or "contain" the image when resizing.
+
+-   Resize MimeType: The format of the image to upload. This can convert the type of image BEFORE upload.
+
 
 **Known bugs**
 
  When you don't provide an on remove microflow the file is deleted but the screen is not refreshed.
 
  All of the original issues of the [Dropzone library] (https://github.com/enyo/dropzone/issues)
- 
+
 
 **Frequently Asked Questions**
 
- 
+
 
 Ask your question at the Mendix Community [*Forum*](https://mxforum.mendix.com/)
 
- 
+
 
 -   None
--   
-> Written with [StackEdit](https://stackedit.io/).
+-
+> Written with [StackEdit](https://stackedit.io/).

doc/documentation.md

@@ -8,10 +8,12 @@ DropZone.widget.DropZone
     * [~constructor()](#DropZone.widget.module_DropZone..constructor) ⇒ <code>undefined</code>
     * [~postCreate()](#DropZone.widget.module_DropZone..postCreate) ⇒ <code>undefined</code>
     * [~update(obj, callback)](#DropZone.widget.module_DropZone..update) ⇒ <code>undefined</code>
+    * [~addFormData(files, XMLhttprequest)](#DropZone.widget.module_DropZone..addFormData) ⇒
     * [~getMendixURL(files)](#DropZone.widget.module_DropZone..getMendixURL) ⇒ <code>String</code>
     * [~onError(file, message)](#DropZone.widget.module_DropZone..onError) ⇒ <code>undefined</code>
     * [~onRemoveFile(file, message)](#DropZone.widget.module_DropZone..onRemoveFile) ⇒ <code>undefined</code>
     * [~onComplete(file, message)](#DropZone.widget.module_DropZone..onComplete) ⇒ <code>undefined</code>
+    * [~onQueueComplete()](#DropZone.widget.module_DropZone..onQueueComplete) ⇒ <code>undefined</code>
     * [~accept(file, callback)](#DropZone.widget.module_DropZone..accept) ⇒ <code>undefined</code>
     * [~acceptMendix(file, callback)](#DropZone.widget.module_DropZone..acceptMendix) ⇒ <code>undefined</code>
     * [~createMendixFile(file, callback)](#DropZone.widget.module_DropZone..createMendixFile) ⇒ <code>undefined</code>
@@ -45,6 +47,20 @@ mxui.widget._WidgetBase.update is called when context is changed or initialized.
 | obj | <code>mendix/lib/MxObject</code> | the current track object, or null if there is none |
 | callback | <code>mxui/widget/_WidgetBase~ApplyContextCallback</code> | function to be called when finished |
 
+<a name="DropZone.widget.module_DropZone..addFormData"></a>
+
+### DropZone~addFormData(files, XMLhttprequest) ⇒
+add Mendix 7 'data' part to formdata
+
+**Kind**: inner method of <code>[DropZone](#DropZone.widget.module_DropZone)</code>  
+**Returns**: added formData  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| files | <code>Array.&lt;data&gt;</code> |  |
+| XMLhttprequest | <code>xhr</code> |  |
+| dropzone.js | <code>formData</code> | created formdata |
+
 <a name="DropZone.widget.module_DropZone..getMendixURL"></a>
 
 ### DropZone~getMendixURL(files) ⇒ <code>String</code>
@@ -93,6 +109,12 @@ when uploadload is completed, commit and call onchange MF
 | file | <code>type</code> | the file that is completed |
 | message | <code>type</code> | status message |
 
+<a name="DropZone.widget.module_DropZone..onQueueComplete"></a>
+
+### DropZone~onQueueComplete() ⇒ <code>undefined</code>
+When all files in the queue finish uploading call microflow onQueueCompleteMf
+
+**Kind**: inner method of <code>[DropZone](#DropZone.widget.module_DropZone)</code>  
 <a name="DropZone.widget.module_DropZone..accept"></a>
 
 ### DropZone~accept(file, callback) ⇒ <code>undefined</code>
@@ -120,7 +142,8 @@ Validate if object will be accepted by the mendix server
 <a name="DropZone.widget.module_DropZone..createMendixFile"></a>
 
 ### DropZone~createMendixFile(file, callback) ⇒ <code>undefined</code>
-Create a mendix empty file object on the server when new upload item is added.Upload of the file be done by the DropZoneJs lib
+Create a mendix empty file object on the server when new upload item is added.
+Upload of the file be done by the DropZoneJs lib
 
 **Kind**: inner method of <code>[DropZone](#DropZone.widget.module_DropZone)</code>  
 
@@ -160,6 +183,7 @@ Call onchange Miroflow if any.
 <a name="DropZone.widget.module_DropZone..uninitialize"></a>
 
 ### DropZone~uninitialize() ⇒ <code>undefined</code>
-mxui.widget._WidgetBase.uninitialize is called when the widget is destroyed. Implement to do special tear-down work.Clean up listeners, helper objects, etc. There is no need to remove listeners added with this.connect / this.subscribe / this.own.
+mxui.widget._WidgetBase.uninitialize is called when the widget is destroyed. Implement to do special tear-down work.
+Clean up listeners, helper objects, etc. There is no need to remove listeners added with this.connect / this.subscribe / this.own.
 
 **Kind**: inner method of <code>[DropZone](#DropZone.widget.module_DropZone)</code>  

src/DropZone/DropZone.xml

@@ -14,26 +14,26 @@
         <property key="nameattr" type="attribute" required="true" entityProperty="imageentity">
             <caption>Name attribute</caption>
             <category>Data</category>
-            <description>Attribute for name of the file, normally 'name'</description> 
+            <description>Attribute for name of the file, normally 'name'</description>
             <attributeTypes>
-                <attributeType name="String"/> 
+                <attributeType name="String"/>
             </attributeTypes>
         </property>
         <property key="typeattr" type="attribute" required="false" entityProperty="imageentity">
             <caption>Type attribute</caption>
             <category>Data</category>
-            <description>Attribute for the filetype, it is not required, it can be used to filter data in the on accept microflow. Values are like 'image/jpeg'</description> 
+            <description>Attribute for the filetype, it is not required, it can be used to filter data in the on accept microflow. Values are like 'image/jpeg'</description>
             <attributeTypes>
-                <attributeType name="String"/> 
+                <attributeType name="String"/>
             </attributeTypes>
-        </property>		
+        </property>
         <property key="sizeattr" type="attribute" required="false" entityProperty="imageentity">
             <caption>Size attribute</caption>
             <category>Data</category>
-            <description>Attribute for the size, not required, can be used to filter data in onAccept.</description> 
+            <description>Attribute for the size, not required, can be used to filter data in onAccept.</description>
             <attributeTypes>
-                <attributeType name="Integer"/> 
-                <attributeType name="Long"/> 
+                <attributeType name="Integer"/>
+                <attributeType name="Long"/>
             </attributeTypes>
         </property>
         <property key="contextassociation" type="entity" entityProperty="imageentity" isPath="yes" pathType="reference" required="false">
@@ -60,7 +60,12 @@
             <caption>Autosize</caption>
             <category>Settings</category>
             <description>When documents are dropped the panel is sized.</description>
-        </property>        
+        </property>
+        <property key="multipleFiles" type="boolean" defaultValue="true">
+            <caption>multipleFiles</caption>
+            <category>Settings</category>
+            <description>Allow uploading of more than one file.</description>
+        </property>
 		<property key="buttoncaption" type="translatableString" required="false">
             <caption>Button caption</caption>
             <category>Display</category>
@@ -79,7 +84,7 @@
         <property key="message" type="translatableString" required="false">
             <caption>Init Message</caption>
             <category>Display</category>
-            <description>The message that gets displayed before any files are dropped.</description>            
+            <description>The message that gets displayed before any files are dropped.</description>
             <translations>
                 <translation lang="en_US">Click here, or drop files here to upload.</translation>
                 <translation lang="nl_NL">Klik hier, of sleep bestanden hierheen om te uploaden.</translation>
@@ -103,5 +108,46 @@
             <description>Microflow is called when an uploaded file is removed. You should remove the object yourself.</description>
             <returnType type="Boolean"/>
         </property>
+        <property key="onQueueCompleteMf" type="microflow" required="false" entityProperty="imageentity">
+            <caption>On Queue Complete</caption>
+            <category>Events</category>
+            <description>Microflow is called when all files in the queue finish uploading.</description>
+            <returnType type="Void"/>
+        </property>
+        <property key="resizeWidth" type="string" required="false">
+            <caption>Resize Width</caption>
+            <category>Resize</category>
+            <description>If set, images will be resized to these dimensions before being uploaded. Set only width or height to retain aspect ratio.</description>
+        </property>
+        <property key="resizeHeight" type="string" required="false">
+            <caption>Resize Height</caption>
+            <category>Resize</category>
+            <description>If set, images will be resized to these dimensions before being uploaded. Set only width or height to retain aspect ratio</description>
+        </property>
+        <property key="resizeQuality" type="integer" defaultValue="80">
+            <caption>Resize Quality</caption>
+            <category>Resize</category>
+            <description>The quality of resized images on a scale of 0 to 100 (best)</description>
+        </property>
+        <property key="resizeMethod" type="enumeration" defaultValue="contain">
+            <caption>Resize Method</caption>
+            <category>Resize</category>
+            <description>How the images should be scaled down in case both a resize width and height are provided.</description>
+            <enumerationValues>
+                <enumerationValue key="contain">Contain</enumerationValue>
+                <enumerationValue key="crop">Crop</enumerationValue>
+            </enumerationValues>
+        </property>
+        <property key="resizeMimeType" type="enumeration" defaultValue="original">
+            <caption>Image format</caption>
+            <category>Resize</category>
+            <description>What format should the resized image be uploaded as?</description>
+            <enumerationValues>
+                <enumerationValue key="original">Original</enumerationValue>
+                <enumerationValue key="gif">GIF</enumerationValue>
+                <enumerationValue key="jpeg">JPEG</enumerationValue>
+                <enumerationValue key="png">PNG</enumerationValue>
+            </enumerationValues>
+        </property>
     </properties>
-</widget>
+</widget>