{"id":560,"date":"2019-02-04T23:58:28","date_gmt":"2019-02-04T23:58:28","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=560"},"modified":"2021-10-28T10:56:28","modified_gmt":"2021-10-28T15:56:28","slug":"react-dropzone-file-uploads-react","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/react-dropzone-file-uploads-react","title":{"rendered":"React Dropzone and File Uploads in React"},"content":{"rendered":"\n
\"React<\/figure>\n\n\n\n

In this tutorial, we’ll learn how to use React Dropzone to create an awesome file uploader. Keep reading to learn more about react-dropzone.<\/p>\n\n\n\n

Read part two in the React file upload series: Upload a File from a React Component<\/a><\/p><\/blockquote>\n\n\n\n

To begin, open up an existing React project. If you don’t have an existing React project that uses the react-dropzone library<\/a>, generate a new one using Create React App. I’ll show you how to do this below.<\/p>\n\n\n\n

Call the new project file-upload.<\/strong><\/p>\n\n\n\n

I’m also showing you the option to install Bootstrap, which I’ll be using in the examples throughout this tutorial. <\/p>\n\n\n\n

Terminal<\/div>
npx create-react-app file-upload\ncd<\/span> file-upload\nnpm<\/span> install<\/span> --save react-dropzone\n\n\/\/ Optional\nnpm<\/span> install<\/span> --save bootstrap<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
A Basic React Dropzone File Picker<\/h2>\n\n\n\n
We’re going to start by building a very simple file picker using React Dropzone. <\/p>\n\n\n\n
As an extra challenge, try to follow this tutorial using React Hooks. If you’re new to Hooks, I’ve written a simple introduction to React Hooks<\/a>.<\/p><\/blockquote>\n\n\n\n
Jump into App.js<\/span><\/strong> and start by removing the boilerplate code in the render function. After you’ve stripped out this unwanted code, import the React<\/strong> Dropzone <\/strong>library at the top of the file, below all of the other imports.<\/p>\n\n\n\n
Finally, add the React Dropzone component to the return of the render method, as well as an onDrop<\/em><\/strong> method above it.<\/p>\n\n\n\n
Your App.js<\/span> <\/strong>should look like this:<\/p>\n\n\n\n
App.js<\/div>
import<\/span> React,<\/span> {<\/span> Component }<\/span> from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> Dropzone from<\/span> 'react-dropzone'<\/span>\n\nclass<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\n\n  onDrop<\/span> =<\/span> (<\/span>acceptedFiles)<\/span> =><\/span> {<\/span>\n    console.<\/span>log<\/span>(<\/span>acceptedFiles)<\/span>;<\/span>\n  }<\/span>\n\n  render<\/span>(<\/span>)<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>text-center mt-5\"<\/span><\/span>><\/span><\/span>\n        <\/span><<\/span>Dropzone<\/span> onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>><\/span><\/span>\n          <\/span>{<\/span>(<\/span>{<\/span>getRootProps,<\/span> getInputProps}<\/span>)<\/span> =><\/span> (<\/span>\n            <<\/span>div {<\/span>...<\/span>getRootProps<\/span>(<\/span>)<\/span>}<\/span>><\/span>\n              <<\/span>input {<\/span>...<\/span>getInputProps<\/span>(<\/span>)<\/span>}<\/span> \/<\/span>><\/span>\n              Click me to upload a file!<\/span>\n            <\/<\/span>div<\/span>><\/span><\/span>\n          )<\/span>}<\/span>\n        <\/span><\/<\/span>Dropzone<\/span>><\/span><\/span>\n      <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    )<\/span>;<\/span>\n  }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
React Dropzone only needs one method passed into the onDrop<\/em><\/strong> prop to handle files when they’re selected. <\/p>\n\n\n\n
To keep things simple, we’ll name the method the same as the prop: onDrop<\/em><\/strong>.<\/p>\n\n\n\n
Our onDrop<\/em><\/strong> method has a single parameter, acceptedFiles<\/strong>, which for the time-being we log out to the console. This is only for testing purposes.<\/p>\n\n\n\n
Save the component, open your browser and go to your running React app. Click the text label and a file picker window will open up! Great! We’ve got a basic file picker working.<\/p>\n\n\n\n
Clicking a file to upload won’t do anything just yet. For that to work, we have to send the file to a server, which we’ll cover at a later date.<\/p>\n\n\n\n
Let’s continue to explore what else React Dropzone can do!<\/p>\n\n\n\n
Render Props<\/h2>\n\n\n\n
Dropzone may look different to other React components you’ve seen. This is because it uses the Render Props<\/em> technique.<\/p>\n\n\n\n
The Render Prop Function<\/strong> is used to change the HTML inside of the Dropzone component, based on the current state of Dropzone.<\/p>\n\n\n\n
To demonstrate, let’s add a variable to the Render Prop function called isDragActive<\/strong>. This gives us access to Dropzone’s current drag state.<\/p>\n\n\n\n
Now that we have access to the isDragActive<\/strong> state, we can change the text value of the label to show something different when a file is dragged over the component.<\/p>\n\n\n\n
App.js<\/div>
<<\/span>Dropzone<\/span> onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>><\/span><\/span>\n  <\/span>{<\/span>(<\/span>{<\/span>getRootProps,<\/span> getInputProps,<\/span> isDragActive}<\/span>)<\/span> =><\/span> (<\/span>\n    <<\/span>div {<\/span>...<\/span>getRootProps<\/span>(<\/span>)<\/span>}<\/span>><\/span>\n      <<\/span>input {<\/span>...<\/span>getInputProps<\/span>(<\/span>)<\/span>}<\/span> \/<\/span>><\/span>\n      {<\/span>isDragActive ?<\/span> \"Drop it like it's hot!\"<\/span> :<\/span> 'Click me or drag a file to upload!'<\/span>}<\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>}<\/span>\n<\/span><\/<\/span>Dropzone<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
In the code above, we’re writing an inline conditional that checks if isDragActive<\/strong> is true. If it is, write “Drop it like it’s hot”, else write, “Click me or drag a file to upload!”.<\/p>\n\n\n\n
Let’s jump back to the browser and see it in action.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Allowing Specific Types of File<\/h2>\n\n\n\n
Currently, our file picker allows us to pick any type of file to upload.<\/p>\n\n\n\n
Depending on what you’re using a file picker for, you may want to allow specific types of files, such as only .JPG files, or only .XLS and .DOCX files.<\/p>\n\n\n\n
To do this, we’ll use the accept<\/strong> prop.<\/p>\n\n\n\n
Let’s add the accept prop after onDrop<\/em><\/strong> within the Dropzone component declaration, like so:<\/p>\n\n\n\n
App.js<\/div>
<<\/span>Dropzone<\/span>\n  onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>\n  accept<\/span>=<\/span>\"<\/span>image\/png, image\/gif\"<\/span><\/span>\n><\/span><\/span>\n...\n<\/span><\/<\/span>Dropzone<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
File types are written as MIME types, with multiple values separated by a comma. Mozilla has a great resource that gives a full list of MIME types<\/a>. <\/p>\n\n\n\n
Let’s improve our file picker user experience by showing a message if the user tries to upload a file type that’s not accepted. <\/p>\n\n\n\n
To do that, we’ll add another render prop called isDragRejected<\/strong>. We’ll move around the inline conditional logic somewhat to account for this new render prop.<\/p>\n\n\n\n
App.js<\/div>
<<\/span>Dropzone<\/span>\n  onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>\n  accept<\/span>=<\/span>\"<\/span>image\/png\"<\/span><\/span>\n><\/span><\/span>\n  <\/span>{<\/span>(<\/span>{<\/span>getRootProps,<\/span> getInputProps,<\/span> isDragActive,<\/span> isDragReject}<\/span>)<\/span> =><\/span> (<\/span>\n    <<\/span>div {<\/span>...<\/span>getRootProps<\/span>(<\/span>)<\/span>}<\/span>><\/span>\n      <<\/span>input {<\/span>...<\/span>getInputProps<\/span>(<\/span>)<\/span>}<\/span> \/<\/span>><\/span>\n      {<\/span>!<\/span>isDragActive &&<\/span> 'Click here or drop a file to upload!'<\/span>}<\/span>\n      {<\/span>isDragActive &&<\/span> !<\/span>isDragReject &&<\/span> \"Drop it like it's hot!\"<\/span>}<\/span>\n      {<\/span>isDragReject &&<\/span> \"File type not accepted, sorry!\"<\/span>}<\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>}<\/span>\n<\/span><\/<\/span>Dropzone<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Save the file, hop on back to your browser and try to drag a .JPG file onto the file picker.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
A message appears letting the user know that our file picker doesn’t accept that type of file. Perfect!<\/p>\n\n\n\n
Minimum and Maximum File Size<\/h2>\n\n\n\n
Specifying the minimum and maximum file size is very important. In a real world file uploader, you wouldn’t want one of your users dragging in a 1GB file to upload, and crippling your server.<\/p>\n\n\n\n
Luckily we can limit the size of the file that’s being uploaded in React Dropzone through two props, minSize and maxSize. <\/strong>Both of these props take a number value specified in bytes.<\/p>\n\n\n\n
For your reference, 1 Megabyte = 1048576 Bytes. <\/p><\/blockquote>\n\n\n\n
Jump back into your code, and add the two minSize and maxSize props to the Dropzone component, right underneath the accept prop.<\/p>\n\n\n\n
App.js<\/div>
<<\/span>Dropzone<\/span>\n  onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>\n  accept<\/span>=<\/span>\"<\/span>image\/png\"<\/span><\/span>\n  minSize<\/span>=<\/span>{<\/span>0<\/span>}<\/span><\/span>\n  maxSize<\/span>=<\/span>{<\/span>5242880<\/span>}<\/span><\/span>\n><\/span><\/span>\n  ...\n<\/span><\/<\/span>Dropzone<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
We’re accepting a file with a maximum size of 5MB and under in the example above.<\/p>\n\n\n\n
Let’s add some more code to our file input component that checks the maximum file size and displays an error message if the file being uploaded is larger.<\/p>\n\n\n\n
App.js<\/div>
render<\/span>(<\/span>)<\/span> {<\/span>\n  const<\/span> maxSize =<\/span> 1048576<\/span>;<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>text-center mt-5\"<\/span><\/span>><\/span><\/span>\n      <\/span><<\/span>Dropzone<\/span>\n        onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>\n        accept<\/span>=<\/span>\"<\/span>image\/png\"<\/span><\/span>\n        minSize<\/span>=<\/span>{<\/span>0<\/span>}<\/span><\/span>\n        maxSize<\/span>=<\/span>{<\/span>maxSize}<\/span><\/span>\n      ><\/span><\/span>\n        <\/span>{<\/span>(<\/span>{<\/span>getRootProps,<\/span> getInputProps,<\/span> isDragActive,<\/span> isDragReject,<\/span> rejectedFiles}<\/span>)<\/span> =><\/span> {<\/span>\n          const<\/span> isFileTooLarge =<\/span> rejectedFiles.<\/span>length ><\/span> 0<\/span> &&<\/span> rejectedFiles[<\/span>0<\/span>]<\/span>.<\/span>size ><\/span> maxSize;<\/span>\n          return<\/span> (<\/span>\n            <<\/span>div {<\/span>...<\/span>getRootProps<\/span>(<\/span>)<\/span>}<\/span>><\/span>\n              <<\/span>input {<\/span>...<\/span>getInputProps<\/span>(<\/span>)<\/span>}<\/span> \/<\/span>><\/span>\n              {<\/span>!<\/span>isDragActive &&<\/span> 'Click here or drop a file to upload!'<\/span>}<\/span>\n              {<\/span>isDragActive &&<\/span> !<\/span>isDragReject &&<\/span> \"Drop it like it's hot!\"<\/span>}<\/span>\n              {<\/span>isDragReject &&<\/span> \"File type not accepted, sorry!\"<\/span>}<\/span>\n              {<\/span>isFileTooLarge &&<\/span> (<\/span>\n                <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>text-danger mt-2\"<\/span><\/span>><\/span><\/span>\n                  File is too large.\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n              )<\/span>}<\/span>\n            <\/<\/span>div<\/span>><\/span><\/span>\n          )<\/span>}<\/span>\n        }<\/span>\n      <\/span><\/<\/span>Dropzone<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
It might look like we’ve added a lot, but actually it’s less than 10 lines.<\/p>\n\n\n\n
  • At the top of the render method, we declare a new const called maxSize<\/strong> and set it to 1MB.<\/li>
  • Reference this new maxSize variable in the maxSize prop within Dropzone.<\/li>
  • We add another render prop to Dropzone called rejectedFiles<\/strong><\/li>
  • Directly underneath the render prop function within Dropzone, we declare another const called isFileTooLarge<\/strong>, which gets the first file from the rejectedFiles array prop, and checks to see if the size is greater than our maxSize variable.<\/li>
  • Finally, we’re writing an inline conditional that checks if isFileTooLarge is true, and renders ‘File is too large.’ in red.<\/li><\/ul>\n\n\n\n
    Let’s see it in action!<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Multiple Files<\/h2>\n\n\n\n
    The last feature of React Dropzone that we’ll cover is the ability to upload multiple files.<\/p>\n\n\n\n
    This one is fairly simple, as we’re not adding any code inside the render prop function.<\/p>\n\n\n\n
    Just add the multiple<\/strong> prop to the React Dropzone component declaration, like so:<\/p>\n\n\n\n
    App.js<\/div>
    <<\/span>Dropzone<\/span>\n  onDrop<\/span>=<\/span>{<\/span>this<\/span>.<\/span>onDrop}<\/span><\/span>\n  accept<\/span>=<\/span>\"<\/span>image\/png\"<\/span><\/span>\n  minSize<\/span>=<\/span>{<\/span>0<\/span>}<\/span><\/span>\n  maxSize<\/span>=<\/span>{<\/span>maxSize}<\/span><\/span>\n  multiple<\/span>\n><\/span><\/span>\n  ...\n<\/span><\/<\/span>Dropzone<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
    React Dropzone using Hooks<\/h2>\n\n\n\n
    Since writing this tutorial React Hooks have been officially released, and the react-dropzone library has been updated to include a custom useDropzone<\/em><\/strong> Hook.<\/p>\n\n\n\n
    Therefore, I’ve re-written the whole App.js <\/span><\/strong>as a functional component using the useDropzone<\/em><\/strong> custom hook provided by react<\/g> dropzone:<\/p>\n\n\n\n
    App.js<\/div>
    import<\/span> React,<\/span> {<\/span> useCallback }<\/span> from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> {<\/span> useDropzone }<\/span> from<\/span> 'react-dropzone'<\/span>\n\nconst<\/span> App<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>\n  const<\/span> maxSize =<\/span> 1048576<\/span>;<\/span>\n\n  const<\/span> onDrop =<\/span> useCallback<\/span>(<\/span>acceptedFiles =><\/span> {<\/span>\n    console.<\/span>log<\/span>(<\/span>acceptedFiles)<\/span>;<\/span>\n  }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span>\n\n  const<\/span> {<\/span> isDragActive,<\/span> getRootProps,<\/span> getInputProps,<\/span> isDragReject,<\/span> acceptedFiles,<\/span> rejectedFiles }<\/span> =<\/span> useDropzone<\/span>(<\/span>{<\/span>\n    onDrop,<\/span>\n    accept:<\/span> 'image\/png'<\/span>,<\/span>\n    minSize:<\/span> 0<\/span>,<\/span>\n    maxSize,<\/span>\n  }<\/span>)<\/span>;<\/span>\n\n  const<\/span> isFileTooLarge =<\/span> rejectedFiles.<\/span>length ><\/span> 0<\/span> &&<\/span> rejectedFiles[<\/span>0<\/span>]<\/span>.<\/span>size ><\/span> maxSize;<\/span>\n  \n  return<\/span> (<\/span>\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>container text-center mt-5\"<\/span><\/span>><\/span><\/span>\n      <div <\/span>{<\/span>...<\/span>getRootProps<\/span>(<\/span>)<\/span>}<\/span>>\n        <input <\/span>{<\/span>...<\/span>getInputProps<\/span>(<\/span>)<\/span>}<\/span> \/>\n        <\/span>{<\/span>!<\/span>isDragActive &&<\/span> 'Click here or drop a file to upload!'<\/span>}<\/span>\n        <\/span>{<\/span>isDragActive &&<\/span> !<\/span>isDragReject &&<\/span> \"Drop it like it's hot!\"<\/span>}<\/span>\n        <\/span>{<\/span>isDragReject &&<\/span> \"File type not accepted, sorry!\"<\/span>}<\/span>\n        <\/span>{<\/span>isFileTooLarge &&<\/span> (<\/span>\n          <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>text-danger mt-2\"<\/span><\/span>><\/span><\/span>\n            File is too large.\n          <\/span><\/<\/span>div<\/span>><\/span><\/span>\n        )<\/span>}<\/span>\n      <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>;<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
    Showing a List of Accepted Files<\/h2>\n\n\n\n
    One nice touch we could add to our react dropzone component is to see a list of accepted files before we upload them. It’s a nice bit of UX that goes a long way to adding to the experience.<\/p>\n\n\n\n
    The useDropzone Hook provides us a variable, a<\/strong>cceptedFiles<\/strong>, which is an array of File objects. We could map through that array and display a list of all the files that are ready to be uploaded:<\/p>\n\n\n\n
    ...<\/span>\n\n<<\/span>ul<\/span> className<\/span>=<\/span>\"<\/span>list-group mt-2\"<\/span><\/span>><\/span><\/span>\n  <\/span>{<\/span>acceptedFiles.<\/span>length ><\/span> 0<\/span> &&<\/span> acceptedFiles.<\/span>map<\/span>(<\/span>acceptedFile =><\/span> (<\/span>\n    <<\/span>li<\/span> className<\/span>=<\/span>\"<\/span>list-group-item list-group-item-success\"<\/span><\/span>><\/span><\/span>\n      <\/span>{<\/span>acceptedFile.<\/span>name}<\/span>\n    <\/span><\/<\/span>li<\/span>><\/span><\/span>\n  )<\/span>)<\/span>}<\/span>\n<\/span><\/<\/span>ul<\/span>><\/span><\/span>\n\n...<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
    \"A<\/figure>\n\n\n\n
    Wrapping Up<\/h2>\n\n\n\n
    There you have it! A simple file picker component built using React Dropzone. If you enjoyed the tutorial or ran into any issues, don’t forget to leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In this tutorial, we’ll learn how to use React Dropzone to create an awesome file uploader. Keep reading to learn more about react-dropzone.<\/p>\n","protected":false},"author":8,"featured_media":600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[33,40,4,41],"class_list":["post-560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-beginner-react-tutorials","tag-popular-tutorials","tag-react","tag-react-file-upload"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":3,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"predecessor-version":[{"id":3353,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/560\/revisions\/3353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/600"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}