Webkitblobresource ошибка 1 что это сафари

Update TLDR;

Blobs in indexeddb are unreliable in iOS Webkit. So instead save your blobs as array buffer and the type of the blob as a string in the indexeddb. You can get the ArrayBuffer and the type of a blob-like this:

await blob.arrayBuffer()
blob.type

When you want to retrieve the data from the indexeddb and display it just create a new blob from the ArrayBuffer and type:

const blob = new Blob([value.buffer], { type: value.type });
URL.createObjectURL(blob);

Investigation

I have a very similar issue on iOS WebKit / safari: I also store images and video blobs received from the server in the indexeddb. The blobs are then retrieved and converted to an URL with createObjectUrl(). This works perfectly on all browser engines except WebKit / safari. iOS WebKit / safari only works the first couple of times. I have not found a perfect solution but I can share my findings so far:

Generally, all comments to similar issues are saying «blobs on WebKit are unreliable».

There are some possible workarounds: https://stackoverflow.com/a/60075517/13517617 I still have to try this one though.

Also what we may can do is use the fileReader to create a base64 String and use this as src. instead of createObjectUrl(). This can be achieved like this:

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result
};

This is not an ideal solution as we now have some callbacks.

There are some hints pointing to that the mime type of the blobs have to be specified correctly to make it work in iOS WebKit / safari all the time.

I will dig deeper and share my final answer here. Maybe some else is faster or has encountered this issue before.

Update TLDR;

Blobs in indexeddb are unreliable in iOS Webkit. So instead save your blobs as array buffer and the type of the blob as a string in the indexeddb. You can get the ArrayBuffer and the type of a blob-like this:

await blob.arrayBuffer()
blob.type

When you want to retrieve the data from the indexeddb and display it just create a new blob from the ArrayBuffer and type:

const blob = new Blob([value.buffer], { type: value.type });
URL.createObjectURL(blob);

Investigation

I have a very similar issue on iOS WebKit / safari: I also store images and video blobs received from the server in the indexeddb. The blobs are then retrieved and converted to an URL with createObjectUrl(). This works perfectly on all browser engines except WebKit / safari. iOS WebKit / safari only works the first couple of times. I have not found a perfect solution but I can share my findings so far:

Generally, all comments to similar issues are saying «blobs on WebKit are unreliable».

There are some possible workarounds: https://stackoverflow.com/a/60075517/13517617 I still have to try this one though.

Also what we may can do is use the fileReader to create a base64 String and use this as src. instead of createObjectUrl(). This can be achieved like this:

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result
};

This is not an ideal solution as we now have some callbacks.

There are some hints pointing to that the mime type of the blobs have to be specified correctly to make it work in iOS WebKit / safari all the time.

I will dig deeper and share my final answer here. Maybe some else is faster or has encountered this issue before.

I’m trying to read a rather big file in chunks using FileReader (File selected from a field). Works fine on Android, Chrome, Firefox etc., but somehow on iOS Safari the FileReader stops reading the chunks exactly after 60 seconds. The error I am seeing is WebkitBlobResource error 1. Makes me wonder if this is some kind of permission error or somehow iOS Safari revokes the File blob.

Sample code:

let file = <input type="file">

let chunkSizeToUse = (1024 * 1024) // 1 MB chunks
let offset = (0 - chunkSizeToUse)

let readInterval = setInterval(() => {
    if(offset < file.size){
        offset += chunkSizeToUse

        let fileReader = new FileReader()

        fileReader.onload = () => {
            let arrayBuffer = fileReader.result

            //further chunk processing
        }

        fileReader.onerror = (err) => {
            console.log(err) // WebkitBlobResource error 1 exactly after 60 seconds of processing
        }

        fileReader.readAsArrayBuffer(file.slice(offset, (offset + chunkSizeToUse)))
    }
    else{
        clearInterval(readInterval)
    }
}, 100)

For easier and direct debugging on an iOS device using Safari I’m gonna link this JSFiddle:

https://jsfiddle.net/L17uymvp

Just select a file and wait for the counter do go to zero.

All of this makes it impossible for some users to upload large files. Our webapp processes each chunk individually (encryption), so we have to work with chunks.