Uppy Aws S3 Unable to setup

Uppy
1

I am not sure what I am doing right , but the files are not loading ?

let uploader = new Uppy({
debug: true,
autoProceed: true ,
restrictions: {
maxFileSize: ‘500MB’,
maxNumberOfFiles: 1,
minNumberOfFiles: 1,
allowedFileTypes: [’.csv’, ‘.txt’, ‘.tsv’]
}
}
uploader.use(XHRUpload, {
endpoint: attrs.url,
formData: false,
fieldName: ‘files[]’
})
uploader.use(FileInput, {
target: ‘.UppyForm’,
replaceTargetContent: true
})
.use(AwsS3Multipart, {
limit: 4,
companionUrl: attr.url
})
uploader.on(‘upload-success’, (file, response) => {
const url = response.uploadURL
const fileName = file.name

})

I get this message:
[Uppy] [15:43:33] TypeError: this.uppy.addFiles is not a function
at FileInput.addFiles (vendor.bundle.js:7179)
at FileInput.handleInputChange (vendor.bundle.js:7188)
at HTMLInputElement.eventProxy (vendor.bundle.js:13118)

2

At a quick glance, looks to me like you’re missing a closing parenthesis after your “uploader” declaration - think it should instead look like (note “)” at end):

let uploader = new Uppy({
debug: true,
autoProceed: true ,
restrictions: {
maxFileSize: ‘500MB’,
maxNumberOfFiles: 1,
minNumberOfFiles: 1,
allowedFileTypes: [’.csv’, ‘.txt’, ‘.tsv’]
}
})

Also, I think S3 uses XHRUpload automatically (it does on the non-mutilpart version, anyway), such that you don’t need to specify it. Have a look at an example I posted here - it uses non-multipart S3, but should be similar implementation. Does that help?

3

Thanks for reply. I had looked at your post and tried to implement.
However I am unable to load the file, I get this error:

'vendor.bundle.js:3422 [Uppy] [10:41:37] Failed because: Non 2xx

Below is my complete code:

const uppy = Uppy({
debug: true,
autoProceed: true,
restrictions: {
maxFileSize: ‘500MB’,
maxNumberOfFiles: 1,
minNumberOfFiles: 1,
allowedFileTypes: [’.csv’, ‘.txt’, ‘.tsv’]
},
meta: {
utf8: true,
key: attrs.key,
‘x-amz-server-side-encryption’: “AES256”,
‘x-amz-meta-filename’: attrs.filename, // adding this to keep consistency across the runtimes
Filename: attrs.filename,
acl: attrs.acl,
‘Content-Type’: ‘text/csv’,
AWSAccessKeyId : attrs.awsAccessKeyId,
policy: attrs.policy,
signature: attrs.signature,
‘success_action_status’: “201”
},
});
uppy.use(FileInput, {
target: ‘.UppyForm’,
pretty: true,
strings: {
chooseFiles: ‘Choose and Upload’
},
replaceTargetContent: true
})
.use(AwsS3Multipart, {
limit: 4,
companionUrl: attrs.url,
companionHeaders: {
utf8: true,
policy: attrs.policy,
signature: attrs.signature,
mime_types : [
{ title : “Delimited files”, extensions : “csv,tsv,txt” }
]
},
createMultipartUpload(file) {

          scope.$evalAsync(() => {
           scope.onProgress({percent: file.percent, name: file.name});
         });
         return { uploadId:file.id,
            key:attrs.key,
            response:file.response
         }
       },
       listParts(file, opts) {
         file
         opts.uploadId /
         opts.key
       },

       prepareUploadPart(file, part) {
         file
         part.uploadId =  attrs.awsAccessKeyId;
         part.key = attrs.awsAccessKeyId;
         part.body //  Blob
         part.number
        scope.$evalAsync(() => {
           scope.onProgress({percent: 0, name: attrs.filename});
           $('.moxie-shim').hide();
        });
       //uploader.upload();
         return {url: attrs.url}
       },
       abortMultipartUpload(file, opts) {
         file
         opts.uploadId
         opts.key
       },
       completeMultipartUpload(file, opts) {
         file
         opts.uploadId
         opts.key
         opts.parts[0]
      //  uploader.upload();
         return {file:file,
           opts:opts}
       },
    });

      // And display uploaded files
      uppy.on('upload-success', (file, response) => {
        const url = response.uploadURL
        const fileName = file.name

        document.querySelector('.uploaded-files ol').innerHTML +=
          `<li><a href="${url}" target="_blank">${fileName}</a></li>`
      });
      uppy.on('upload', (data) => {
        console.log(data)

      })
      uppy.on('file-added', (file) => {
        console.log(file);
        uppy.upload();

      })

I was wondering do I have to make any other changes to S3 bucket. I did add the PUT and Etag in CORS policy.

When I try to upload the same file from anothe provider plupload.Uploader it works fine.

Thanks

4

I’m so very sorry for the late reply - didn’t get a notification and just saw yours when I logged in now, 5 months later …

Were you able to solve? Looks to me like a webpack error, but I’m not very familiar with webpack at all - the example I posted was directly on the client side without any bundler.