2

I have this code that lets me select multiple files which i will then upload to server. I use input type='file' then im adding to list of files selected files( for example i can click button, select file 'A", then click same button again and select file "B" and my counter is 2). I also got a button to remove all files from selection(if you did mistake selecting files). Then when i try to re-select same files my counter is still set to 0. This problem doesn't occure if i select diffrent file, then remove it and select the file i wanted. To make it more simple imagine you got files:

FileA.jpg, FileB.jpg, FileC.png

When i select FileA counter goes to 1, then i click remove and counter goes back to 0.

Then i want to re-select same FileA but it doesnt count as selected, and counter is still set to 0 as long as i select the same file i did previously.

My state looks like this:

this.state={
          selectedFile:null,
          ile:0,
          lista:"",
       }

Here is my File handling:

async handleRemove(){
    await this.setState({
      selectedFile:null,
      ile:0,
      lista:"",
      })
  data= new FormData();
  }

async handleSubmitFile(e) {
          await this.setState({selectedFile:e.target.files,})
          for(var x=0;x<this.state.selectedFile.length;x++){
                let rozszerzenie=this.state.selectedFile[x].name.split(".").pop();
                if(rozszerzenie.toUpperCase()==='PNG' || rozszerzenie.toUpperCase()==='JPEG' || rozszerzenie.toUpperCase()==='PDF' || rozszerzenie.toUpperCase()==='JPG')
                    {
                      data.append('images[]',this.state.selectedFile[x]);
                      if (this.state.lista.includes(this.state.selectedFile[x].name)){
                      }
                  else{await this.setState({
                      ile:this.state.ile+1,
                      lista:this.state.lista+this.state.selectedFile[x].name+"\n",
                  })
                  ;}
                }
                else{
                      alert("Błędny format pliku, proszę przesyłać tylko PNG, PDF oraz JPG/JPEG");
                      return;
                }  
              }
  }

And my Return just got simple

<input type='file' onChange={this.handleSubmitFile} multiple name='file' id='image' accept='application/pdf, image/*'/>
{this.state.ile}- number of files selected
{this.state.lista}-list of all files
<button type="button" className="fileupdate" onClick={this.handleRemove}>Remove files</button>

I feel like it somehow remembers last selection and doesn't let re-select this. Any ideas how i can bypass that?

Mariusz Rakoczy
  • 67
  • 10

2 Answers2

1
<input type='file' onChange={this.handleSubmitFile} multiple name='file' id='image' accept='application/pdf, image/*'/ value={this.state.selectedFile}>

You need to add value attribute to input, so when you clear the selectedFile, then your input should also be set as null, because onChange works with the change, so if the file is not changed it will not trigger.

ma_dev_15
  • 1,176
  • 7
  • 18
  • Adding `value={this.state.selectedFile}` just gives a wall of red errors in console, can't set the HTMLInputElement into value. Also using this.state.ile/lista doesnt work as well – Mariusz Rakoczy Nov 15 '19 at 09:46
  • you can change the value by using ref when you clear the selected file – ma_dev_15 Nov 15 '19 at 09:50
  • Could you help me with that? haven't used references yet – Mariusz Rakoczy Nov 15 '19 at 09:55
  • Added `this.listRef=React.createRef();` before state, changed handleRemove set State to `selectedFile:this.listRef.current.value` and added to my input `ref={this.listRef} but that doesnt make this work – Mariusz Rakoczy Nov 15 '19 at 10:02
  • https://stackoverflow.com/questions/39484895/how-to-allow-input-type-file-to-select-the-same-file-in-react-component/40429197 – ma_dev_15 Nov 15 '19 at 10:03
0

My resolution: after removing an element from the queue you need to clear the input value.

<input id="my-file" type="file" />

document.getElementById('my-file').value = "";
Malik Zahid
  • 593
  • 5
  • 13