0

I have a blob image URL in my localhost (looks like "blob:http://localhost/1d795687-b478-4edf-9b3d-8dda768b9d9f") and I want to pick up this file and upload it to PHP using JavaScript.

Network section that shows the blob image

I just want to know how to get this image as a file.

Roman
  • 2,530
  • 2
  • 27
  • 50
Vinícius
  • 13
  • 5
  • Use the original blob that you used to create the url, otherwise you would have to use a workaround like `fetch()`-ing the url and get the blob, see https://stackoverflow.com/questions/11876175/how-to-get-a-file-or-blob-from-an-object-url – Patrick Evans Sep 08 '21 at 19:06
  • 'fetch()' worked as well. I got my URL blob, passed to fetch(), it gave me a blob object, then I did a new file object with the blob and uploaded it to PHP. Thank You! – Vinícius Sep 09 '21 at 12:55
  • Note you dont need to create a new file object you can just send the blob, `File` is just a special type of `Blob` – Patrick Evans Sep 09 '21 at 14:23
  • I just checked it out and it really works with just a blob! – Vinícius Sep 09 '21 at 14:40

2 Answers2

0

You should sent the file as formData. Then you save it directly as a blob in your server. You can use code like

let formData = new FormData();
formData.append(key, blobImage);
Make backend api call with formdata
ajit
  • 56
  • 6
0

I used let blob = await fetch(url).then(r => r.blob()) and it gave me a blob object with my image stored in local blob URL.

Code:

let blob = await fetch(url).then(r => r.blob());
var data = new FormData();
data.append('image', blob, 'image.jpg');

Then, just send data to PHP.

Vinícius
  • 13
  • 5