Save to local storage does not work with local media (eg blobs).

[pietrop]

Reason is that local storage save at the moment uses the url of file as the key, and for local media the blob has different url all the time.

needs some research into alternatives eg change key to file name and not url? (for all or for blob url only?)

[pietrop]

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.

[pietrop]

fixed in this PR #72