From Gluejar to Upload - How?

[terriann]

This is more of a support question than an issue but I'm not sure where else to ask this...

I got Gluejar hooked up in my React app and it works great...but I'm struggling to understand the next steps in how I can take the content that's previewed in the Gluejar and pass that blob (or data inferred from that blob protocol URI) to a backend call which will save the image to disk.

When I try to fetch() on the blob:http://localhost:3000/3bc9d131-ffb3-44d1-a035-e3d27d612425 I get a 404. A workday of Googling hasn't made it any more clear how to reverse the blob protocol URI created by createObjectURL() into content I can submit.

Because that's the only data point Gluejar is passing in the callback I assume there must be a way to make use of that URI to accomplish this. Otherwise, I'd have expected the library to pass both the URI and the data from the clipboardEvent.

Any direction would be greatly appreciated.

[dopeboy]

Hi @terriann - the following worked for me:

<Gluejar onPaste={async (files) => {
  let file = await fetch(files.images[0]).then(r => r.blob()).then(blobFile => new File([blobFile], "foo.png"))
 ...
 const response = await fetch(url_you_want_to_upload_to, {
    method: 'PUT',                  
    body: file,                     
 });
 ...