react-file-drop - npm Package Compare versions

Comparing version 3.0.7 to 3.1.0

FileDrop.d.ts

 import PropTypes from 'prop-types';
-import React, { DragEvent as ReactDragEvent, DragEventHandler as ReactDragEventHandler } from 'react';
+import React, { DragEvent as ReactDragEvent, DragEventHandler as ReactDragEventHandler, ReactEventHandler } from 'react';
 export declare type DropEffects = 'copy' | 'move' | 'link' | 'none';
@@ -16,2 +16,3 @@ export interface FileDropProps {
     onDrop?: (files: FileList | null, event: ReactDragEvent<HTMLDivElement>) => any;
+    onTargetClick?: ReactEventHandler<HTMLDivElement>;
     dropEffect?: DropEffects;
@@ -34,4 +35,5 @@ }
         onDrop: PropTypes.Requireable<(...args: any[]) => any>;
+        onTargetClick: PropTypes.Requireable<(...args: any[]) => any>;
         dropEffect: PropTypes.Requireable<string>;
-        frame: (props: FileDropProps, propName: "frame" | "className" | "targetClassName" | "draggingOverFrameClassName" | "draggingOverTargetClassName" | "onFrameDragEnter" | "onFrameDragLeave" | "onFrameDrop" | "onDragOver" | "onDragLeave" | "onDrop" | "dropEffect", componentName: string) => Error | undefined;
+        frame: (props: FileDropProps, propName: "frame" | "className" | "targetClassName" | "draggingOverFrameClassName" | "draggingOverTargetClassName" | "onFrameDragEnter" | "onFrameDragLeave" | "onFrameDrop" | "onDragOver" | "onDragLeave" | "onDrop" | "onTargetClick" | "dropEffect", componentName: string) => Error | undefined;
         onFrameDragEnter: PropTypes.Requireable<(...args: any[]) => any>;
@@ -61,2 +63,3 @@ onFrameDragLeave: PropTypes.Requireable<(...args: any[]) => any>;
     handleDrop: ReactDragEventHandler<HTMLDivElement>;
+    handleTargetClick: ReactEventHandler<HTMLDivElement>;
     stopFrameListeners: (frame: HTMLDocument | undefined) => void;
@@ -63,0 +66,0 @@ startFrameListeners: (frame: HTMLDocument | undefined) => void;

FileDrop.js

@@ -83,2 +83,8 @@ "use strict";
         };
+        _this.handleTargetClick = function (event) {
+            if (_this.props.onTargetClick) {
+                _this.props.onTargetClick(event);
+            }
+            _this.resetDragging();
+        };
         _this.stopFrameListeners = function (frame) {
@@ -129,3 +135,3 @@ if (frame) {
         return (react_1.default.createElement("div", { className: className, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop },
-            react_1.default.createElement("div", { className: fileDropTargetClassName }, children)));
+            react_1.default.createElement("div", { className: fileDropTargetClassName, onClick: this.handleTargetClick }, children)));
     };
@@ -159,2 +165,3 @@ FileDrop.isIE = function () {
         onDrop: prop_types_1.default.func,
+        onTargetClick: prop_types_1.default.func,
         dropEffect: prop_types_1.default.oneOf(['copy', 'move', 'link', 'none']),
@@ -161,0 +168,0 @@ frame: function (props, propName, componentName) {

package.json

 {
   "name": "react-file-drop",
   "author": "https://sarink.net",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "Zero dependency React component for Gmail or Facebook -like drag and drop file uploader. Drag files anywhere onto the window (or user defined 'frame' prop)! Very extensible, provides many hooks so you can use it to develop any custom behavior that you desire.",
@@ -6,0 +6,0 @@ "main": "FileDrop.js",

README.md

@@ -43,2 +43,4 @@ # react-file-drop
 
+You can also define an `onTargetClick` prop if you want to let user browse their files from disk. Below you can find instruction how to do that.
+
 ## Styling
@@ -73,2 +75,4 @@
 
+`onTargetClick: function(event)`: Callback when the user clicks _anywhere_ on the target.
+
 `dropEffect - string "copy" || "move" || "link" || "none" (default: "copy")`: Learn more about [HTML5 dropEffects](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#dropEffect.28.29). Not available in IE :(
@@ -92,2 +96,49 @@
 
+## Uploading files using click handler
+
+In order to let user upload files with click on the `file-drop-target`, you will need to specify an `input[type="file"]` somewhere in your code. You will also need a ref, that will be passed to the input, to call a `click` method on it.
+
+Steps:
+
+1. Define ref for input:
+
+```javascript
+const fileInputRef = useRef(null);
+```
+
+2. Define input change handler:
+
+```javascript
+const onFileInputChange = (event) => {
+  const { files } = event.target;
+  // do something with your files...
+}
+```
+
+3. Add input to your code:
+
+```html
+<input
+  onChange={onFileInputChange}
+  ref={fileInputRef}
+  type="file"
+  className="hidden"
+/>
+```
+
+4. Define target click handler:
+
+```javascript
+const onTargetClick = () => {
+  fileInputRef.current.click()
+}
+```
+
+5. Add target click handler to `FileDrop` component:
+
+```html
+<FileDrop
+  onTargetClick={onTargetClick}
+```
+
 ## Contributing
@@ -94,0 +145,0 @@

No alert changes

Improved metrics

Total package byte prevSize

26848

increased by7.52%

Lines of code

255

increased by4.08%

Number of lines in readme file

158

increased by47.66%

No dependency changes