3

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>
  );
};
Lucas Andrade
  • 4,315
  • 5
  • 29
  • 50

0 Answers0