Uses Uppy for uploads in the Work edit screen (#1719)

* Demo using Uppy for uploads * Handle the individual file * Upload all files at once. Switch the uploader to be triggered by our button. Refresh file list after upload * Upload immediately * Minor tweaks * Force Uppy in staging * Render new Uppy JavaScript only when needed
pulibrary · Apr 3, 2024 · cc183cd · cc183cd
1 parent 7df1220
commit cc183cd
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 4 deletions.
diff --git a/app/controllers/works_controller.rb b/app/controllers/works_controller.rb
@@ -108,6 +108,8 @@ def resolve_ark
   # GET /works/1/edit
   # only non wizard mode
   def edit
+    @new_uploader = params[:new_uploader] == "true" || Rails.env.staging?
+
     @work = Work.find(params[:id])
     @work_decorator = WorkDecorator.new(@work, current_user)
     if validate_modification_permissions(work: @work,
@@ -214,6 +216,12 @@ def bibtex
     send_data bibtex, filename: "#{citation.bibtex_id}.bibtex", type: "text/plain", disposition: "attachment"
   end
 
+  def upload_files
+    @work = Work.find(params[:id])
+    upload_service = WorkUploadsEditService.new(@work, current_user)
+    upload_service.update_precurated_file_list(params["files"], [])
+  end
+
   private
 
     # Extract the Work ID parameter

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/ui-lightness/jquery-ui.css">
+    <link href="https://transloadit.edgly.net/releases/uppy/v0.25.2/dist/uppy.min.css" rel="stylesheet">
 
     <!-- Popper must be included before bootstrap JS
       See https://getbootstrap.com/docs/5.1/getting-started/download/ -->
@@ -31,6 +32,9 @@
       // Then the stand-alone JS files can reference this.
       let pdc = {};
     </script>
+
+    <!-- Uppy is used for file uploads -->
+    <script src="https://transloadit.edgly.net/releases/uppy/v0.25.2/dist/uppy.min.js"></script>
   </head>
 
   <body>

diff --git a/app/views/works/_form.html.erb b/app/views/works/_form.html.erb
@@ -27,11 +27,19 @@
             <%= render(partial: 'works/s3_resources', locals: { edit_mode: true, form: form }) %>
           </section>
           <div class="container-fluid deposit-uploads">
+
+            <% if @new_uploader == true %>
+              <!-- Uses Uppy for uploading -->
+              <div id="file-upload-area"></div>
+              <button id="add-files-button" class="btn btn-secondary" style="width: 200px;"><i class="bi bi-plus-circle"></i> Add More Files</button>
+            <% else %>
+              <!-- Uses the browser's default file upload controls -->
+              <%= form.label("Choose files to attach to this work", for: :pre_curation_uploads_added) %>
+              <%= form.file_field(:pre_curation_uploads_added, id: "pre_curation_uploads_added", multiple: true) %>
+              <!-- We populate this via JavaScript as the user selected files to upload -->
+              <div id="file-upload-list"></div>
+            <% end %>
             <div id="file-error" class="error_box"></div>
-            <%= form.label("Choose files to attach to this work", for: :pre_curation_uploads_added) %>
-            <%= form.file_field(:pre_curation_uploads_added, id: "pre_curation_uploads_added", multiple: true) %>
-            <!-- We populate this via JavaScript as the user selected files to upload -->
-            <div id="file-upload-list"></div>
           </div>
         <% end %>
       </div>
@@ -50,3 +58,48 @@
     <% end %>
   </div>
 </div>
+
+<!--
+  Only render the Uppy JavaScript if we are using it.
+  This also prevents the call to `work_upload_files_path(@work)` when the `work.id` is nil
+  which happens when migrating a dataset from DataSpace.
+-->
+<% if @new_uploader == true %>
+<script>
+  // Setup Uppy to handle file uploads
+  // References:
+  //    https://davidwalsh.name/uppy-file-uploading
+  //    https://uppy.io/blog/2018/08/0.27/#autoproceed-false-by-default
+  var uppy = Uppy.Core({ autoProceed: true })
+
+  // Configure the initial display
+  // https://uppy.io/docs/dashboard
+  uppy.use(Uppy.Dashboard, {
+    target: '#file-upload-area',
+    inline: false, // display of dashboard only when trigger is clicked
+    trigger: "#add-files-button"
+  })
+
+  // We use the XHRUploader - this is the most basic
+  // https://uppy.io/docs/xhr-upload/
+  // X-CSRF-Token: https://stackoverflow.com/a/75050497/446681
+  uppy.use(Uppy.XHRUpload, {
+    endpoint: '<%= work_upload_files_path(@work) %>',
+    headers: {
+        'X-CSRF-Token': document.querySelector("meta[name='csrf-token']").content
+    },
+    bundle: true,   // upload all selected files at once
+    formData: true, // required when bundle: true
+    getResponseData: function(responseText, response) {
+      // Reload the file list displayed
+      let fileTable = $('#files-table').dataTable();
+      fileTable.api().ajax.reload();
+    }
+  })
+
+  $("#add-files-button").on("click", function(_x) {
+    // Prevent the button's click from submitting the form
+    return false;
+  })
+</script>
+<% end %>
diff --git a/config/routes.rb b/config/routes.rb
@@ -60,6 +60,7 @@
   resources :works
   get "/doi/*doi", to: "works#resolve_doi", as: :resolve_doi, format: false
   get "/ark/*ark", to: "works#resolve_ark", as: :resolve_ark, format: false
+  post "works/:id/upload-files", to: "works#upload_files", as: :work_upload_files
 
   get "upload-snapshots/:work_id", to: "upload_snapshots#edit", as: :edit_upload_snapshot
   get "upload-snapshots/:id/download", to: "upload_snapshots#download", as: :download_upload_snapshot