Save to local storage does not work with local media (eg blobs). about react-transcript-editor HOT 2 CLOSED

Some notes of what I got so far.

TL;DR: still no viable solution.

In the demo app once the local media is uploaded we create an object url and pass that to the component.

const fileURL = URL.createObjectURL(file);

So I was looking to see if we could use the file name(as this would not change 🤞and should allow us to retrieve the corresponding transcript from local storage on page refresh) instead of the blob url, without having to pass it to the component.

after a bit of exploration I had figured out that you can convert an object url back into a blob

var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open("GET",  window.fileURL);  // `window.fileURL` is the url to convert
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function() 
{
    blob = xhr.response;//xhr.response is now a blob object
}
xhr.send();

However the problem is that a blob by its nature only has two attributes, size and type

{size: 85047555, type: "video/mp4"}

as explained here on stackoverflow you could then convert this into a file

var file = new File([blob], "name");

But it doesn't seem possible to get the original file name of an object url even after converting it to a blob as it is not stored in the blob.

from react-transcript-editor.

fixed in this PR #72

from react-transcript-editor.