2

I am converting a blob image to a File object, uploading to local storage and retrieving it, but when i retrieve it the file object isn't in the format i expect.

I am converting a blob image to a file object like so:

async function convertBlobUrlToFile(image, filename, fileType) {
  const response = await fetch(image);
  const blobData = await response.blob();
  const uploadFileImage = new File([blobData], filename, { type: fileType });
  return uploadFileImage;
}

and uploading it to local storage like so:

convertBlobUrlToFile(croppedImage, imageFileName, fileType).then((blobObject) => {
        localStorage.setItem('croppedImage', blobObject);
 }).catch((error) => {
        console.error(error)
})

which looks like a normal file object, an example is


File {name: 'ProfilePic.jpg', lastModified: 1679604282406, lastModifiedDate: Thu Mar 23 
      2023 20:44:42 GMT+0000 (Greenwich Mean Time), webkitRelativePath: '', size: 600329, …}

however when i retrieve it, it just says [object File]

I try to use JSON.parse to see if anything changes but i don't have much luck.

Can someone help me in trying to store the File object into local storage correctly please so when i do localStorage.getItem() it is an actual File object like the example above.

Thank you for anyone helping :)

Joshua
  • 1,005
  • 1
  • 11
  • 16
  • Try using indexeddb. – Spectric Mar 23 '23 at 21:00
  • Does this answer your question? https://stackoverflow.com/questions/19119040/how-do-i-save-and-restore-a-file-object-in-local-storage – Joshua Mar 24 '23 at 02:05
  • Thanks everyone. That link did help. The answer was the convert to base64, store in local storage then convert to file object to read it or pass it somewhere else – Joshua Mar 26 '23 at 14:51

0 Answers0