CODEWITHSUNDEEP
javascriptjqueryfilefilereader
sko
sko

Reputation: 491

Filereader - upload same file again not working

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?

Upvotes: 44

Views: 51988

Answers (6)

Avraham Weinstein
Avraham Weinstein

Reputation: 894

In Typescript, Once you get your Event, You can solve it like this:

onInputChange(event: Event){
  (event.target as HTMLInputElement).value = '';
}

Upvotes: 1

Zukhriddin Ruziev
Zukhriddin Ruziev

Reputation: 21

In Mozilla, everything was OK. But in Chrome, I faced the same problem:
reader.onload was not uploading the same file a second time on the change event.
I was using pure javascript, and here is my solution!

HTML:

<input type="file" accept="image/*" name="image" id="file-input"/>

Javascript:

const fileInput = document.getElementById("file-input");

// My EventListener with change event and my_function
fileInput.addEventListener("change", my_function);

// reader.onload was used in my_function


//################### THIS IS THE SOLUTION ###################
// Add this EventListener to fix the problem with chrome
fileInput.addEventListener("click", function() {
    fileInput.value = "";
});

Upvotes: 0

itsCodingThing
itsCodingThing

Reputation: 451

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 = "";

Upvotes: 45

Reshma
Reshma

Reputation: 79

Try the below code, It should work. While clicking the upload button clear the existing value.

$("#menu-open-file").click(function(e){ 
  $('#menu-open-file').val(''); 
}

Upvotes: 7

Harry Stevens
Harry Stevens

Reputation: 1423

The only problem with the above answer is that your HTML will no longer display the file name after the upload. Instead, it will continue to say "No file chosen", which might be confusing for users.

To get around this, you can hide the input and replace it with a label that replicates the display of the input, like so:

HTML:

<input type="file" id="myFileInput" />
<label id="myFileLabel" for="myFileInput">Choose file</label><span id="myFileName">No file chosen</span>

CSS:

#myFileInput {
    display: none;
}
#myFileLabel {
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;        
    padding-left: 6px;
    padding-right: 6px;
}
#myFileName {
    margin-left: 5px;
}

JavaScript:

var file = null
file = e.target.files[0];

//variable to get the name of the uploaded file
var fileName = file.name;
//replace "No file chosen" with the new file name
$('#myFileName').html(fileName);

well explained article how to do this here: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

Upvotes: 2

OldGreg
OldGreg

Reputation: 861

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 = '';
  }
});

Upvotes: 86

Related Questions