HTML file input - lock the file once selected

Question

Is there any way for the browser to "lock" the file after being selected by the <input type="file" />? Right now I can select a file, start some operations on it with JavaScript and in the meantime I can delete it from my disk, which results in errors in JavaScript code.

EDIT The goal is to make sure the file cannot be deleted while I am working on it with JavaScript.

Answer 1

No there is no way. Simply because JS is a client side language, even with server side this wouldn't be possible because you can't interact with users computer. For this to happened you would need your desktop app that would take the file for example copy it and lock it.

If this was to be implemented, this would have to be implemented in the browser.

Edit addition:

If you think about it why this isn't implemented in browsers already, maybe because what if you go offline while uploading what will happen to the file? Stay locked?

Answer 2

Yes : You can create a copy in memory, and use this instead of the file on user's disk.
You will have to read its content first and to create a new File/Blob from there :

let theFile = null;
inp.onchange = async function(e) {
  theFile = await saveBlob(inp.files[0]);
  btn.disabled = false;
  inp.disabled = true;
}
btn.onclick = e => {
  console.log(theFile);
  let reader = new FileReader();
  // to prove it's really still there
  reader.onload = e => console.log(new Uint8Array(reader.result));
  reader.onerror = e => console.log(e);
  reader.readAsArrayBuffer(theFile.slice(0, 4));
}

function saveBlob(blob) {
  let reader = new FileReader();
  return new Promise((res, rej) => {
  reader.onload = e => {
    if (blob instanceof File) { 
    // tries to keep it as a File, but beware some implementations still have bugs
      res( new File([reader.result], blob.name, {type: blob.type}) );
    } else {
      res( new Blob([reader.result], {type: blob.type}) );
    }
  };
  reader.onerror = rej; // already removed ???
  reader.readAsArrayBuffer(blob);
  });
}

<input type="file" id="inp">
<button id="btn" disabled>I did remove it from disk</button>

An alternative way would be to store it in indexedDB.

Then, you can work with this copy and be sure that it will stay in memory, whatever the user does with the original file.

If you need to keep it for longer than the document's life, you can create a blobURI (URL.createObjectURL(theFile)) that you'll be able to store in localStorage and retrieve in reload or redirection with fetch(blobURI).then(r=>r.blob());.
And if you need it to survive for even longer (an hard refresh will kill the reference of the blobURI), then use indexedDB.

---

Edit in response to question's edit.

Obviously you won't be able to change file's permissions on user's disk, but you don't need to do it, since you can get a copy of it to work with.