diff --git a/README.md b/README.md
index bad0df5..36d3768 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,33 @@ ReactDOM.render(, 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 (
+
+
+
+)
+
+```
+
##### onDone (Function)
Callback function when all files have been processed
diff --git a/src/js/components/react-file-base64.js b/src/js/components/react-file-base64.js
index 1dc6191..409c7dd 100644
--- a/src/js/components/react-file-base64.js
+++ b/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 (
-
+
);
}
}