[FIXED] How to convert image "blob:http://localhost...." to File in ReactJS?

Issue

I'm using react-easy-crop (https://github.com/ricardo-ch/react-easy-crop) to crop the image and post cropped images to API After cropping the image, I have an image like this

blob:http://localhost:3000/f9cd925a-89ec-4eb7-a170-2274e5ea1958

My API to post an image with File type, so I try to convert to File like this

const blobToFile = new File([croppedImage], 'imageCrop.jpg', {
        lastModified: new Date().getTime(),
        type: croppedImage.type,
      })

blobToFile that I received

File {name: "imageCrop.jpg", lastModified: 1619259461151, lastModifiedDate: Sat Apr 24 2021 17:17:41 GMT+0700 (Giờ Đông Dương), webkitRelativePath: "", size: 63, …}

But blobToFile that I received can't POST to my API

Solution

I found a solution for my problem in this Convert Blob URL to file object with axios

const file = await fetch(blobUrl).then(r => r.blob()).then(blobFile => new File([blobFile], fileName, { type: blobFile.type }))

Answered By - LongLong
Answer Checked By - - Katrina (ReactFix Volunteer)