Question 245723 in Html Question posted in
Some basic documentation can be found here.

Html – "net::ERR_UPLOAD_FILE_CHANGED" even after re-creating the input element

I am trying to allow a user to reupload the file in case there were errors inside it (a text file).

So I want to allow him to change the contents of the file then reupload without having to refresh the browser.

I know that whenever the file changes and a reupload is attempted, Chrome will throw an error saying that the file was changed.
But I completely create a new input element with new Form Data and still I get that error. Why?

This is the code:

<div id="input_file_container">
  <input type="file" id="file" />
</div>

<script>
function uploadFile() {
  let formData = new FormData(); // new form data every time
  file = document.getElemenetById("file").files[0];
  formData.append("file", file);

  fetch("/upload", {
      method: "POST",
      body: formData
    })
    .then(response => {
      // do something with response
    })
    .catch(function(error) {
      console.log(error);
    })
    .finally(function() {
      // always destroy and create a new input element
      resetFileInput();
    })
}

function resetFileInput() {
  document.getElemenetById("file").remove();
  let newInput = document.createElement("input");
  input.type = "file";
  input.id = "file";
  document.getElementById("input_file_container").append(input);
}
</script>
Tags:

2

Answers


  1. 0

    you can reset the file and re-upload it into the form via js when submitting. this should solve the problem

    Login or Signup to reply.
  2. 0

    There are a few things going on here. Firstly, getElementById is misspelled and that wont work (case for that function is a common typo resulting in an undefined error). The bigger problem is setting and trying to append an undefined object.

    When resetFileInput is called, it removes the element with id ‘file’ (this should work if the function name was correct, getElementById) and then it creates a new element, newInput. However, then an unidentified object input is set with id and type of ‘file’. The file input element is gone at this point and nothing replaces it.

    Unless strict is off, the resetFileInput function should be getting the following error: "Uncaught ReferenceError: input is not defined"

    Here is an example:

      let newInput = document.createElement("input");
  input.type = "file";
  input.id = "file";
  document.getElementById("input_file_container").append(input);

    After declaring newInput update it with the id and type of ‘file’ and then append it. The following updated code will work

    function uploadFile() {
  let formData = new FormData(); // new form data every time
  file = document.getElementById("file").files[0];
  formData.append("file", file);

  fetch("/upload", {
      method: "POST",
      body: formData
    })
    .then(response => {
      // do something with response
    })
    .catch(function(error) {
      console.log(error);
    })
    .finally(function() {
      // always destroy and create a new input element
      resetFileInput();
    })
}

function resetFileInput() {
  document.getElementById("file").remove();
  let newInput = document.createElement("input");
  newInput.type = "file";
  newInput.id = "file";
  document.getElementById("input_file_container").append(newInput);
}
    <div id="input_file_container">
  <input type="file" id="file" />
</div>
<input type="submit" onclick="uploadFile();"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search