Fix S3 upload with Uppy

avalonmediasystem · Nov 11, 2022 · 01c59db · 01c59db
1 parent a3f2784
commit 01c59db
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/app/javascript/components/FileUploadUppy.jsx b/app/javascript/components/FileUploadUppy.jsx
@@ -17,6 +17,7 @@ class FileUploadUppy extends React.Component {
   }  
 
   componentWillMount() {
+    const t = this;
     this.uppy = new Uppy({
       id: "uppy-file-upload",
       // autoProceed: false,
@@ -33,9 +34,14 @@ class FileUploadUppy extends React.Component {
         companionUrl: 'http://localhost:3020'
       })
       .use(AwsS3, {
-        // limit: 2,
-        // timeout: ms('1 minute'),
         companionUrl: 'http://localhost:3020',
+        getUploadParameters() {
+          return Promise.resolve({
+            method: 'POST',
+            url: t.props.uploadData['url'],
+            fields: t.props.uploadData['form-data']
+          });
+        }
       })
       .on("file-removed", (file, c, d) => {
         console.log("---", file, c, d);
@@ -44,10 +50,26 @@ class FileUploadUppy extends React.Component {
         console.log("file added");
       })
       .on("upload-success", () => {
-        console.log("ddd");
+        console.log("upload-success");
       })
-      .on("complete", function() {
-        console.log('complete');
+      .on("complete", function({ failed, successful }) {
+        if(failed.length > 0) {
+          console.error('UPLOAD ERROR');
+        }
+        if(successful.length > 0) {
+          const { uploadURL, name, size } = successful[0];
+          const { container_id, step } = t.props;
+          fetch('http://localhost:3000/master_files', {
+            method: 'POST',
+            headers: { },
+            body: JSON.stringify({
+              container_id: container_id,
+              step: step,
+              authenticity_token: $('input[name=authenticity_token]').val(),
+              selected_files: { '0':  { url: uploadURL, filename: name, filesize: size } }
+            })
+          });
+        }
       });
   }
 

diff --git a/app/views/media_objects/_file_upload.html.erb b/app/views/media_objects/_file_upload.html.erb
@@ -173,20 +173,7 @@ Unless required by applicable law or agreed to in writing, software distributed
       <div class="row">
         <!-- web-upload -->
         <p class="muted">Upload through the web (files must not exceed <%= number_to_human_size MasterFile::MAXIMUM_UPLOAD_SIZE %>)</p>
-        <fieldset id='uploader'>
-          <%= form_tag(master_files_path, :enctype=>"multipart/form-data", class: upload_form_classes, data: upload_form_data) do -%>
-            <input type="hidden" name="container_id" value="<%= @media_object.id %>" />
-            <input type="hidden" name="step" value="file_upload" />
-
-            <%= hidden_field_tag("container_content_type", container_content_type, :id => "file_upload_content_type") if defined?(container_content_type) %>
-            <%- field_tag_options = defined?(uploader_options) ? uploader_options : {multiple: true} %>
-
-            <%= hidden_field_tag(:new_asset, true, :id => "files_new_asset") if params[:new_asset] %>
-            <%= hidden_field_tag("id",params[:id], :id => "file_upload_id") if params[:id] %>
-            <%= hidden_field_tag(:original, params[:original], :id => "files_original") %>
-          <% end %>
-        </fieldset>
-        <%= react_component("FileUploadUppy", {}) %>
+        <%= react_component("FileUploadUppy", { uploadData: upload_form_data, container_id: @media_object.id, step: 'file_upload' }) %>
       </div>
     </div>
   </div>