WebKitFormBoundary uploading a file to S3 using axios FormData - axios

Question

I am trying to upload files to S3, files are successfully uploaded and but when downloaded it contains WebKitFormBoundary
------WebKitFormBoundaryrTBzWaHQntWAtZLX
Content-Disposition: form-data; name="file"
hello world
------WebKitFormBoundaryrTBzWaHQntWAtZLX--
Upload using axios
const formData = new FormData();
formData.append('file', this.file);
this.axios.put(this.formUrl,
formData,
{
headers: {
// 'Content-Type': `multipart/form-data`,
'Content-Type' : 'application/octet-stream',
},
})
.then((res) => {
console.log(res)
}).catch((e) => {
console.error(e)
});
How do I remove boundary

Answer 1

I faced the same issue. But the solution is simple. Here is my code I used to upload the file
axios({
method: "PUT",
url: url,
data: fileToUpload, // NOTE - this is the file not the FormData Object
headers: {
"Content-Type": "multipart/form-data" }
})
.then(res => {
this.setState({
uploadSuccess: "File upload successfull",
error: undefined
});
})
.catch(err => {
console.log(err)
});
What really happens is when you attach the file to FormData the FormData get serialized and that serialized data is stored in S3. That's why the file become corrupted.
In the solution we don't wrap the file inside a FormData object. What we do is we directly add the file to data attribute. So nothing other than the file itself get serialized and stored in S3.
Hope this answer would help