File Drag-Drop

Preview of file drag drop react component

This is frontend file dropper include axios to send file and get its token

About

Internal 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 push file using form...

Installation

1. Clone the repo

   git clone https://github.com/damikun/React-File-DragDrop.git

2. CD to project dir

   cd .\File-DragDropper\

3. Restore packages

   yarn install
   

4. Build and run demo

   yarn run start
   

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Configuration API

 <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("");
   }}
 />