Ejemplo de subida de una imagen a través de una url pre firmada por el backend usando reactjs

upload_pre_signed_single_image.jsx

import React, {useState, useEffect} from 'react';
import axios from 'axios';

export default function imagesUpload() {
  const [file, setFile] = useState();
  const [awsUrl, setAwsUrl] = useState(null);

  useEffect(() => {
    axios.get('http://localhost:3001/presignedUrl')
      .then(r => setAwsUrl(r.data))
      .catch(err => console.log(err));
  }, []);

  useEffect(() => {
    if (file) {
      const formData = new FormData();
      formData.append('file', file);

      fetch(awsUrl.full, {
        method: 'PUT',
        body: file
      })
        .then(
          response => console.log(response) // if the response is a JSON object
        ).then(
          success => console.log(success) // Handle the success response object
        ).catch(
          error => console.log(error) // Handle the error response object
        );
    }
  }, [file]);

  return (
    <div>
      <input type="file"
            onChange={e => setFile(e.target.files[0])}
            id="file-upload" name="avatar"
            accept="image/png, image/jpeg, image/gif" />

    </div>
  );
}