https://github.com/dropzone-ui/file-upload-server-side

Server side implemntation for uploading files
https://github.com/dropzone-ui/file-upload-server-side

Last synced: about 1 month ago
JSON representation

Server side implemntation for uploading files

• Host: GitHub
• URL: https://github.com/dropzone-ui/file-upload-server-side
• Owner: dropzone-ui
• License: mit
• Created: 2021-09-06T15:07:21.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-01T03:13:40.000Z (about 3 years ago)
• Last Synced: 2024-07-31T08:16:25.693Z (4 months ago)
• Language: JavaScript
• Size: 306 KB
• Stars: 29
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - dropzone-ui/file-upload-server-side - Server side implemntation for uploading files (JavaScript)

README

        




  Dropzone-UI (file-upload-server-side)

Server side implementations for uploading files.


# Express

Server side implementation for uploading files built with Express.js.

## Run server

Follow the instructions to run the server.

```sh

#clone this repository

git clone https://github.com/dropzone-ui/file-upload-server-side.git

#move to project folder

cd ./expressjs

#install dependencies

npm install

#run server on development mode

npm run dev

```

Congrats! you are done!. Your server is now running on port 2800. 

So, the url endpoint that must be given to `Dropzone` component is `http://localhost:2800/upload-my-file`.

If you deploy your server, the url prop will change to `http:///upload-my-file`.

# Frontend side

Now upload some files from a react app using [dropzone-ui](https://www.npmjs.com/package/@dropzone-ui/react) this way:

```jsx

import React,{ useState} from "react";

import { Dropzone, FullScreenPreview, FileItem } from "@dropzone-ui/react";

const SERVER_URL = "http://localhost:2800";

const Example = props =>{

    const [files, setFiles] = useState([]);

    const updateFiles = (incommingFiles) => {

      console.log("incomming files", incommingFiles);

      setFiles(incommingFiles);

    };

    const handleUpload=(responses)=>{

      //check the responses here

      console.log("responses", responses);

    }

    const onDelete = (id) => {

      setFiles(files.filter((x) => x.id !== id));

    };

 

    return (

      

        {files.map((file) => (

          

        ))}

      

    );

}

export default Example;

```

For more examples of [dropzone-ui](https://www.npmjs.com/package/@dropzone-ui/react), check [here](https://www.npmjs.com/package/@dropzone-ui/react#Usage-and-examples).

## License

This project is licensed under the terms of the

[MIT license](/LICENSE).