I am trying to upload file directly to S3 bucket using presigned url.
Below is the server end code written in node.js, and it creates signed url successfully.
const s3 = new AWS.S3({
accessKeyId: config.accessKeyId,
secretAccessKey: config.secretAccessKey,
region: config.awsConfig.region
});
const signedUrlExpireSeconds = 60 * 60;
let mimeType = "video/mp4";
const filename =Date.now();
const Key = `${filename}.mp4`;
const params = {
Bucket: config.awsConfig.aws_upload_bucket,
Key: Key,
Expires: signedUrlExpireSeconds,
ACL: 'public-read',
ContentType: mimeType
};
s3.getSignedUrl('putObject', params, function (err, url) {
if (err) {
console.log('Error getting presigned url from AWS S3');
res.json({ success: false, message: 'Pre-Signed URL error', urls: fileurls });
}
else {
console.log('Presigned URL: ', url);
res.json({ success: true, message: 'AWS SDK S3 Pre-signed urls generated successfully.', url: url, Key:Key, ContentType: mimeType });
}
});
Below is the code written at React end.
const DropzoneArea = props => {
const [files, setFiles] = useState([]);
let awsFile = '';
const onUploadHandler = files => {
if (files.length === 0) {
console.log('Debug : [components DropzoneArea onUploadHandler] files => ', files);
return;
}
awsFile = files[0]
// calling the API to get presigned url.
getPreSignedURL(files[0].type,S3preSignedURLCallback)
};
const S3preSignedURLCallback = videoData => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', videoData.url);
xhr.setRequestHeader('Content-Type', videoData.ContentType);
var res = new FormData();
res.append('file', awsFile);
xhr.send(res);
};
}
using above code the File upload to s3 successfully but the video couldn't play. So I compared files on S3 with the actual file the I uploaded. I found that few extra request data also written in S3 file.
A minor mistake I am doing here, can't locate the bug. Please help.
Don't use formData
, just send the file directly.
const S3preSignedURLCallback = videoData => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', videoData.url);
xhr.setRequestHeader('Content-Type', videoData.ContentType);
// Send the binary data.
// Since a File is a Blob, you can send it directly.
xmlHttpRequest.send(awsFile);
};
The difference you see, is because AWS is saving the raw request, without parsing it, and you can see that the right image is a multipart/form-data request.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.