react drag and drop file code example

Example 1: drag n drop file upload react

<FileDrop
  onTargetClick={onTargetClick}

Example 2: react drag and drop

Install:
yarn add react-dnd react-dnd-html5-backend

Example:
// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag({
    item: { type: ItemTypes.CARD, text },
    collect: monitor => ({
      opacity: monitor.isDragging() ? 0.5 : 1,
    }),
  })
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

Example 3: drag n drop file upload react

const onFileInputChange = (event) => {
  const { files } = event.target;
  // do something with your files...
}

Example 4: drag n drop file upload react

<input
  onChange={onFileInputChange}
  ref={fileInputRef}
  type="file"
  className="hidden"
/>

Example 5: drag n drop file upload react

const fileInputRef = useRef(null);

Example 6: drag n drop file upload react

nvm use # Probably optional, but it can't hurt

cd file-drop
npm install
npm start

cd demo
npm install
npm start