This content originally appeared on DEV Community and was authored by Klemen Slavič
It's 2023. We all know how annoying it is when a web app wants us to provide a file but makes it cumbersome by only letting you do that by clicking on Ye Olde <input type=file>. All modern browsers have supported a much better way to do that for a while now, and this library makes it a snap to use them in any environment, vanilla or framework.
https://github.com/krofdrakula/drop/
The Setup
Install @krofdrakula/drop in your dependencies or use https://esm.sh/@krofdrakula/drop as your module import.
Create some HTML in your page:
<div id="drop_target" style="padding:40px;border:1px solid blue;">
Drop files here.
</div>
In your JS, grab that element and pass it to the create function:
import { create } from '@krofdrakula/drop';
const dropTarget = document.body.getElementById("drop_target");
create(dropTarget, {
onDrop: (files) => console.log(files)
});
Open the page in a browser, open dev tools and drag a file into the element you created.
In React-like Components
The create() function returns a cleanup function that can be used in conjuction with useRef and useEffect to correctly set it up:
import { useRef, useEffect } from 'react';
import { create } from '@krofdrakula/drop';
const MyComponent = ({ onDrop }) => {
const dropTarget = useRef();
useEffect(() => {
// you must return the returned function for it to be
// able to clean up event handlers
return create(dropTarget.current, { onDrop });
}, [dropTarget.current, onDrop]);
return <div ref={dropTarget}>Drop files here.</div>
};
Handy Features
create takes a number of options that let you configure the behaviour of the control:
- it exposes various event handlers that let you control the element when the pointer hovers over it when dragging files or without;
- it lets you specify parser functions that allow you to convert files dropped onto the element before passing them to the
onDrophandler; - it uses the native file picker when clicking on the element by default.
Check out the demo site to see it in action, or read the README for the full Monty.
All of this in a package that fits any application's download limits.
Development
This package currently does everything I needed it to for the cases I knew it should handle. If you decide to try this out and hit a problem, let me know!
This content originally appeared on DEV Community and was authored by Klemen Slavič
Klemen Slavič | Sciencx (2023-05-04T21:36:58+00:00) Want to be able to drag files into a web app? Got ya covered.. Retrieved from https://www.scien.cx/2023/05/04/want-to-be-able-to-drag-files-into-a-web-app-got-ya-covered/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.