uppy: Aws-s3-multipart doesn't work

When I try to upload a file using Aws-s3-multipart, nothing happens— no upload progress bar, error message, or activity on my aws s3 account. I’ve installed through the CDN package and included my javascript code through a script tag. Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>VideoUpload</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>
  </head>

  <body>
    <%= yield %>
    <script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/tus-js-client@1.4.5/dist/tus.js"></script>
    <script src="https://transloadit.edgly.net/releases/uppy/v0.27.5/dist/uppy.min.js"></script>
    <link href="https://transloadit.edgly.net/releases/uppy/v0.27.5/dist/uppy.min.css" rel="stylesheet" />
 </body>
 <script>
  function fileUpload(fileInput) {
     fileInput.style.display = 'none'; // uppy will add its own file input
     const imagePreview = document.querySelector(".upload-preview");

     var uppy = window.Uppy.Core({
         id: fileInput.id,
       })
       .use(window.Uppy.FileInput, {
         target: fileInput.parentNode,
       })
       .use(window.Uppy.Informer, {
         target: fileInput.parentNode,
       })
       .use(window.Uppy.ProgressBar, {
         target: imagePreview.parentNode,
       });

     uppy.use(window.Uppy.AwsS3Multipart, {
       serverUrl: '',
     });

     uppy.on('upload-success', function (file, data, uploadURL) {
       console.log("SUCCESS");
       // show image preview
       imagePreview.src = URL.createObjectURL(file.data)
       // construct uploaded file data in the format that Shrine expects
       var uploadedFileData = JSON.stringify({
         id: uploadURL.match(/\/cache\/([^\?]+)/)[1], // extract key without prefix
         storage: 'cache',
         metadata: {
           size:      file.size,
           filename:  file.name,
           mime_type: file.type,
         }
     });

      // set hidden field value to the uploaded file data so that it's submitted with the form as the attachment
      var hiddenInput = fileInput.parentNode.querySelector('.upload-hidden')
      hiddenInput.value = uploadedFileData;
    })

     return uppy;
   }

   document.querySelectorAll("#file-input").forEach( fileInput => {
     fileUpload(fileInput)
   });

   //Move the submit button to the end of the form
   const submitButton = document.getElementById('submit');
   const uploadForm   = document.querySelector('.upload-form');
   uploadForm.append(submitButton);
 </script>
</html>

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

@samdealy Great 😃

@goto-bus-stop @arturi This issue can be closed.

janko on Nov 9, 2018

@samdealy The autoproceed option needs to be in camel case – autoProceed.

janko on Oct 17, 2018