Rotating a picture and uploading it as a file with blueimp-load-image . Image to canvas to blob to file to s3.

image.js

import React, { useState } from 'react'
import uuid from 'uuid/v4'
import loadImage from 'blueimp-load-image'

const handleChange = event => { // on file input change
  let _file = event.target.files[0]
  if (!_file) return

  let _fileExt = _file.name.split('.').pop()
  let _fileName = uuid() + '.' + _fileExt

  loadImage(_file, canvas => {
    canvas.toBlob(blob => {
      let _fileUrl = URL.createObjectURL(blob)
      setFileUrl(_fileUrl) // React specific: set state for file preview.
      let file = new File([blob], _fileName)

      // upload the file with whatever lin you need
      // I used S3 so I used the file var as the paylod:
      
      uploadFileData({
        file: file,
        fileName: _fileName,
        fileUrl: _fileUrl
      })
    }, 'image/jpeg', 1)

  },{
    orientation: true, // this rotates the file
    maxWidth: 600
  })
}