Merge pull request #952 from scireum/feature/meg/OX-7664

Updates dropzone to upload the file as body

src/main/resources/default/assets/tycho/libs/dropzonejs/dropzone.js

@@ -1,11 +1,3 @@
-/*
- * Made with all the love in the world
- * by scireum in Remshalden, Germany
- *
- * Copyright by scireum GmbH
- * http://www.scireum.de - info@scireum.de
- */
-
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -7091,6 +7083,12 @@ var defaultOptions = {
    */
   retryChunksLimit: 3,
 
+  /**
+   * If `true`, the file will be uploaded as the body of the request instead of a form parameter. If this is used,
+   * uploadMultiple and chunking is disabled and any other form parameters will not be send.
+   */
+  sendFileAsBody: false,
+
   /**
    * The maximum filesize (in bytes) that is allowed to be uploaded.
    */
@@ -7952,6 +7950,14 @@ var Dropzone = /*#__PURE__*/function (_Emitter) {
 
     if (_this.options.uploadMultiple && _this.options.chunking) {
       throw new Error("You cannot set both: uploadMultiple and chunking.");
+    }
+
+    if (_this.options.sendFileAsBody && _this.options.chunking) {
+      throw new Error("You cannot set both: sendFileAsBody and chunking.");
+    }
+
+    if (_this.options.sendFileAsBody && _this.options.uploadMultiple) {
+      throw new Error("You cannot set both: sendFileAsBody and uploadMultiple.");
     } // Backwards compatibility
 
 
@@ -9346,6 +9352,10 @@ var Dropzone = /*#__PURE__*/function (_Emitter) {
         "X-Requested-With": "XMLHttpRequest"
       };
 
+      if (this.options.sendFileAsBody) {
+        headers["Content-Type"] = files[0].type;
+      }
+
       if (this.options.headers) {
         Dropzone.extend(headers, this.options.headers);
       }
@@ -9627,7 +9637,11 @@ var Dropzone = /*#__PURE__*/function (_Emitter) {
         return;
       }
 
-      xhr.send(formData);
+      if (this.options.sendFileAsBody) {
+        xhr.send(files[0]);
+      } else {
+        xhr.send(formData);
+      }
     } // Called internally when processing is finished.
     // Individual callbacks have to be called in the appropriate sections.
 
@@ -9739,7 +9753,7 @@ var Dropzone = /*#__PURE__*/function (_Emitter) {
 
 
 Dropzone.initClass();
-Dropzone.version = "5.9.3"; // This is a map of options for your different dropzones. Add configurations
+Dropzone.version = "dev"; // This is a map of options for your different dropzones. Add configurations
 // to this object for your different dropzone elemens.
 //
 // Example:
@@ -10446,4 +10460,4 @@ window.Dropzone = Dropzone;
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;
-});
+});

src/main/resources/default/taglib/t/fileUpload.html.pasta

@@ -10,7 +10,6 @@
 <i:arg type="int" name="maxParallelConnections" default="3"/>
 <i:arg type="String" name="previewsContainer" default=""
        description="A dom selector to render the upload progress into. If not set, will render below the button."/>
-<i:arg type="String" name="path" default="" />
 
 <i:pragma name="description" value="Renders a file upload within a Wondergem template"/>
 
@@ -25,7 +24,15 @@
 
 <script type="text/javascript">
     Dropzone.options[sirius.camelize('@id')] = {
-        url: '@raw {@uploadUrl}',
+        url: function (files) {
+            const uploadUrl = '@raw {@uploadUrl}';
+            let parameterIndicator = '?';
+            if (uploadUrl.indexOf('?') >= 0) {
+                parameterIndicator = '&';
+            }
+            return uploadUrl + parameterIndicator + 'filename=' + files[0].name;
+        },
+        sendFileAsBody: true,
         parallelUploads: ___maxParallelConnections,
         maxFilesize: 4096,
         acceptedFiles: '@raw {@acceptedFiles}' || null,
@@ -53,10 +60,6 @@
         previewsContainer: '@previewsContainer' || '#' + '@id' + ' .dropzone-items',
         clickable: '#' + '@id' + ' .dropzone-select',
         init: function () {
-            this.on('sending', function (file, xhr, formData) {
-                formData.append('filename', file.name);
-                formData.append('path', '@path');
-            });
             this.on('success', function (file, response) {
                 if (response.refresh) {
                     setTimeout(function () {

src/main/resources/default/taglib/t/imageUpload.html.pasta

@@ -4,7 +4,8 @@
 <i:arg type="String" name="uploadUrl"/>
 <i:arg type="String" name="currentImage"/>
 <i:arg name="class" type="String" default="" description="Lists additional CSS classes to apply to the dropzone."/>
-<i:arg name="btnClass" type="String" default="" description="Lists additional CSS classes to apply to the upload button."/>
+<i:arg name="btnClass" type="String" default=""
+       description="Lists additional CSS classes to apply to the upload button."/>
 <i:arg type="String" name="acceptedFiles"
        default="This is a comma separated list of allowed mime types or file extensions. Eg.: image/*,application/pdf,.psd"/>
 
@@ -19,12 +20,20 @@
     <a class="dropzone-select btn btn-primary @btnClass">@label</a>
     <div class="dropzone-items mt-2">
     </div>
-    <i:render name="body" />
+    <i:render name="body"/>
 </div>
 
 <script type="text/javascript">
     Dropzone.options[sirius.camelize('@id')] = {
-        url: '@raw {@uploadUrl}',
+        url: function (files) {
+            const uploadUrl = '@raw {@uploadUrl}';
+            let parameterIndicator = '?';
+            if (uploadUrl.indexOf('?') >= 0) {
+                parameterIndicator = '&';
+            }
+            return uploadUrl + parameterIndicator + 'filename=' + files[0].name;
+        },
+        sendFileAsBody: true,
         parallelUploads: 1,
         maxFiles: 1,
         maxFilesize: 4096,