https://github.com/damikun/react-file-dragdrop
React file drag-drop component preview for easy file uploads.. Just point it to API and get token / response result
https://github.com/damikun/react-file-dragdrop
file-drag file-upload react-drag-and-drop react-dropzone react-file-upload-component react-file-upload-s3 react-upload react-uploadfile
Last synced: about 1 year ago
JSON representation
React file drag-drop component preview for easy file uploads.. Just point it to API and get token / response result
- Host: GitHub
- URL: https://github.com/damikun/react-file-dragdrop
- Owner: damikun
- Created: 2020-12-02T21:54:10.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-03T11:57:36.000Z (over 5 years ago)
- Last Synced: 2025-04-06T22:05:31.619Z (about 1 year ago)
- Topics: file-drag, file-upload, react-drag-and-drop, react-dropzone, react-file-upload-component, react-file-upload-s3, react-upload, react-uploadfile
- Language: TypeScript
- Homepage:
- Size: 828 KB
- Stars: 5
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React File Drag-Drop
Preview of file drag drop react component
This is frontend file dropper include axios under the hood for sending file and receiving its token. Token is used as temporary user and file identifier and is generated by backend app. For frontend component ussage is not necessary, it is just ilustrating the full concept of uploading files for app.
### About full process
- This repo contains only Frontend component (is a component trim of personal UI lib)
Custom project file upload process
##### Description
The image describe simplified version of file upload handling for custom system...
This componnent helps to push file over API to backend to get tmp file token which is used to commit file using form...
##### Concepts
- Just poit it to API and get result
- Self managed component
- Ability to cancle request in flight
- Process indicator
- Validate file types on drop based on "accept" input string
##### Other
- Using Tailwind you can style it in your way
- Using PurgeCss by default
- Using functional components and hooks
### Installation
1. Clone the repo
```sh
git clone https://github.com/damikun/React-File-DragDrop.git
```
2. CD to project dir
```sh
cd .\File-DragDropper\
```
3. Restore packages
```
yarn install
```
4. Build and run demo
```
yarn run start
```
### Configuration API
```js
{
setstate(token);
}}
onError={(type, message, object) => {
window.alert(`Type: ${type}, Messagbe: ${type}, Object: ${object}`)
if (type === "Exception") console.log(object);
setstate("");
}}
/>
```