react-dropzone-uploader
react-dropzone-uploader copied to clipboard
How can I upload to AWS S3 using a pre-signed URL?
I'm trying to use the react dropzone uploader to upload files to S3 in my node / React web app, but can't get the signed url to work.
The component requires a POST url, and the aws-sdk doesn't seem to support POST, only PUT. I assume this is why I'm getting a 403 forbidden response from S3.
This code on the server my generates a PUT url:
const getSignedUrl = (key) => s3.getSignedUrl('putObject', {
'Bucket': myBucket,
'Key': key,
'Expires': signedUrlExpireSeconds,
'ContentType': 'image/jpeg',
});
But the uploader sends it as POST.
I've tried this code to generate a POST request:
const getSignedUrl = (key) => {
const params = {
'Bucket': myBucket,
'Fields': {
'key': key,
},
'Expires': signedUrlExpireSeconds,
'Conditions': [
['content-length-range', 0, 10000000], // 10 Mb
{ 'acl': 'public-read' },
],
};
return s3.createPresignedPost(params);
};
This creates a URL which looks like this:
fields: {…}
Policy: "eyJleHBpcmF0aW9uIjoiMjAxOS0xMi0xOFQwOTo0NToxMloiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDAwMDAwMF0seyJhY2wiOiJwdWJsaWMtcmVhZCJ9LHsia2V5IjoidGVzdC9EQThhY1NnTTN3UXRyUmVFSy9saXR0bGUgc2lzdGVyLmpwZyJ9LHsiYnVja2V0IjoidHdpc3RlZC10aHJlYWRzIn0seyJYLUFtei1BbGdvcml0aG0iOiJBV1M0LUhNQUMtU0hBMjU2In0seyJYLUFtei1DcmVkZW50aWFsIjoiQUtJQUpSQlk1TEFVV0ZZTFNRN1EvMjAxOTEyMTgvdXMtZWFzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsiWC1BbXotRGF0ZSI6IjIwMTkxMjE4VDA5NDAxMloifV19"
"X-Amz-Algorithm": "AWS4-HMAC-SHA256"
"X-Amz-Credential": "AKIAJRBY5LAUWFYLSQ7Q/20191218/us-east-1/s3/aws4_request"
"X-Amz-Date": "20191218T094012Z"
"X-Amz-Signature": "0e909d1464ba8d45bd1b1542444da7153338c59f24d7e013f94b430b108e3271"
bucket: "my-bucket"
key: "test/1234/mypicture.jpg"
<prototype>: Object { … }
url: "https://s3.amazonaws.com/my-bucket"
But although when I click Submit there is no error, the file is not uploaded to AWS. When I look in the Network tab, the request is POST but the request URL seems to be to local host: http://127.0.0.1:3000/test/1234/[object%20Object]
So I must be doing something wrong!
Alternatively if I could change the uploader component to use PUT instead of POST that might do it, but I can't find any way to access the dropzone settings to change the method.
I've searched and can't find any complete example showing how to use the uploader component with node server code to generate a presignedUrl that will be compatible with the component. I'd be grateful for any help.
Thank you for contributing! The box-shadow for the buttons is important on click to show that the button was clicked (this is more for user experience). If you think the current box-shadow doesn't look good, then please provide an alternative that can show the user that they indeed clicked the button.
Okay I'll come with an alternative ,meanwhile I am also adding og tags for seo but their is no site logo present here.
Yes, we currently don't have one. There's an issue about it (#2 ) but nobody has contributed yet, unfortunately.
If you're working on og tags then just put the tags in for now and once there's a logo we'll add it in.
@shubhampandeyhld I saw you added the tags for SEO. Will you add something else regarding the box shadow? If not please remove the current changes to the box shadow so I can merge the changes for og tags!
okay..
Hey I have just added the default box-shadow, so now you can merge the og tags.
removed it.
Great! Thank you!
@all-contributors please add @shubhampandeyhld for code and ideas