14

I have an HTML form where there is a pdf file attachment field() at last, I make a post request with all the field form data

when and select to field android file picker opens

  • if I select pdf file from storage - no error - API post successful
  • But if I select a file from my google drive from the android file picker - API post fails - net::err_upload_file_changed.

PS: I have managed to show a message to the user if selected from google drive that please select from storage but I don't want that I want to actually be able to post the file with the attachment

4
  • 1
    I came across the same issue, also initially thought it was google drive related. However, trying the same with Microsoft Edge works fine on Android. Found some info online that it's somehow related to Chrome, but didn't manage to find a solution. How do you catch this error to show "please select from storage"?
    – Pyotr Li
    Commented Aug 6, 2020 at 14:14
  • @PyotrLi you are correct it even works with older version of chrome Commented Aug 6, 2020 at 14:50
  • @PyotrLi To show message slice the file and try to use arrayBuffer() on it eg: file.slice(0,1).arrayBuffer().then(//no problem).catch(//show message) not the cleanest method but it works Commented Aug 6, 2020 at 14:52
  • 4
    For reference here the bug report: bugs.chromium.org/p/chromium/issues/… Commented Aug 10, 2020 at 9:46

3 Answers 3

3
 const buffer = await file.arrayBuffer();
    const clone = new File([buffer],file.name, { type: file.type });
    let FD = new FormData();
    FD.append('uploaded_file', clone);

And use FD wherever required.

2

As explained in comments, it's a bug with Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=1063576).

The following error can also be raised: NotReadableError: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired..

As a workaround, clone your File or Blob before further use:

const buffer = await file.arrayBuffer();
const clone = new File([buffer], file.name, { type: file.type });
2
  • 1
    cloning does not work gives following error ` ["error",{"name":"NotReadableError","message":"The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.","stack":undefined}] ` Commented Jan 21, 2022 at 13:38
  • @BhuvaneshDesai do you have any code to show? Did you use the original buffer or the clone after cloning? Commented Jan 21, 2022 at 15:37
0

Here is the full work-around that worked for me, based on Jean-Baptiste's answer:

async function file_read() {
    let blob = new Blob([await document.getElementById('upload_field').files[0].arrayBuffer()], {
        type: document.getElementById('upload_field').files[0].type
    });

    const buffer = await blob.arrayBuffer();
    clone = new File([buffer], blob.name, { type: blob.type });
    return clone.text();
};

file_read().then(handle_file_text);

I hope it'll be helpful to whomever might run into this 😊

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.