Add onFileRemoved callback to useImperativeFilePicker (#80)

* Add onFileRemoved callback to useImperativeFilePicker

* fix validator example

Author: MrKampla

README.md

@@ -255,6 +255,25 @@ export default function App() {
       // this callback is called when there were no validation errors
       console.log('onFilesSuccessfullySelected', plainFiles, filesContent);
     },
+    onClear: () => {
+      // this callback is called when the selection is cleared
+      console.log('onClear');
+    },
+  });
+}
+```
+
+`useImperativePicker` hook also accepts the callbacks listed above. Additionally, it accepts the `onFileRemoved` callback, which is called when a file is removed from the list of selected files.
+
+```ts
+import { useImperativeFilePicker } from 'use-file-picker';
+
+export default function App() {
+  const { openFilePicker, filesContent, loading, errors, plainFiles, clear } = useImperativeFilePicker({
+    onFileRemoved: (removedFile, removedIndex) => {
+      // this callback is called when a file is removed from the list of selected files
+      console.log('onFileRemoved', removedFile, removedIndex);
+    },
   });
 }
 ```
@@ -404,9 +423,10 @@ Since version 2.0, validators also have optional callback handlers that will be
   /**
    * This method is called when file is removed from the list of selected files.
    * Invoked only by the useImperativeFilePicker hook
+   * @param _removedFile removed file
    * @param _removedIndex index of removed file
    */
-  onFileRemoved(_removedIndex: number): Promise<void> | void {}
+  onFileRemoved(_removedFile: File, _removedIndex: number): Promise<void> | void {}
 ```
 
 #### Example validator

example/imperative.tsx

@@ -25,6 +25,10 @@ const Imperative = () => {
         // this callback is called when there were no validation errors
         console.log('onFilesSuccessfullySelected', plainFiles, filesContent);
       },
+      onFileRemoved(file, removedIndex) {
+        // this callback is called when file is removed
+        console.log('onFileRemoved', file, removedIndex);
+      },
     });
 
   if (loading) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "use-file-picker",
   "description": "Simple react hook to open browser file selector.",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "Milosz Jankiewicz",
   "homepage": "https://github.com/Jaaneek/useFilePicker",

src/interfaces.ts

@@ -118,6 +118,10 @@ export type ExtractContentTypeFromConfig<Config> = Config extends { readAs: 'Arr
 export type UseFilePickerConfig<CustomErrors = unknown> = UseFilePickerConfigCommon &
   ReadFileContentConfig<CustomErrors>;
 
+export type useImperativeFilePickerConfig<CustomErrors = unknown> = UseFilePickerConfig<CustomErrors> & {
+  onFileRemoved?: (file: FileWithPath, removedIndex: number) => void | Promise<void>;
+};
+
 export interface FileContent<ContentType> extends Blob {
   lastModified: number;
   name: string;

src/useImperativeFilePicker.ts

@@ -5,7 +5,7 @@ import {
   ImperativeFilePickerReturnTypes,
   SelectedFiles,
   SelectedFilesOrErrors,
-  UseFilePickerConfig,
+  useImperativeFilePickerConfig,
 } from './interfaces';
 import useFilePicker from './useFilePicker';
 
@@ -14,9 +14,9 @@ import useFilePicker from './useFilePicker';
  */
 function useImperativeFilePicker<
   CustomErrors = unknown,
-  ConfigType extends UseFilePickerConfig<CustomErrors> = UseFilePickerConfig<CustomErrors>
+  ConfigType extends useImperativeFilePickerConfig<CustomErrors> = useImperativeFilePickerConfig<CustomErrors>
 >(props: ConfigType): ImperativeFilePickerReturnTypes<ExtractContentTypeFromConfig<ConfigType>, CustomErrors> {
-  const { readFilesContent, onFilesSelected, onFilesSuccessfullySelected } = props;
+  const { readFilesContent, onFilesSelected, onFilesSuccessfullySelected, validators, onFileRemoved } = props;
 
   const [allPlainFiles, setAllPlainFiles] = useState<File[]>([]);
   const [allFilesContent, setAllFilesContent] = useState<FileContent<ExtractContentTypeFromConfig<ConfigType>>[]>([]);
@@ -59,17 +59,18 @@ function useImperativeFilePicker<
 
   const removeFileByIndex = useCallback(
     (index: number) => {
-      setAllPlainFiles(previousPlainFiles => [
-        ...previousPlainFiles.slice(0, index),
-        ...previousPlainFiles.slice(index + 1),
-      ]);
       setAllFilesContent(previousFilesContent => [
         ...previousFilesContent.slice(0, index),
         ...previousFilesContent.slice(index + 1),
       ]);
-      props.validators?.forEach(validator => validator.onFileRemoved?.(index));
+      setAllPlainFiles(previousPlainFiles => {
+        const removedFile = previousPlainFiles[index];
+        validators?.forEach(validator => validator.onFileRemoved?.(removedFile, index));
+        onFileRemoved?.(removedFile, index);
+        return [...previousPlainFiles.slice(0, index), ...previousPlainFiles.slice(index + 1)];
+      });
     },
-    [props.validators]
+    [validators, onFileRemoved]
   );
 
   const removeFileByReference = useCallback(

src/validators/persistentFileAmountLimitValidator/index.ts

@@ -12,7 +12,7 @@ class PersistentFileAmountLimitValidator extends Validator {
     this.previousPlainFiles = [];
   }
 
-  onFileRemoved(removedIndex: number): void {
+  onFileRemoved(_removedFile: File, removedIndex: number): void {
     this.previousPlainFiles.splice(removedIndex, 1);
   }
 

src/validators/validatorBase.ts

@@ -49,7 +49,8 @@ export abstract class Validator<
   /**
    * This method is called when file is removed from the list of selected files.
    * Invoked only by the useImperativeFilePicker hook
+   * @param _removedFile removed file
    * @param _removedIndex index of removed file
    */
-  onFileRemoved(_removedIndex: number): Promise<void> | void {}
+  onFileRemoved(_removedFile: File, _removedIndex: number): Promise<void> | void {}
 }