support reset function

README.md

@@ -54,6 +54,33 @@ ReactDOM.render(<App />, document.getElementById("app"))
 ##### multiple (Boolean)
 Does your component support multiple files?
 
+##### resetFlag (Boolean) (option)
+Description: reset the `FileBase` component state. 
+
+Update the `resetFlag` to `!resetFlag` can tigger the reset function.
+
+Usage: Update the `resetFlag` variable in `FileBase64` parent component and pass `resetFlag` to `FileBase64` component as a props
+
+Your parent component shoud like this:
+```jsx
+// add state in parent component
+const [resetFlag, setResetFlag] = useState(false);
+
+// add reset function in parent component
+// call this function if you want reset the FileBase component
+const reset = () => {
+  setResetFlag(!resetFlag);
+}
+
+// send the resetFlag props to FileBase component
+return (
+  <div >
+    <FileBase resetFlag={resetFlag} onDone={uploadFile} /> 
+  </div>
+)
+
+```
+
 ##### onDone (Function)
 Callback function when all files have been processed
 

src/js/components/react-file-base64.js

@@ -11,11 +11,18 @@ export default class FileBase64 extends React.Component {
 
   constructor(props) {
     super(props);
+    this.formRef = React.createRef();
     this.state = {
       files: [],
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if(this.props.resetFlag !== prevProps.resetFlag && this.formRef.current) {
+      this.formRef.current.reset();
+    }
+  }
+
   handleChange(e) {
 
     // get the files
@@ -49,7 +56,7 @@ export default class FileBase64 extends React.Component {
         allFiles.push(fileInfo);
 
         // If all files have been proceed
-        if(allFiles.length == files.length){
+        if(allFiles.length === files.length){
           // Apply Callback function
           if(this.props.multiple) this.props.onDone(allFiles);
           else this.props.onDone(allFiles[0]);
@@ -63,10 +70,13 @@ export default class FileBase64 extends React.Component {
 
   render() {
     return (
-      <input
-        type="file"
-        onChange={ this.handleChange.bind(this) }
-        multiple={ this.props.multiple } />
+      <form ref={this.formRef}>
+        <input
+          type="file"
+          onChange={ this.handleChange.bind(this) }
+          multiple={ this.props.multiple }
+        />
+      </form>
     );
   }
 }