Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-file-drop
Advanced tools
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 des
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 a hook for every event so you can use it to develop any custom behavior that you want.
https://sarink.github.io/react-file-drop - A very simple live demo with example code and sample CSS
I wanted that behavior that facebook, gmail, etc. have where a part of the page highlights immediately when you start dragging a file anywhere on the window. I couldn't find any React component that already did this, so, I made one!
None! (well, just prop-types
, but that should already be removed from your prod bundle anyway)
✅ Chrome
✅ Firefox
✅ Safari
✅ IE 11
✅ IE Edge
npm install --save react-file-drop
import { FileDrop } from 'react-file-drop'
First, you define the frame
prop (default is the document
), whenever the user begins dragging file(s) anywhere over this frame, the target
will get a file-drop-dragging-over-frame
class name, and the onFrameDragEnter
callback will fire.
Next, define an onDrop
prop, whenever a user drops their files onto the target
, this callback will be triggered.
Lastly, you'll need to style it.
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.
By default, the component comes with no styles. You can grab the demo CSS to get started.
For custom class names (if you're using something like JSS) you can use the following props:
className
targetClassName
draggingOverFrameClassName
draggingOverTargetClassName
.file-drop
: The outer container element
.file-drop > .file-drop-target
: This is the target the user has to drag their files to.
.file-drop > .file-drop-target.file-drop-dragging-over-frame
: This class will be added to the target
whenever the user begins dragging a file over the frame
, and it will be removed when they leave
.file-drop > .file-drop-target.file-drop-dragging-over-target
: This class will be added to the target
whenever the user begins dragging a file over the target
, and it will be removed when they leave
onDrop: function(files, event)
: Callback when the user drops files onto the target
onDragOver: function(event)
: Callback when the user is dragging over the target. Also adds the file-drop-dragging-over-target
class to the file-drop-target
.
onDragLeave: function(event)
: Callback when the user leaves the target. Removes the file-drop-dragging-over-target
class from the file-drop-target
.
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. Not available in IE :(
frame: document || HTMLElement (default: document)
: This is the scope or "frame" that the user must drag some file(s) over to kick things off.
onFrameDragEnter: function(event)
: Callback when the user begins dragging over the frame
.
onFrameDragLeave: function(event)
: Callback when the user stops dragging over the frame
.
onFrameDrop: function(event)
: Callback when the user drops files anywhere over the frame
.
className: string (default: "file-drop")
: Class given to the outer container div.
targetClassName: string (default: "file-drop-target")
: Class given to the target div.
draggingOverFrameClassName: string (default: "file-drop-dragging-over-frame")
: Class given to the target div when file is being dragged over frame.
draggingOverTargetClassName: string (default: "file-drop-dragging-over-target")
: Class given to the target div when file is being dragged over target.
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:
const fileInputRef = useRef(null);
const onFileInputChange = (event) => {
const { files } = event.target;
// do something with your files...
}
<input
onChange={onFileInputChange}
ref={fileInputRef}
type="file"
className="hidden"
/>
const onTargetClick = () => {
fileInputRef.current.click()
}
FileDrop
component:<FileDrop
onTargetClick={onTargetClick}
Your PRs are welcome! To run the app locally:
nvm use # Probably optional, but it can't hurt
cd file-drop
npm install
npm start
cd demo
npm install
npm start
Now both the apps are running in watch mode. If you make a change to the file-drop code, you should see the demo code automatically rebuild and update in your browser.
FAQs
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 des
The npm package react-file-drop receives a total of 22,572 weekly downloads. As such, react-file-drop popularity was classified as popular.
We found that react-file-drop demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.