react-files-uploading
v1.0.2TypeScript
The simple files uploader applied Render Props pattern. This approach allows you to fully control UI component and behaviours.
imagevideosuploaduploaderuploadingreact image uploadreact videos uploadingreact files uploadingdragdrag and drop
0/weekUpdated 3 years agoMITUnpacked: 33.8 KB
Published by vutoan266
npm install react-files-uploadingreact-files-uploading
The simple files uploader applied Render Props pattern. (You can read more about this pattern here).
This approach allows you to fully control UI component and behaviours.
_This is a modified version of react-images-uploading for files uploading._
 !Github_Actions      
- Installation
- Usage
- Props
- Note
- Exported options
- Contributors ✨
Installation
npm
``bash`
npm install --save react-files-uploading
yarn
`bash`
yarn add react-files-uploading
Basic
`tsx
import * as React from 'react';
import FileUploading from 'react-files-uploading';
export const App = () => {
const [files, setFiles] = React.useState
const onChange = (fileList: File[]) => {
setFiles(fileList);
};
return (
{({
fileList,
errors,
isDragging,
onFileUpload,
onFileRemoveAll,
onFileUpdate,
onFileRemove,
dragProps,
}) => {
return (
{errors && errors.maxNumber && (
Number of selected files exceed maxNumber
)}
type="button"
style={isDragging ? { color: 'red' } : undefined}
onClick={onFileUpload}
{...dragProps}
>
Click or Drop here
{fileList.map((file, index) => (
file-${index}
} className="file-item">
{file.name}
}
type="button"
onClick={() => onFileUpdate(index)}
>
{Update ${index}}
remove_${index}}
type="button"
onClick={() => onFileRemove(index)}
>
{Remove ${index}}
))}
);
}}
);
};
`
Validation
ts
...
{({ fileList, onFileUpload, onFileRemoveAll, errors }) => (
errors &&
{errors.maxNumber && Number of selected files exceed maxNumber}
{errors.acceptType && Your selected file type is not allow}
{errors.maxFileSize && Selected file size exceed maxFileSize}
)}
...
`Drag and Drop
tsx
...
{({ fileList, dragProps, isDragging }) => (
{isDragging ? "Drop here please" : "Upload space"}
{fileList.map((file, index) => (
{file.name}
))}
)}
...
`Props
| parameter | type | options | default | description |
| ----------- | ----------------------------------- | ---------------------------------- | ------- | ---------------------------------------------------- |
| value | array | | [] | List of files |
| onChange | function | (fileList, addUpdateIndex) => void | | Called when add, update or delete action is called |
| multiple | boolean | | false | Set
for multiple chooses |
| maxNumber | number | | 1000 | Number of files user can select if mode = multiple |
| onError | function | (errors, files) => void | | Called when it has errors |
| acceptType | array | ['mp4', 'webm', 'png', 'pdf] | [] | The file extension(s) to upload |
| maxFileSize | number | | | Max file size (Byte) and it is used in validation |
| inputProps | React.HTMLProps\ | | | |Exported options
| parameter | type | description |
| :-------------- | :---------------------------------------- | :------------------------------------------------------------------ |
| fileList | array | List of files to render. |
| onFileUpload | function | Called when an element is clicks and triggers to open a file dialog |
| onFileRemoveAll | function | Called when removing all files |
| onFileUpdate | (updateIndex: number) => void | Called when updating a file at
updateIndex`. || onFileRemove | (deleteIndex: number \| number[]) => void | Called when removing one or list of files. |
| errors | object | Exported object of validation |
| dragProps | object | Native element props for drag and drop feature |
| isDragging | boolean | "true" if a file is being dragged |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 vutoan266 💻 🤔 📖 🚧 ⚠️ 👀 |  David Nguyen 💻 🤔 📖 👀 |  DK 💻 🚇 🤔 👀 📖 |  Isaac Maseruka 💻 |  Vu Nguyen 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!