Can I find out if a to-be-uploaded file was deleted before submitting?

Question

Is there a browser compatible (in my case >IE9, Firefox and Chrome) way to catch the edge case that a file, that was supposed to be uploaded in a HTML form, was renamed or deleted on user's PC and hence could not be submitted?

I want to show an error to the user in that case after the impossible submit.

A workaround would be to check whether [the file size](http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation) is greater than 0 bytes... — Manuel Allenspach, Jul 24 '14 at 18:53
How is it unclear what’s being asked here? This question makes perfect sense, no? — polarblau, Jul 24 '14 at 20:41

score 2 · Answer 1 · answered Jul 24 '14 at 23:45

If you select a file in IE and delete it afterwards in the file system, Windows will only hide the file, it is not deleted and the content can be read. So you don't have to worry about IE.
Chrome adjusts the file size (input.files[0].size) to 0 when you delete a file. Sadly, Firefox does not do this.

A workaround, which uses the FileReader API (works in IE 10+, Chrome, Firefox):

<input type="file" id="fileInput" />
<input type="button" onClick="checkDeleted();" value="Check"/>

<script>
    function checkDeleted() {
        input = document.getElementById('fileInput');
        if (input.files.length > 0) {
            var file = input.files[0];
            var fr = new FileReader();
            fr.onload = function (e) {
                alert("File is readable");
            };
            fr.onerror = function (e) {
                if (e.target.error.name == "NotFoundError") {
                    alert("File deleted");
                }
            }
            fr.readAsText(file);
        } else {
            // no file choosen yet
        }
    }
</script>

Working fiddle here.

This don't work for IE any solution for IE. Even fr.readAsText(file); works async. Any method which will check it in sync — Hemant Malpote, Feb 01 '18 at 08:54

score 2 · Answer 2 · answered Sep 04 '20 at 11:20

Base on @CommonGuy's answer, I tried it out and have tuned an optimized version.(tested with latest Chrome and Firefox.)

Note: To predict if a file CAN be read and tranferred. no matter file deleted, modified or permission changed, which may result in upload error, so we try to read the last byte(considerations for performance and firefox compatibility).

function tryReadingFile(file) {
  return new Promise((resolve, reject)=> {
    if (!(file instanceof File)) {
      reject(new Error('Not a File'));
      return;
    }
    let r = new FileReader();
    r.onload = (e)=> {
      resolve();
    };
    r.onerror = (e)=> {
      reject(r.error);
    };
    r.readAsArrayBuffer(file.size > 0 ? file.slice(-1) : file);
  });
}

function $(s, c) {
  return (c ? c : document).querySelector(s);
}
let currentFile;
function setSelectedFile(file) {
  currentFile = file;
  $('#output').innerHTML = file ? 'pending' : '';
}
function handleTestClick() {
  if (!currentFile) {
    return;
  }
  tryReadingFile(currentFile).then((ok)=> {
    $('#output').value = 'OK';
  }, (e)=> {
    $('#output').value = e.toString();
  });
}

<div>
  Step 1: select a file<br/>
  <input type="file" id="input" onchange="setSelectedFile(event.target.files[0])"/><br/>
</div>
<br/>
<div>
  Step 2: delete the file<br/>
  goto your file manager, and rename / delete / modify the file<br/>
</div>
<br/>
<div>
  Step 3: Test if the selected file can be read (and is ready to upload)<br/>
  <button type="button" onclick="handleTestClick()">Test</button><br/>
  <output id="output"></output>
  <div style="height:100px;"></div>
</div>

Can I find out if a to-be-uploaded file was deleted before submitting?

2 Answers2