Multiple File picker with previous state

[Joel Jerushan]

Is there any way to pick files continuously without breaking previous state ? which means is it possible to pick files after picking two or more files ? when i trigger openFileSelector() again it clears previous selected items.

[MrKampla]

Hi @joeljerushan
Our hook does not support this out of the box. Right now, we purposely clear the state every time user selects a file. This makes this hook behave like a pure function, so given the same input it produces the same output every time. That's also the default behavior for a native input element provided by all browsers, and we aim to match that.

However, if you really need this logic you can implement it easily by yourself by wrapping the value that useFilePicker returns in a use State and then modifying it accordingly in use Effect:

  // use the hook as usual
  const [openFileSelector, { newFilesContent, loading }] = useFilePicker({
    accept: "*"
  });
  // wrap the default return value 
  const [allFiles, setAllFiles] = useState(newFilesContent);
  useEffect(() => {
    // merge the new array with old one, thus preserving the previous state
    setAllFiles((files) => files.concat(newFilesContent));
  }, [newFilesContent]);
  
  // use the allFiles instead of value returned from useFilePicker

This will result in the desired behavior, but please keep in mind that using this technique will cause some things to work differently, for example: you'd have to use setAllFiles([]) in order to clear the input, and also validation for the amount of files selected would not work (as the state of selected files is no longer maintained by useFilePicker).

Is that what you've been looking for?

[Jaaneek]

Hi @joeljerushan
I'm presuming that you are satisfied with @MrKampla answer.
If you are not, please open another issue, I'm closing this one due to inactivity