2

I use a React component that converts an image to a blob URL. The URL looks like this: "blob:http://localhost:3000/78db8897-645d-4323-8865-8deaa9716a96". Appending it to a works, it shows the image. But I want to be able to upload this string to the server as the file. I have a function I found here on SO but it doesn't work.

export function blobToFile(blobUrl, fileName) {
  const blob = new Blob([blobUrl], {
    lastModifiedDate: Date.now(),
    type: "image/png",
  });

  const file = new File([blob], fileName + ".png", {
    type: "image/png",
    lastModified: Date.now(),
  });
  return file;
}
Sanket Shah
  • 2,888
  • 1
  • 11
  • 22
user14850280
  • 389
  • 3
  • 16
  • do you see any errors in the debugging console? – sagar1025 Jan 09 '21 at 17:43
  • no i dont see any errors. the file gets uploaded, but when i open it with my operating system, it doesnt open. so the conversion is wrong – user14850280 Jan 09 '21 at 17:47
  • is this supposed to work? i think the problem is with the blobUrl to Blob function – user14850280 Jan 09 '21 at 18:15
  • Have you googled yet? I searched and found two good posts [here](https://stackoverflow.com/questions/27251953/how-to-create-file-object-from-blob) and [here](https://stackoverflow.com/questions/27553617/convert-blob-to-file) that might help you. Otherwise, more information would be useful: Which browser do you use? Which version? – flaxel Jan 09 '21 at 18:19
  • i figured it out. i found an answer on a chinese website lol – user14850280 Jan 10 '21 at 16:20
  • can you share your answer – gwalshington Jul 27 '21 at 15:43

0 Answers0