I have a React TS project, and I'm trying to upload files from react-dropzone to my S3 bucket. The problem is: after I load they locally with dropzone, if I console.log() my files I can see all the params:
File
lastModified: 1591991266469
name: "4h_audio_study.xml"
path: "4h_audio_study.xml"
size: 16747
type: "text/xml"
webkitRelativePath: ""
But if print my files on screen I get only the path:
{"path":"4h_audio_study.xml"}
Because of this "error" when I send my file to S3 I get an error because I'm actually only sending a object with the path.
So why this happens? Why I can only see the path when I print my file info?
My component to upload:
export const UploadFilesButton = () => {
const [files, setFiles] = useState<any>([]);
const uploadToS3 = async () => {
const { name = '' } = files[0];
// get the presigned url
const { data: { url: signedRequest } } = await axios.get(`${API_URL}?path=${file.name}`);
axios.put(signedRequest, files[0], { headers: {'Content-Type': files[0].type }})
.then(result => {
console.log("Response from s3")
console.log(result)
})
.catch(error => {
alert("ERROR " + JSON.stringify(error));
})
}
return (
<div>
<Dropzone
onDrop={(acceptedFiles) => setFiles(acceptedFiles)}
multiple
onDropRejected={() => console.log('File was rejected')}
onDropAccepted={() => console.log('File was accepted')}>
{({getRootProps, getInputProps}) => (
<DropArea {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</DropArea>
)}
</Dropzone>
<FilesList>
{files.map((file: any) => (
<div key={file.path}>
{JSON.stringify(file)}
</div>
))}
</FilesList>
<button onClick={() => uploadToS3()}>Upload Files</button>
</div>
);
};