[WIP] Initial setup of Uppy

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;
@@ -990,12 +980,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;
 }
@@ -1111,37 +1095,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;

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;
-  }
-}

app/helpers/upload_form_helper.rb

@@ -40,4 +40,12 @@ def upload_form_data
       {}
     end
   end
+
+  # def multipart_upload_data
+  #   if direct_upload?
+  #     bucket = Aws::S3::Bucket.new(name: Settings.encoding.masterfile_bucket)
+  #     multipart_upload = Aws::S3::Client.new.create_multipart_upload(bucket: bucket.name, key: 'lo')
+  #     { 'upload_id' => multipart_upload[:upload_id] }
+  #   end
+  # end
 end

app/javascript/components/FileUploadUppy.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import Uppy from '@uppy/core';
+import { Dashboard } from '@uppy/react';
+import ActiveStorageUpload from '@excid3/uppy-activestorage-upload';
+import GoogleDrive from '@uppy/google-drive';
+import AwsS3 from '@uppy/aws-s3';
+import AwsS3Multipart from '@uppy/aws-s3-multipart';
+
+require('@uppy/core/dist/style.css')
+require('@uppy/dashboard/dist/style.css')
+
+class FileUploadUppy extends React.Component {
+  constructor(props) {
+    super(props);
+    // this.state = {
+    //   dirUploadURL: document.querySelector("meta[name='direct-upload-url']").getAttribute("content"),
+    // };
+  }  
+
+  componentWillMount() {
+    const t = this;
+    this.uppy = new Uppy({
+      id: "uppy-file-upload",
+      autoProceed: true,
+      restrictions: {
+        allowedFileTypes: [".mp4", ".mp3"]
+      },
+    });
+
+    this.uppy
+      // .use(ActiveStorageUpload, {
+      //   directUploadUrl: this.state.dirUploadURL
+      // })
+      .use(GoogleDrive, {
+        companionUrl: 'http://localhost:3020'
+      })
+      // .use(AwsS3Multipart, {
+      //   limit: 5,
+      //   timeout: 60*1000, // set to 1min
+      //   companionUrl: '/',
+      // })
+      .use(AwsS3, {
+        limit: 5,
+        timeout: 60*1000, // set to 1min
+        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 Removed --- ", file, c, d);
+      })
+      .on("file-added", () => {
+        console.log("File Added, ", t.props.uploadData);
+      })
+      .on("complete", function({ failed, successful }) {
+        if(failed.length > 0) {
+          console.log("File Upload S3 --- Error");
+        }
+        if(successful.length > 0) {
+          console.log("File Upload S3 --- Success");
+          const { containerID, step } = t.props;
+          let formData = new FormData();
+          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 => { 
+              location.reload();
+            })
+            .catch(error => {
+              console.error('MasterFile creation failed, ', error);
+          });
+        }
+      });
+  }
+
+  componentWillUnmount() {
+    this.uppy.close();
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <Dashboard
+          uppy={this.uppy}
+          plugins={["GoogleDrive"]}
+          proudlyDisplayPoweredByUppy={false}
+          showProgressDetails={true}
+          hideUploadButton={false}
+          target="body"
+        />
+        <style>
+          {`.uppy-Dashboard-inner {
+              z-index: 0 !important;
+              width: 100% !important;
+              height: 425px !important;
+          }`}
+        </style>
+      </React.Fragment>
+    );
+  }
+}
+
+export default FileUploadUppy;

app/models/master_file.rb

@@ -181,7 +181,7 @@ def error
   # be set up in a configuration file somewhere
   #
   # 250 MB is the file limit for now
-  MAXIMUM_UPLOAD_SIZE = Settings.max_upload_size || 2.gigabytes
+  MAXIMUM_UPLOAD_SIZE = Settings.max_upload_size || 5.gigabytes
 
   WORKFLOWS = ['fullaudio', 'avalon', 'pass_through', 'avalon-skip-transcoding', 'avalon-skip-transcoding-audio'].freeze
   AUDIO_TYPES = ["audio/vnd.wave", "audio/mpeg", "audio/mp3", "audio/mp4", "audio/wav", "audio/x-wav"]