如何从 React 前端将文件上传到 AWS S3 存储桶

Question

Hello I am trying to upload images from my react frontend but its unable to read the file in axios and the images are not being uploaded.

This is my code.

 <form onSubmit={Upload}>
        <input
          type='file'
          onChange={(e) => {
            generate(e.target.files);
          }}
        />
        <button type='submit'>Submit</button>
      </form>

const generate = async (data) => {
    const payload = {
      entity: 'test',
      userId: '200',
      documentFileName: data[0].name,
      action: 'putObject',
    };
    console.log('DAATA', data[0].name);
    await api
      .generatePreSignedUrl(payload, token)
      .then((res) => {
        setUploadUrl(res.data.data);
        setImageData(data);
      })
      .catch((err) => {
        console.log('Error', err);
      });
  };



 const Upload = async (e) => {
    e.preventDefault();
    console.log('IMAGEdata', imageData);
    console.log('URL', uploadUrl);
    let file = imageData[0];
    console.log('THIS IS FILE', file);
    console.log('FILENAME', file.name);
    console.log('FIELETYPE', file.type);
    var options = {
      headers: {
        'Content-Type': file.type,
      },
    };
    await axios
      .put(uploadUrl, file, options)
      .then((res) => {
        console.log('Response from s3');
        console.log(res);
      })
      .catch((error) => {
        alert('ERROR ' + JSON.stringify(error));
      });
  };

Here imageUrl is the signed URL that I get from was to upload my files. I am successfully able to call the put request to upload the file but the image or file is not being read and uploaded.

This is the response when I am trying to look at the uploaded file.

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>documents/ama/test/200/displaypicture.png</Key>
<RequestId>R7M63AHQKDNC6NH5</RequestId>
<HostId>3u8Jb8Ev4S1s/ODicL3Py4hvrvwKKOs/5zGxUEDYORfN1+U37Zx8PfYvIcGWUIAfeCqHpWqXd8o=</HostId>
</Error>

Answer 1

Look at the AWS SDK for JavaScript Developer Guide Version 3. There are examples that show how to upload photos to an Amazon S3 bucket.

Uploading photos to Amazon S3 from a browser

Answer 2

A pretty simple way to use this node module to achieve this: https://www.npmjs.com/package/react-aws-s3 https://medium.com/@steven_creates/uploading-files-to-s3-using-react-js-hooks-react-aws-s3-c4c0684f38b3 enter image description here

npm install --save react-aws-s3

Answer 3

User " aws-sdk " and use this code

import React ,{useState} from 'react';
import AWS from 'aws-sdk'

const S3_BUCKET ='YOUR_BUCKET_NAME_HERE';
const REGION ='YOUR_DESIRED_REGION_HERE';


AWS.config.update({
    accessKeyId: 'YOUR_ACCESS_KEY_HERE',
    secretAccessKey: 'YOUR_SECRET_ACCESS_KEY_HERE'
})

const myBucket = new AWS.S3({
    params: { Bucket: S3_BUCKET},
    region: REGION,
})

const UploadImageToS3WithNativeSdk = () => {

    const [progress , setProgress] = useState(0);
    const [selectedFile, setSelectedFile] = useState(null);

    const handleFileInput = (e) => {
        setSelectedFile(e.target.files[0]);
    }

    const uploadFile = (file) => {

        const params = {
            ACL: 'public-read',
            Body: file,
            Bucket: S3_BUCKET,
            Key: file.name
        };

        myBucket.putObject(params)
            .on('httpUploadProgress', (evt) => {
                setProgress(Math.round((evt.loaded / evt.total) * 100))
            })
            .send((err) => {
                if (err) console.log(err)
            })
    }


    return <div>
        <div>Native SDK File Upload Progress is {progress}%</div>
        <input type="file" onChange={handleFileInput}/>
        <button onClick={() => uploadFile(selectedFile)}> Upload to S3</button>
    </div>
}

export default UploadImageToS3WithNativeSdk;