Odtnhj

I have file upload input:

<input onChange=this.getFile id="fileUpload" type="file" className="upload"/>

And I handle upload this way:

getFile(e) 
 e.preventDefault();
 let reader = new FileReader();
 let file = e.target.files[0];
 reader.onloadend = (theFile) => 
 var data = 
 blob: theFile.target.result, name: file.name,
 visitorId: this.props.socketio.visitorId
 ;
 console.log(this.props.socketio);
 this.props.socketio.emit('file-upload', data);
 ;
 reader.readAsDataURL(file);

If I upload same file twice, then upload event is not fired. How can I fix that? For simple js code it was enough to do the following: this.value = null; in change handler. How can I do it with ReactJS?

I think you can just clear the input value like this :

e.target.value = null;

File input cannot be controlled, there is no React specific way to do that.

This work for me - ref=ref => this.fileInput = ref

<input id="file_input_file" type="file" onChange=(e) => this._handleFileChange(e) ref=ref=> this.fileInput = ref />

then in my case once the file was uploaded to the server , I clear it by using the statement below

 this.fileInput.value = "";

What worked for me was setting a key attribute to the file input, then when I needed to reset it I update the key attribute value:

functionThatResetsTheFileInput() 
 let randomString = Math.random().toString(36);

 this.setState(
 theInputKey: randomString
 );


render() 
 return(
 <div>
 <input type="file"
 key= '' />
 <button onClick=this.functionThatResetsTheFileInput() />
 </div>
 )

That forces React to render the input again from scratch.

You can also include this in your input element if you know you are not going to be using the built-in file input value at all.

<input value="" ... />

This way the value is always reset to the empty string on render and you don't have to include it awkwardly in an onChange function.

I know file input is always uncontrolled however the following code still works in my own porject, I can reset the input with no problems at all.

constructor(props) 
 super(props);
 this.state = 
 selectedFile: undefined,
 selectedFileName: undefined,
 imageSrc: undefined,
 value: ''
 ;

 this.handleChange = this.handleChange.bind(this);
 this.removeImage = this.removeImage.bind(this);


handleChange(event) 
 if (event.target.files[0]) 
 this.setState(
 selectedFile: event.target.files[0],
 selectedFileName: event.target.files[0].name,
 imageSrc: window.URL.createObjectURL(event.target.files[0]),
 value: event.target.value,
 );
 


// Call this function to reset input
removeImage() 
 this.setState(
 selectedFile: undefined,
 selectedFileName: undefined,
 imageSrc: undefined,
 value: ''
 )


render() 
 return (
 <input type="file" value=this.state.value onChange=this.handleChange />
 );

Here is my solution using redux form

class FileInput extends React.Component 
 constructor() 
 super();

 this.deleteImage = this.deleteImage.bind(this);
 

 deleteImage() 
 // Just setting input ref value to null did not work well with redux form
 // At the same time just calling on change with nothing didn't do the trick
 // just using onChange does the change in redux form but if you try selecting
 // the same image again it doesn't show in the preview cause the onChange of the
 // input is not called since for the input the value is not changing
 // but for redux form would be.

 this.fileInput.value = null;
 this.props.input.onChange();
 

 render() 
 const input: onChange, value , accept, disabled, error = this.props;
 const edited = this.state;

 return (
 <div className="file-input-expanded">
 /* ref and on change are key properties here */
 <input
 className="hidden"
 type="file"
 onChange=e => onChange(e.target.files[0])
 multiple=false
 accept=accept
 capture
 ref=(input) => this.fileInput = input; 
 disabled=disabled
 />
 !value ?
 /* Add button */
 <Button
 className="btn-link action"
 type="button"
 text="Add Image"
 onPress=() => this.fileInput.click()
 disabled=disabled
 />
 :
 <div className="file-input-container">
 <div className="flex-row">
 /* Image preview */
 <img src=window.URL.createObjectURL(value) alt="outbound MMS" />
 <div className="flex-col mg-l-20">
 /* This button does de replacing */
 <Button
 type="button"
 className="btn-link mg-b-10"
 text="Change Image"
 onPress=() => this.fileInput.click()
 disabled=disabled
 />
 /* This button is the one that does de deleting */
 <Button
 type="button"
 className="btn-link delete"
 text="Delete Image"
 onPress=this.deleteImage
 disabled=disabled
 />
 </div>
 </div>
 error &&
 <div className="error-message"> error</div>
 
 </div>
 
 </div>
 );
 


FileInput.propTypes = 
 input: object.isRequired,
 accept: string,
 disabled: bool,
 error: string
;

FileInput.defaultProps = 
 accept: '*',
;

export default FileInput;

React is nothing but JavaScript and we can use DOM manipulation in React code as well.
This should be working

document.getElementsByClassName('upload')[0].value = null;