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.
- This repo contains only Frontend component (is a component trim of personal UI lib)
Custom project file upload process
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...
- 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
- Using Tailwind you can style it in your way
- Using PurgeCss by default
- Using functional components and hooks
- Clone the repo
git clone https://github.com/damikun/React-File-DragDrop.git
- CD to project dir
cd .\File-DragDropper\
- Restore packages
yarn install
- Build and run demo
yarn run start
<FileDragDrop
className="text-gray-600"
accept="image/png"
multiple={false}
api_url="https://localhost:5001/api/Data/UploadFile"
onSuccess={(token, response) => {
setstate(token);
}}
onError={(type, message, object) => {
window.alert(`Type: ${type}, Messagbe: ${type}, Object: ${object}`)
if (type === "Exception") console.log(object);
setstate("");
}}
/>