Cleanup previous fileupload, Add multiple file upload support in Uppy

avalonmediasystem · Dec 13, 2022 · 6e40cf2 · 6e40cf2
1 parent 480552a
commit 6e40cf2
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 1,665 deletions.
diff --git a/app/assets/javascripts/direct_upload.js.coffee b/app/assets/javascripts/direct_upload.js.coffee
diff --git a/app/assets/stylesheets/avalon.scss b/app/assets/stylesheets/avalon.scss
@@ -367,16 +367,6 @@ span.constraints-label {
   white-space: nowrap;
 }
 
-.fileinput {
-  max-width: 500px;
-
-  .form-control {
-    max-width: 500px;
-    white-space: nowrap;
-    overflow-x: hidden;
-  }
-}
-
 a[data-trigger='submit'] {
   text-decoration: none;
   color: $dark;
@@ -973,12 +963,6 @@ h5.card-title {
   word-break: break-all;
 }
 
-// Fixes the input displaying over the dropdown datepicker calendar
-.fileinput {
-  position: relative;
-  z-index: 1;
-}
-
 .is-invalid {
   border-color: $danger;
 }
@@ -1094,37 +1078,6 @@ h5.card-title {
   }
 }
 
-/* File upload step */
-.file-upload-buttons {
-  display: block;
-  padding-top: 5px;
-  min-width: 75px;
-  margin-right: 5px;
-  height: 30px;
-}
-
-.fileinput-filename {
-  width: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-top: 5px;
-}
-
-.form-disabled {
-  pointer-events: none;
-  opacity: 0.4;
-}
-
-.fileinput-close {
-  padding-top: 5px;
-  float: none;
-}
-
-#file-upload {
-  display: flex;
-}
-
 /* DataTables in Playlists, Timelines, Persona Users, and Encode Dashboard */
 .dataTableToolsTop {
   text-align: right;

diff --git a/app/assets/stylesheets/avalon/_form.scss b/app/assets/stylesheets/avalon/_form.scss
@@ -98,17 +98,6 @@ label {
   color: $dark;
 }
 
-.fileinput-submit {
-  background-color: $blue  !important;
-  border-color: $blue  !important;
-
-  &:hover {
-    background-color: darken($blue, 15%) !important;
-  }
-
-  color: $white  !important;
-}
-
 .upload-file-wrapper {
   padding: 5px 5px 0 5px !important;
 }
@@ -118,9 +107,3 @@ label {
     font-weight: bold;
   }
 }
-
-#resource-description {
-  .input-group {
-    flex-wrap: nowrap;
-  }
-}
diff --git a/app/javascript/components/FileUploadUppy.jsx b/app/javascript/components/FileUploadUppy.jsx
@@ -55,19 +55,23 @@ class FileUploadUppy extends React.Component {
         }
         if(successful.length > 0) {
           console.log("File Upload S3 --- Success");
-          const { uploadURL, name, size } = successful[0];
-          const { container_id, step } = t.props;
+          const { containerID, step } = t.props;
           let formData = new FormData();
-          const newS3URl = uploadURL.replace('http://localhost:9000/', 's3://');
-          console.log(newS3URl);
-          formData.append('selected_files[0][url]', newS3URl);
-          formData.append('container_id', container_id);
+          successful.map((res, index) => {
+            const s3Url = res.uploadURL.replace('http://localhost:9000/', 's3://');
+            formData.append('selected_files[' + index + '][url]', s3Url);
+          })
+          formData.append('container_id', containerID);
           formData.append('step', step);
 
           fetch('http://localhost:3000/master_files', {
             method: 'POST',
             headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
             body: formData
+          })
+            .then(res => { })
+            .catch(error => {
+              console.error('MasterFile create failed, ', error);
           });
         }
       });
@@ -90,7 +94,9 @@ class FileUploadUppy extends React.Component {
         />
         <style>
           {`.uppy-Dashboard-inner {
-              z-index: 0 !important
+              z-index: 0 !important;
+              width: 100% !important;
+              height: 425px !important;
           }`}
         </style>
       </React.Fragment>

diff --git a/app/views/media_objects/_file_upload.html.erb b/app/views/media_objects/_file_upload.html.erb
@@ -173,7 +173,7 @@ Unless required by applicable law or agreed to in writing, software distributed
       <div>
         <!-- web-upload -->
         <p class="muted">Upload through the web (files must not exceed <%= number_to_human_size MasterFile::MAXIMUM_UPLOAD_SIZE %>)</p>
-        <%= react_component("FileUploadUppy", { uploadData: upload_form_data, container_id: @media_object.id, step: 'file_upload' }) %>
+        <%= react_component("FileUploadUppy", { uploadData: upload_form_data, containerID: @media_object.id, step: 'file_upload' }) %>
       </div>
     </div>
   </div>