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 ( - +
+ +
); } }