Paste to Upload in React
Since I first blogged about the release of React-Uploady last year, the library has gained a substantial user-base, several hundred stars on Github (if you haven’t starred, you know what to do ⭐️️), and thousands of downloads a month.
As Uploady moves toward a 1.0.0 release, I’m happy to say that its API is, and has been, stable for quiet a while. As such I don’t foresee breaking changes moving forward.
In this post I do want to share the latest package to join the ranks of useful components, hooks, and utilities that Uploady brings to the table — rpldy/upload-paste. Making it trivial to initiate an upload from the paste event.
Whatsapp Web is a great example of paste-to-upload in action. You can click a button to open the file-selection dialog, drag&drop a file to start uploading, or simply copy a file to your clipboard and paste it while focused on the UI. Doing so will initiate the upload flow, which is very convenient.
Now you can add paste-to-upload to your React app with ease. @rpldy/upload-paste provides a HOC (higher-order-component) as well as a custom hook to enable this with your own components, requiring only a few lines of code.
Code for the above example can be found in this sandbox:
Code Time
Let’s take a look at an example that combines both Uploady’s drag&drop and the new paste-to-upload functionality. The result is a very nice user experience, where the user can initiate upload in multiple ways.
The code above uses UploadDropZone (from @rpldy/upload-drop-zone) and wraps it with the withPasteUpload HOC. That’s really all there is to it. Our new component — PasteUploadDropZone — now accepts files either by dropping or by pasting.
withPasteUpload can wrap just about any React component. The resulting component accepts a few basic props (id, classname) and a special prop called extraProps. This prop (an object) can contain any other prop you wish to pass to the underlying component that was wrapped. This is important because the new component will also accept all of the usual Uploady options (ex: autoUpload, params, etc.) as can be seen above.
But wait, there’s more… A custom hook!
In case you’d like to enable paste-to-upload over the entire page or a custom element, usePasteUpload is for you.
The code above shows how the custom hook can be used to enable paste-to-upload on a specific element.
All parameters of the hook function are optional.
The first parameter is the Upload Options object you can pass to override/merge with the props passed to the <Uploady> provider earlier in your app.
The second parameter is an element ref. In case the ref is omitted, the hook will listen to the paste event on the global object (window).
The third parameter is a function that will be called after upload is initiated by a paste event. It is given an object with the shape: { count: number }. Count is the number of files pasted.
The hook returns an object with two methods: toggle & getIsEnabled. The former will toggle the listener so you can control the paste listening without having to unmount. the latter, as its name indicates, returns true if the listener is active and false if not.
React-Uploady’s mission is to make it as simple as possible to add file-upload functionality to React applications. It does so while also providing plenty of customization and extensibility options. Therefore, I think the new upload-paste package fits in nicely with the existing Uploady functionality.
Give it a try, and I’d love to hear about your experience.
