Light React Drag & Drop files and images library styled by styled-components

Overview

React Drag and Drop Files

Version code style: prettier npm download

Light and simple reactjs drag and drop library.

Demo

Edit react-drag-drop-files

Installation

Install it from npm (using NPM).

npm i --save react-drag-drop-files

Usage

Using react hooks just as simple as:

{ setFile(file); }; return ( ); } export default DragDrop; ">
import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const fileTypes = ["JPG", "PNG", "GIF"];

function DragDrop() {
  const [file, setFile] = useState(null);
  const handleChange = file => {
    setFile(file);
  };
  return (
    <FileUploader 
        handleChange={handleChange} 
        name="file" 
        types={fileTypes} 
    />
  );
}

export default DragDrop;

Options

Option Type Description value example
name string the name for your form (if exist) "myFile"
classes string string with the classes wished to add "drop_area drop_zone"
types Array array of strings with extentions to check and go throw ['png', 'jpeg', ...]
onTypeError function function that will be called only of error occured related to type (err) => console.log(err)
children JSX Element, any if you want to replace the current design inside the box of drop zone.

this is inside drop area

or just text
maxSize number the maximum size of the file (number in mb) 2
minSize number the minimum size of the file (number in mb) 1
onSizeError function function that will be called only of error occured related to size min or max (file) => console.log(file)
onDrop function function that will be called when the user drop a file on the drop area only (file) => console.log(file)
onSelect function function that will be called when the user select a file on click the file area only (file) => console.log(file)
handleChange function function that will be called when the user select or drop a file (file) => console.log(file)

Upcoming...

  • Files Validation
  • Adding Multiple Files
  • Testing
  • Typescript Support
  • Contribution Guide
  • Show different type of Errors

License

MIT

Comments
  • Multiple attribute doesn't work for me

    Multiple attribute doesn't work for me

    So I like your module it's simple and easy to work with but now I have decided to try it with multiple files but it doesn't work. My code looks like this: <FileUploader multiple={true} ... But it's still not able to upload multiple files. I tried also passing true argument as string but didn't work. Is this problem on my side or anybody has this issue too? Can you please fix this? Thanx.

    opened by Gougerik 11
  • fix: Click event firing twice in Next.js applications

    fix: Click event firing twice in Next.js applications

    Summary

    This package would have some strange behaviors in Next.js where the file upload window would pop up twice when the upload button was clicked. Upon investigation it was seen that the click event fired twice when the component was clicked. Adding a event.stopPropagaiton to the UploadWrapper and the input component stops this behavior, allowing the component to function as intended.

    Key Changes

    • Added event.stopPropagation to the UploadWrapper and input components.

    Check List

    • [ ] The changes to the "Readme" file(if needed)
    • [ ] The changes not breaking any old rule of the library or usage
    opened by room9design 6
  • chore: remove console due to potential risk

    chore: remove console due to potential risk

    Summary

    [Removed Console Regarding the Potential Risk?]

    Key Changes

    • [List the changes to look for in this PR]

    Check List

    • [x] The changes to the "Readme" file(if needed)
    • [x] The changes not break any old rule of the library or usage
    opened by saitharunsai 6
  • NoModificationAllowedError

    NoModificationAllowedError

    No problems in Chrome. When I DnD a file in Firefox, my React app blows up with:

    NoModificationAllowedError: Modifications are not allowed for this document
    

    Per https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/clearData

    Note: This method can only be used in the handler for the [dragstart](https://developer.mozilla.org/en-US/docs/Web/API/Document/dragstart_event) event, because that's the only time the drag operation's data store is writeable.
    

    It looks like this code is doing clearData() in the drop handler: https://github.com/KarimMokhtar/react-drag-drop-files/blob/dev/src/useDragging.tsx#L56

    This Stack Overflow is related: https://stackoverflow.com/questions/58201273/nomodificationallowederror-in-firefox-when-using-dnd-events

    bug good first issue 
    opened by TroyWolf 6
  •  File reload not working

    File reload not working

    Hello, thank you for your job! I have a problem in Google Chrome when I try to reload the same file another time. If I upload a file, then change the state to null, and try to upload the same file again, the onChange or onSelect event doesn't fire. Prop value fileOrFiles={state} doesn't work

    bug solved 
    opened by Oxxy-k 5
  • Fix typescript output, make build and dev faster by using esbuild/vitest

    Fix typescript output, make build and dev faster by using esbuild/vitest

    Summary

    The typescript output was actually just es code output, not types. This fixes it so that the output is the actual declarations.

    Key Changes

    • Change build system to use esbuild, which is significantly faster
    • Change test system to use vitest, which is significantly faster
    • Change playground to use vite
    • Fix typescript output
    • Bump package versions
    opened by jonluca 4
  • Need method to disable `hoverTitle`

    Need method to disable `hoverTitle`

    Version: 2.3.2

    By default, when user drags file over drop zone, "Drop here" text appears. This is controlled with the hoverTitle property. For our use case, we want to disable this hover text completely. However, the hoverTitle does not seem to provide a way to disable this completely. Setting a blank string (''), null, or false all result in the default "Drop here" text showing. I can set to a single space hoverTitle=' ', but this still results in a gray dot showing upon hover.

    Thanks @KarimMokhtar, for creating and sharing your work!

    opened by TroyWolf 4
  • Image re-upload is not working

    Image re-upload is not working

    When we upload an image, and then try to upload the same image again, change event is not firing. Also is it possible to make it compatible with react 17?

    opened by kakarlasaiteja 3
  • update: add useImperativeHandle to get dragging state

    update: add useImperativeHandle to get dragging state

    Thanks for this well built library. In some projects, there was some need to add styles depends dragenter, dragout.

    I think it would be better if parent component knows useDragging value is true or not.

    I used forwardRef, useImperativeHandle.

    opened by dante01yoon 3
  • feat: add dropMessageStyle prop

    feat: add dropMessageStyle prop

    Summary

    Add a prop called 'dropMessageStyle' to style the HoverMsg element

    Key Changes

    • Add a type dropMessageStyle inside Props type
    • Add style={dropMessageStyle} inside HoverMsg element

    Check List

    • [X] The changes to the "Readme" file(if needed)
    • [X] The changes not breaking any old rule of the library or usage
    opened by anti-duhring 2
  • feat: added multiple files upload feature

    feat: added multiple files upload feature

    Changes done:

    • added multiple in FileUploader.tsx
    • renamed file to fileOrFiles, as it can be an array of files now
    • almost all the file change handler can now have either File or Array<File> based on multiple

    the logic is pretty much the same, didn't changed any!

    Merging this will resolve #31

    opened by iamdipanshusingh 2
  • Issue with file types

    Issue with file types

    I am having problem with file types. I want to accept *.lic files, and I can not get it to work... Here is my code:

    import { FileUploader } from "react-drag-drop-files";
    
    const fileTypes = ['lic'];
    
    <FileUploader 
      label="Drop your license (*.lic) file here"
      handleChange={handleChange} 
      name="file" 
      types={fileTypes} 
    />
    

    When I drag and drop my file DWX-J13M-DRCI-JQR1.lic the component would say error File type/size error, Hovered on types!.

    What am I doing wrong?

    opened by PrimozRome 2
  • Fix typescript output, make build and dev faster by using esbuild/vitest

    Fix typescript output, make build and dev faster by using esbuild/vitest

    Summary

    The typescript output was actually just es code output, not types. This fixes it so that the output is the actual declarations.

    Key Changes

    • Change build system to use esbuild, which is significantly faster
    • Change test system to use vitest, which is significantly faster
    • Change playground to use vite
    • Fix typescript output
    • Bump package versions

    Re-creates #77 with only one commit

    opened by jonluca 0
  • Adding aria tags

    Adding aria tags

    Hi,

    I don't see any way to add aria tags to the <input/> element.

    I need to add tags like: aria-required aria-describedby aria-invalid

    Is there a workaround?

    Or should I make a PR for it?

    opened by hepiyellow 1
  • Mobile Safari 15 handleChange is not called when a file is selected

    Mobile Safari 15 handleChange is not called when a file is selected

    First things first: thank you for developing an awesome component for react.

    Unfortunately I noticed that FileUploaded ([email protected]) doesn't work on iOS 15, mobile safari 15.

    Could you please advice on how to sort it out? Thank you in advance.

    opened by ahtokca 1
  • Not able to access Input with passing ref

    Not able to access Input with passing ref

    In the project I require to control the input element e.g. to trigger input file event with some button outside the FileUploader component. But by passing ref to FileUploader component it doesn't do anything. I think it do not take any prop as ref. So it might be good if we can pass ref to get more control over the input element inside FileUploader component.

    If it is there already can anybody please explain how to use that. Thanks

    opened by namansamra 0
Owner
null
Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for

Builder.io 4.1k Dec 2, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.7k Dec 1, 2022
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Nov 19, 2022
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 7 Nov 14, 2022
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

Peter Hollingsworth 142 Sep 26, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.6k Dec 5, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.6k Dec 6, 2022
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 6.2k Dec 6, 2022
Drag and Drop for React

Drag and Drop for React

React DnD 18.5k Dec 2, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 43 Nov 8, 2022
React drag and drop framework with inbuilt virtualizing scrollbars.

About us This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management pla

Forecast 51 Sep 21, 2022
Creating an app using Drag and Drop with React without libraries 🤏

Creating an app using Drag and Drop with React without libraries ?? ! This time, we are going to implement the functionality to do a Drag & Drop with

Franklin Martinez 5 Sep 23, 2022
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Official React wrapper for dragula. Demo Try out the demo! Install You can get it on npm. npm install react-dragula -

Nicolás Bevacqua 976 Nov 26, 2022
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

Isaac Hagoel 52 Oct 31, 2022
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

?? react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Adrian Smijulj 45 Aug 26, 2022
Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

null 9.3k Nov 29, 2022
example how to use react-dropzone for drag 'n drop uploader

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Hendra_Adri 1 Nov 5, 2021
Taskboard with drag'n drop feature. Built w/ React, TypeScript

Drag & Drop Taskboard A taskboard application with drag and drop feature. Live demo is here. Tech Stack Language: TypeScript UI-Components: Ant Design

Onur Önder 36 Nov 26, 2022
"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React < 16.8 Support both mous

Fritz Lin 13 Nov 7, 2022