Merge pull request #34 from Pooyahmti/master

FEAT: Gives the option to send all files in a single request #32

Author: JinSSJ3

src/Dropzone/components/dropzone/Dropzone.tsx

@@ -89,6 +89,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     //uploading
     uploadConfig,
     fakeUpload,
+    groupUpload,
     onUploadStart,
     onUploadFinish,
     //styling
@@ -326,6 +327,46 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
 
     //return;
     let serverResponses: Array<ExtFile> = [];
+    
+    if(groupUpload) {
+    const unifiedUpload = (method, url, arrOfFiles) : Promise<{ success : boolean, message : string, payload: object }> => {
+      arrOfExtFilesInstances.forEach((el) => el.uploadStatus = "uploading");
+      handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true);
+      const formData = new FormData();
+      for (let i=0; i < arrOfFiles.length; i++) {
+        formData.append('files', arrOfFiles[i].file )
+      }
+      return new Promise((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.upload.onprogress =  (e) => {arrOfExtFilesInstances.forEach((el) => { el.progress = (e.loaded / e.total) * 100 });handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true)};
+        xhr.responseType = 'json'
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            console.log(xhr.response);
+            console.log(typeof xhr.response);
+            resolve(xhr.response);
+          } else {
+            reject(xhr.response);
+          }
+        };
+        xhr.onerror = (err) => {
+          reject(err);
+        };
+        xhr.open(method, url);
+        xhr.send(formData)
+      });
+    };
+    try {
+      let respo:{ success : boolean, message : string, payload: object} = await unifiedUpload("POST", url, arrOfExtFilesInstances);
+      arrOfExtFilesInstances.forEach( el => el.uploadStatus = "success");
+      arrOfExtFilesInstances.forEach( el => el.uploadMessage = respo.message);
+     } catch (err) {
+      arrOfExtFilesInstances.forEach( el => el.uploadStatus = "error");
+      arrOfExtFilesInstances.forEach( el => el.uploadMessage = err.message);
+        console.log(err)
+      }
+      handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true);
+    } else {
     //Uplad files one by one
     for (let i = 0; i < arrOfExtFilesInstances.length; i++) {
       const currentExtFileInstance: ExtFileInstance = arrOfExtFilesInstances[i];
@@ -405,7 +446,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
         handleFilesChange(sanitizeArrExtFile(arrOfExtFilesInstances), true);
       }
     }
-
+  }
     setLocalFiles(sanitizeArrExtFile(arrOfExtFilesInstances));
 
     // upload group finished :D

src/Dropzone/components/dropzone/DropzoneProps.ts

@@ -98,6 +98,11 @@ export interface DropzoneFullProps extends OverridableComponentProps {
    * the upload button
    */
   fakeUpload?: boolean;
+  /**
+   * If set, will upload all loaded files in a single multipart request appending array of files
+   * to the FormData files key
+   */
+  groupUpload?: boolean;
   /**
    * Callback fired when the upload process starts.
    */