Can't Read The Same File From An Input Tag Twice Using GetElemenById + FileReader API

Currently, I'm developing a WebService which user selects a file and we're doing some pre-processing on user's browser later we will send the file to the server.

When a user selects a file from file manager(<input type=file id="dropzone"/>) an event will fire and will load the selected file using FileReaderAPI, when the process is done(it's guaranteed that this section will execute after the first process finished) when I want to read the file again later in the service using document.getElementById("dropzone") it returns the null.

here is the code for the input component, in this case, I'm using react-dropzone.js:(since I'm accessing input element by getElementById it makes no difference which library is used)

const{
    acceptedFiles
  } = useDropzone({
    accept: "video/*, .mkv",
    onDrop: files => props.handle()
  });

return(<div> <input {...getInputProps()} id="dropzone"/> </div>) ; 

props.handle(files) refer to the function which will be doing the file processing

following is a part of handle() function which deals with the selected file and will fire when a user selects a file.

    var upFile = document.getElementById("dropzone");
    var file = upFile.files[0];

 //Original function iterate over all slices
      var r = new FileReader();
      var blob = file.slice(offset, length + offset);
      r.onload = processChunk;
      r.readAsArrayBuffer(blob);

Later when I want to access the file again using document.getElementById("dropzone") it returns null

Any Idea for solving this?

After many trials and errors, I found out this is caused by one of the browser's 3rd party security extensions.

Make sure to disable these kinds of extensions in the developing stage.