freshworks / crayons

🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps!

Home Page:https://crayons.freshworks.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Enhancement] - reset and getLocalFiles methods on FileUploader component

Vignesh-Manogar-E3433 opened this issue · comments

Description of the enhancement:
Reset Method: add a reset method to make the component go back to the initial state.
getLocalFiles: add a method to get the locally uploaded files from the component when part of a form.

There have been request from the community for the same.
https://community.freshworks.dev/t/file-uploader-how-to-reset/7282
https://community.freshworks.dev/t/how-to-use-fw-file-uploader/6881

We should be able to achieve something like,

const fileUploader = useRef(null);
const updateState = async (event) => {
  event.preventDefault();
  const files = await fileUploader.getFiles();
  console.log(files);
  fileUploader.reset();
};
<form onSubmit={(event) => updateState(event)}>
  <FwFileUploader
    name="sample-2"
    id="file-uploader-2"
    text="Upload PNG"
    accept=".png"
    ref={fileUploader}
  >
  </FwFileUploader>
  <FwButton type="submit">Upload</FwButton>
</form>