205 |
206 |
207 |
208 | Number of selected files:
209 | {plainFiles.length}
210 |
211 | {/* If readAs is set to DataURL, You can display an image */}
212 | {!!filesContent.length && }
213 |
214 | {plainFiles.map(file => (
215 |
{file.name}
216 | ))}
217 |
218 | );
219 | }
220 | ```
221 |
222 | ### Callbacks
223 |
224 | You can hook your logic into callbacks that will be fired at specific events during the lifetime of the hook. useFilePicker accepts these callbacks:
225 |
226 | - onFilesSelected
227 | - onFilesRejected
228 | - onFilesSuccessfullySelected
229 | - onClear
230 |
231 | These are described in more detail in the [Props](#props) section.
232 |
233 | ```ts
234 | import { useFilePicker } from 'use-file-picker';
235 |
236 | export default function App() {
237 | const { openFilePicker, filesContent, loading, errors, plainFiles, clear } = useFilePicker({
238 | multiple: true,
239 | readAs: 'DataURL',
240 | accept: ['.json', '.pdf'],
241 | onFilesSelected: ({ plainFiles, filesContent, errors }) => {
242 | // this callback is always called, even if there are errors
243 | console.log('onFilesSelected', plainFiles, filesContent, errors);
244 | },
245 | onFilesRejected: ({ errors }) => {
246 | // this callback is called when there were validation errors
247 | console.log('onFilesRejected', errors);
248 | },
249 | onFilesSuccessfullySelected: ({ plainFiles, filesContent }) => {
250 | // this callback is called when there were no validation errors
251 | console.log('onFilesSuccessfullySelected', plainFiles, filesContent);
252 | },
253 | onClear: () => {
254 | // this callback is called when the selection is cleared
255 | console.log('onClear');
256 | },
257 | });
258 | }
259 | ```
260 |
261 | `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.
262 |
263 | ```ts
264 | import { useImperativeFilePicker } from 'use-file-picker';
265 |
266 | export default function App() {
267 | const { openFilePicker, filesContent, loading, errors, plainFiles, clear } = useImperativeFilePicker({
268 | onFileRemoved: (removedFile, removedIndex) => {
269 | // this callback is called when a file is removed from the list of selected files
270 | console.log('onFileRemoved', removedFile, removedIndex);
271 | },
272 | });
273 | }
274 | ```
275 |
276 | ### Keeping the previously selected files and removing them from selection on demand
277 |
278 | If you want to keep the previously selected files and remove them from the selection, you can use a separate hook called `useImperativeFilePicker` that is also exported in this package. For files removal, you can use `removeFileByIndex` or `removeFileByReference` functions.
279 |
280 | ```ts
281 | import React from 'react';
282 | import { useImperativeFilePicker } from 'use-file-picker';
283 |
284 | const Imperative = () => {
285 | const { openFilePicker, filesContent, loading, errors, plainFiles, clear, removeFileByIndex, removeFileByReference } =
286 | useImperativeFilePicker({
287 | multiple: true,
288 | readAs: 'Text',
289 | readFilesContent: true,
290 | });
291 |
292 | if (errors.length) {
293 | return (
294 |
113 |