Fix master file creation with Uppy S3 upload

Co-authored-by: Chris Colvard <[email protected]>
avalonmediasystem · Dec 13, 2022 · 480552a · 480552a
1 parent 989824a
commit 480552a
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 813 deletions.
diff --git a/app/javascript/components/FileUploadUppy.jsx b/app/javascript/components/FileUploadUppy.jsx
@@ -20,7 +20,7 @@ class FileUploadUppy extends React.Component {
     const t = this;
     this.uppy = new Uppy({
       id: "uppy-file-upload",
-      // autoProceed: false,
+      autoProceed: true,
       restrictions: {
         allowedFileTypes: [".mp4", ".mp3"]
       },
@@ -44,30 +44,30 @@ class FileUploadUppy extends React.Component {
         }
       })
       .on("file-removed", (file, c, d) => {
-        console.log("---", file, c, d);
+        console.log("File Removed --- ", file, c, d);
       })
       .on("file-added", () => {
-        console.log("file added");
-      })
-      .on("upload-success", () => {
-        console.log("upload-success");
+        console.log("File Added, ", t.props.uploadData);
       })
       .on("complete", function({ failed, successful }) {
         if(failed.length > 0) {
-          console.error('UPLOAD ERROR');
+          console.log("File Upload S3 --- Error");
         }
         if(successful.length > 0) {
+          console.log("File Upload S3 --- Success");
           const { uploadURL, name, size } = successful[0];
           const { container_id, 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);
+          formData.append('step', step);
+
           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 } }
-            })
+            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
+            body: formData
           });
         }
       });
@@ -80,21 +80,19 @@ class FileUploadUppy extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <form >
-          <Dashboard
-            uppy={this.uppy}
-            plugins={["GoogleDrive"]}
-            proudlyDisplayPoweredByUppy={false}
-            showProgressDetails={true}
-            hideUploadButton={false}
-            target="body"
-          />
-          <style>
-            {`.uppy-Dashboard-inner {
-                z-index: 0 !important
-            }`}
-          </style>
-        </form>
+        <Dashboard
+          uppy={this.uppy}
+          plugins={["GoogleDrive"]}
+          proudlyDisplayPoweredByUppy={false}
+          showProgressDetails={true}
+          hideUploadButton={false}
+          target="body"
+        />
+        <style>
+          {`.uppy-Dashboard-inner {
+              z-index: 0 !important
+          }`}
+        </style>
       </React.Fragment>
     );
   }

diff --git a/app/views/media_objects/_file_upload.html.erb b/app/views/media_objects/_file_upload.html.erb
@@ -170,7 +170,7 @@ Unless required by applicable law or agreed to in writing, software distributed
       <hr/>
       <% end %>
 
-      <div class="row">
+      <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' }) %>

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -98,12 +98,12 @@ services:
       - COMPANION_AWS_SECRET=minio123
       - COMPANION_AWS_BUCKET=masterfiles
       # - COMPANION_AWS_REGION=us-east-1
-      - COMPANION_AWS_ENDPOINT="http://localhost:9000"
+      # - COMPANION_AWS_ENDPOINT="http://localhost:9000"
       # to enable S3 Transfer Acceleration (default: false)
       - COMPANION_AWS_USE_ACCELERATE_ENDPOINT="false"
       # to set a canned ACL for uploaded objects: https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl
       - COMPANION_AWS_ACL="private"
-      - COMPANION_S3_ENDPOINT=http://localhost:9000
+      # - COMPANION_S3_ENDPOINT=http://localhost:9000
       # any long set of random characters for the server session
       - COMPANION_SECRET="shh!Issa Secret!"
       # specifying a secret file will override a directly set secret
@@ -210,6 +210,8 @@ services:
     environment:
       MINIO_ACCESS_KEY: minio
       MINIO_SECRET_KEY: minio123
+      # MINIO_SERVER_URL: http://minio:9000
+      # MINIO_BROWSER_REDIRECT_URL: http://minio:9000
     volumes:
       - data:/data
     ports: