react-dnd-uploader-example v0.1.2

React-DnD-Uploader

React Drag-n-Drop Uploader is a light weight React library that create a drag and drop zone for uploading your files.

Features

• Image and video thumbnail previews
• Upload multiple files
• Display progress updates
• Response design
• Customizable theme

Installation

For npm

npm install --save react-dnd-uploader

For yarn

yarn add react-dnd-uploader

Demo

git clone https://github.com/yudataguy/react-dnd-uploader.git
cd react-dnd-uploader
npm install
npm start

A browser opens up, or visit http://localhost:3000 to browse the demo.

Documentation

fileWindow

Type: Boolean Required: false Default: false

If the fileWindow is set to true, there will be a file window button available on drag and drop zone.

autoUpload

Type: Boolean Required: false Default: false

If the autoUpload is set to true, the dropped file will be automatically uploaded.

preview

Type: Boolean Required: false Default: true

If the preview is set to false, the image/video preview thumbnail will be disabled in the drop and drag zone.

uploadUrl

Type: String Required: true Default: null

uploadUrl should be the upload endpoint for uploading files.

styleOptions

Type: Object Required: false Default: {}

styleOptions allows you to style the elements within react-dnd-uploader either using inline styles or classNames. The possible options are:

{ dragContainer, drag, dragText, fileInput, previewsContainer, imgContainer, img, previewName, progressContainer, progress, delBtn, uploadBtn }

You can add inline styles by adding a Style suffix to the option and add a className by adding a Class Suffix. For example, to add inline styles to dragContainer we would use the dragContainerStyle option. All the options must either be suffixed by Style or Class expect for dragText which could be used without a suffix to replace the text that is displayed when the user drags over the element.

Sample Code

Frontend

import React from 'react';
import ReactDnDUploader from 'react-dnd-uploader';
import "./App.css";

export default function App() {
  return (
    <div className="App">
      <ReactDnDUploader
        className="drag-and-drop"
        preview
        fileWindow
        uploadUrl="http://localhost:3001/api/photo"
      >
        <div style={{ marginBottom: "1rem" }}>
          {!uploading
                ? "Customize drop zone text here"
                : "Uploading..."}
        </div>
      </ReactDnDUploader>
    </div>
  );
}

Backend

const express = require("express");
const multer  = require('multer');
const cors = require('cors');
const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
  }
});

const upload = multer({ storage : storage}).single('userPhoto');

const PORT = 3001;

app.use(cors());
app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});

app.post('/api/photo',function(req,res){
    upload(req,res,function(err) {
      res.setHeader('Content-Type', 'text/plain')
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end('Upload Done');
    });
});

app.listen(PORT,function(){
    console.log(`Node server working on port ${PORT}`);
});