AWS s3 multipart file upload with React.

In this video, I'll show you how to implement an AWS s3 multipart file upload with React.

#aws #s3 #react #multipart

Follow on Twitter:

Support on Buy Me Coffee:

[Raul-sibn]

hi!
First of all, good Job, there are not many resources about this (easier imho) way of uploading to AWS without needing any backend in the project. Already subcribed.

I was trying to replicate your function, without success. I have two questions :
how do you name your keys in "creds = {}“ ?
in my case i try "creds = { accessKeyId:, secretAccessKey: } ....is it correct??

Second cuestion would be if I need to add any policy to my bucket, and in general, what the settings from my bucket should be.

Thanks in advance!

[muskanjaved]

I tried 4-5 libraries of s3 uploading but only this one works, and great explanation make it better thanks for the good content.

[kennedydre]

Hi thanks, great tutorial, easy and straight to the point. I have a question, would that method be sufficient with just a single image file?

[openroad]

How we can achieve pause and resume feature with this module?

[devangpatel]

Hii

I try to upload 20MB file using this approach but its give me error.

Information:
status code: 400
method: post
Response:
<Code>MalformedXML</Code>
<Message>The XML you provided was not well-formed or did not validate against our published schema</Message>

Notes: when I try to upload file other four part(put request) uploaded successfully but In last part its gives me error.

Hello!
Can you help me how can I upload file bigger than 5MB cause now I cannot upload something bigger than 5MB or should I need to config something in S3 of AWS?
Thanks all I just config CORS the same with above and it worked for me now 😍😍

[sarashaikh]

Thank you very very much! This is the best source :)

[eventshut]

Error : TypeError: Cannot read properties of undefined (reading 'byteLength')

[shakeebanwar]

I am successfuly done but one problem is when i open the uploaded file link file directly downloaded not view problem is content-type header but how i add these header

[lakneswarankrishnan]

How to Analystic.record saves in different folders in s3 bucket?

[rajkiranm]

Hi .. thanks for the content..it helped a lot.. is there anyway we can resume file upload after a network error?

[michaelzucker]

Good video. One question...isn't it rather insecure to include your credentials in the client code?

[onistripathi]

would our access key ID and secret key be private only to us? What are some security configurations I can add when creating my bucket? Is there also a way to allow users to redownload the file, if they input a name of a file that exist?

[NathanBudd]

Thanks for this!

Does this not expose your credentials to the front end?

[duyanho]

Cool. I have a question. Is it work if I have multiple image upload? For example: I have 4 <input type=“file”>, is it possible to upload 4 images like that?

[petarkolev]

I always get "error ReferenceError: Buffer is not defined"... I am using the code in a react project.
I am getting this error when I am using 3rd party libs for this as well.

[potatomage]

Hey ! I got the same code as you and I'm getting a POST Bad Request doing the multipart upload, any idea what the problem can be ?

[tenzinnyidol]

Hi there,
I have implemented the same function. but i am getting CORS error and invalid request as well. Do happen to have any idea regarding this error?

[pradeepthite]

Getting error as "No value provided for input HTTP label: Key"

[harinathreddya]

Hi, Thank you very much for a clear video .

I want upload the files to a specific folder in the s3, can you help me out?

Please!!!