Filereader - upload same file again not working

Question

I have sth like drawing app. User can save projects and then load them. When I load first time one file (for e.g. project1.leds) make some changes in the app but no saving it and then again load same file (project1.leds) nothing happen. I cant load same file more than once. If I load another file, it's working.

Code:

$("#menu-open-file").change(function(e){     var data=[];      var file = null;     file = e.target.files[0];     console.log(file)     var reader = new FileReader();         reader.onload = function(e){             data=JSON.parse(reader.result);             x=data[0].SIZE[0];             y=data[0].SIZE[1];             if(x==15) x=16;             if(x==30) x=32;             if(x==60) x=64;             if(y==15) y=16;             if(y==30) y=32;             if(y==60) y=64;             createLeds(x,y,data,false,false);             clearActiveTools();             var svg = $('#contener').find('svg')[0];                 svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20);             $("#contener").css("width",x*20).css("height",y*20);             $("#contener").resizable({                 aspectRatio: x/y,                 minHeight: 200,                 minWidth: 200,             });             wiFirst = $("#contener").width();             hiFirst = $("#contener").height();         }         reader.readAsText(file); }); 

Can i delete/remove cached file? Is it even cached in browser?

Answer 1

It is because you're calling the function onchange. If you upload the same file the value of the file input has not changed from the previous upload and therefore isn't triggered. This also explains why it works if you upload a different file. No need to clear cache, you can work around this by resetting the input field's value after you read the file.

$("#menu-open-file").change(function(e){     var data=[];      var file = null;     file = e.target.files[0];     if(file !== ''){       console.log(file)       var reader = new FileReader();       reader.onload = function(e){             data=JSON.parse(reader.result);             x=data[0].SIZE[0];             y=data[0].SIZE[1];             if(x==15) x=16;             if(x==30) x=32;             if(x==60) x=64;             if(y==15) y=16;             if(y==30) y=32;             if(y==60) y=64;             createLeds(x,y,data,false,false);             clearActiveTools();             var svg = $('#contener').find('svg')[0];                 svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20);             $("#contener").css("width",x*20).css("height",y*20);             $("#contener").resizable({                 aspectRatio: x/y,                 minHeight: 200,                 minWidth: 200,             });             wiFirst = $("#contener").width();             hiFirst = $("#contener").height();         }         reader.readAsText(file);         $("#menu-open-file")[0].value = '';   } }); 

Answer 2

because input is caching the same file value so when you load the same file again it uses the cache to read value property. all you need to do is set a conditional statement when you use input element and set the value property of input to an empty string and it should work

input.value = ""; 

and if you are using an event handler then

e.target.value = "";