{"id":28330,"date":"2022-04-28T14:40:14","date_gmt":"2022-04-28T14:40:14","guid":{"rendered":"http:\/\/implement-drag-and-drop-for-media-upload-with-react"},"modified":"2022-04-28T14:40:14","modified_gmt":"2022-04-28T14:40:14","slug":"implement-drag-and-drop-for-media-upload-with-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/","title":{"rendered":"Implement Drag and Drop for Media Upload in React"},"content":{"rendered":"

Media uploading has transitioned from conventional clicking and uploading to drag and drop functionality. Most companies are now moving to this new trend for a better user experience. In this tutorial, we will be implementing a drag and drop functionality in a react application.<\/p>\n

Setup<\/h2>\n

First, we need to create our react application. To do that, Make sure you have Nodejs<\/a> and npm installed then paste the code below into the terminal.<\/p>\n

npx create-react-app media-upload\n<\/code><\/span><\/pre>\n
Install the react-dropzone package, which will help us implement the drag and drop functionality.  To install the package, run the code below.<\/p>\n
npm install react-dropzone\n<\/code><\/span><\/pre>\n
Create a Dropzone<\/h2>\n
After setting up our project and installing the react-dropzone<\/code> package, the next is to import the package into our App.js. We will be importing the useDropzone<\/code> hook from the package and calling it inside our component. To do that, paste the code snippet below.<\/p>\n
import<\/span> React from<\/span> 'react'<\/span>;\nimport<\/span> { useDropzone } from<\/span> 'react-dropzone'<\/span>;\n    \nfunction<\/span> App<\/span>(<\/span>) <\/span>{\nconst<\/span> {\n  getRootProps,\n  getInputProps,\n  isDragActive,\n} = useDropzone({ onDrop });\n    \nreturn<\/span> (\n       ...\n);\n}\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
useDropZone<\/code> hook gives us access to the properties for handling dropping a file. It also takes a config object, and one of the properties in the config object is the onDrop function called after the file is dropped in the dropzone.<\/p>\n
useDropZone<\/code> returns  getRootProps<\/code>, getInputProps<\/code>, isDragActive<\/code> which we can call to get the Drag and Drop API properties and pass those to our elements.<\/p>\n
This is what the dropzone input and root should look like:<\/p>\n
<div<\/span> {...getRootProps<\/span>()}><\/span>\n  <input<\/span> {...getInputProps<\/span>()} \/><\/span>\n    <!-- Any content you want to show on the drop zone --><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The getRootProps<\/code> sets drag and drop API properties on the chosen root. Here is what the properties look like:<\/p>\n
\"\"<\/p>\n
These events allow your browser to listen to users\u2019 drag and drop interactions.<\/p>\n
The getInputProps<\/code> is like getRootProps<\/code> but attaches events and properties to an input. It will do things like setting the input type to file and also attaching the onChange<\/code> event handler. Here are the properties:<\/p>\n
\"\"<\/p>\n
The isDragActive<\/code> is a boolean value that is true if we are dragging a file over the Dropzone but false if not. To add the isDragActive<\/code> function paste the code below in after the input tag.<\/p>\n
{isDragActive ? (\n  <p<\/span> className<\/span>=\"text-center text-xl\"<\/span>><\/span>Drop your media files here<\/p<\/span>><\/span>\n) : (\n  <p<\/span> className<\/span>=\"text-center text-xl\"<\/span>><\/span>\n    Drag and drop some files here, or click to select files\n  <\/p<\/span>><\/span>\n)}\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now that we have added the useDropZone<\/code> properties to our JSX. we will define our callback function. Remember we mentioned that onDrop<\/code> is the callback function called when a file is dropped on the drop zone. Paste the code below to define the function.<\/p>\n
const<\/span> onDrop = React.useCallback((acceptedFiles<\/span>) =><\/span> {\n  console<\/span>.log(acceptedFiles);\n}, []);\n    \nconst<\/span> {\n  getRootProps,\n  getInputProps,\n  isDragActive,\n} = useDropzone({ onDrop });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The onDrop<\/code> function passed to the hook receives an argument containing the information about the updated file. Here, we can upload the file to a cloud, preview the file, and more. Wrapped the function with useCallback<\/code> to ensure that it does not trigger unnecessary re-renders.<\/p>\n
How to add extra properties to the drop zone<\/h2>\n
Suppose we want to set props on elements with either the getRootProps<\/code> or getInputProps<\/code>. In that case, we need to put them as an argument to those functions to avoid overriding things unexpectedly.<\/p>\n
So instead of this:<\/p>\n
<div<\/span> {...getRootProps<\/span>()} role<\/span>=\"button\"<\/span>><\/span>\n  <input<\/span> {...getInputProps<\/span>()} \/><\/span>\n    <!-- Any content you want to show on the drop zone --><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Do this:<\/p>\n
<div<\/span> {...getRootProps<\/span>({\n  role:<\/span> 'button<\/span>'\n})}><\/span>\n  <input<\/span> {...getInputProps<\/span>()} \/><\/span>\n    <!-- Any content you want to show on the drop zone --><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Validate the Dropped Files<\/h2>\n
The useDropzone<\/code> has some predefined props for validations. It has the accept props, maxFiles props, and many others. It can also accept a defined validation function as props if we choose not to use the predefined functions. The accept props disallows files not included in the accept<\/code> list. Hence we can only select files that are listed. In the snippet below, we can only upload png and jpeg files.<\/p>\n
useDropzone<\/span>({\n  accept<\/span>: 'image\/jpeg,image\/png'<\/span>\n});\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
maxFiles<\/code>  defines the maximum number of files that can be uploaded. If the validation fails, we will get an empty array in the onDrop<\/code> callback.<\/p>\n
useDropzone<\/span>({    \n  maxFiles<\/span>: 2<\/span>\n});\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
To show the actual error, we can inspect the fileRejections<\/code> from useDropzone<\/code>.<\/p>\n
const<\/span> {\n  fileRejections, \/\/ Error files<\/span>\n  getRootProps,\n  getInputProps,\n  isDragActive,\n} = useDropzone({\n  onDrop,\n  accept<\/span>: 'image\/jpeg,image\/png'<\/span>,\n  maxFiles<\/span>: 2<\/span>,\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
To display the error message using the fileRejections<\/code> ,You can iterate through the rejected files and render the errors.<\/p>\n
Paste the code below to display the errors:<\/p>\n
{fileRejections.map(({ file, errors }<\/span>) =><\/span> {\n  return<\/span> (\n    <li<\/span> key<\/span>={file.path}<\/span>><\/span>\n      {file.path} - {file.size} bytes\n      <ul<\/span>><\/span>\n        {errors.map((e) => (\n          <li<\/span> key<\/span>={e.code}<\/span>><\/span>{e.message}<\/li<\/span>><\/span>\n        ))}\n      <\/ul<\/span>><\/span>\n    <\/li<\/span>><\/span><\/span>\n  );\n})}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
We can also do all sorts of flexible and custom  validations and not just limited to what is allowed as an argument to the useDropzone<\/code> hook. Here is an example showing how to validate for max size for each file:<\/p>\n
\/\/ Validate that the file size is less than 2mb<\/span>\n\nfunction<\/span> fileSizeValidator<\/span>(file<\/span>) <\/span>{\n  if<\/span> (file.size > 1024<\/span> ** 2<\/span> * 2<\/span>) {\n    return<\/span> {\n      code<\/span>: 'size-too-large'<\/span>,\n      message<\/span>: `File is larger than 2mb`<\/span>,\n    };\n  }\n  return<\/span> null<\/span>;\n}\n    \nconst<\/span> onDrop = React.useCallback((acceptedFiles<\/span>) =><\/span> {\n  console<\/span>.log(acceptedFiles);\n}, []);\n    \nconst<\/span> {\n  fileRejections,\n  getRootProps,\n  getInputProps,\n  isDragActive,\n} = useDropzone({\n  onDrop,\n  \/\/ Pass validator to useDropzone<\/span>\n  validator<\/span>: fileSizeValidator,\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
In the code snippet above, we wrote a custom validation function, fileSizeValidator<\/code>, that validates the maximum size of each file upload. We then added it as the validator value in the useDropzone<\/code> hook.<\/p>\n
Preview image<\/h2>\n
To preview images, use URL.createObjectURL<\/code> and pass the file object as an argument to it. Before we do that, create a state to store the file object:<\/p>\n
const<\/span> [files, setFiles] = React.useState([]);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the onDrop<\/code> function, use the createObjectURL<\/code> to generate a preview and attach the preview to the file object:<\/p>\n
const<\/span> onDrop = React.useCallback((acceptedFiles<\/span>) =><\/span> {\n  console<\/span>.log(acceptedFiles);\n  setFiles(\n    acceptedFiles.map((file<\/span>) =><\/span>\n      Object<\/span>.assign(file, {\n        preview<\/span>: URL.createObjectURL(file),\n      })\n    )\n  );\n}, []);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Finally loop through the files and display a preview using an image tag if they are images:<\/p>\n
{files.map(f<\/span> =><\/span> {\n  return<\/span> (<img<\/span> src<\/span>={f.preview}<\/span> \/><\/span><\/span>)\n})}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Upload to cloudinary with unsigned upload<\/h2>\n
You can upload the files directly from the browser using Cloudinary Unsigned Upload<\/a>. Add a button to upload whatever you have in the state:<\/p>\n
\/\/ If files are in the state, upload the first item in the array of files<\/span>\n\n{files.length > 0<\/span> && (\n  <button\n    onClick={() => {\n    const<\/span> url =\n      'https:\/\/api.cloudinary.com\/v1_1\/codebeast\/image\/upload'<\/span>;\n    const<\/span> formData = new<\/span> FormData();\n      \/\/ Use the first item to upload<\/span>\n      let file = files[0<\/span>];\n      formData.append('file'<\/span>, file);\n      formData.append('upload_preset'<\/span>, 's9n5tgkf'<\/span>);\n      fetch(url, {\n        method: 'POST'<\/span>,\n        body: formData,\n      })\n        .then((response) => {\n          return<\/span> response.json();\n        })\n        .then((data) => {\n          console.log(data);\n        });\n    }}\n  >\n    Upload\n<\/button>\n)}\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
Conclusion<\/h2>\n
Implementing such a fantastic user experience feature in our React application should now be a thing of the past. This tutorial covered almost all critical areas from validations, upload, and error handling. I hope this tutorial is helpful. Don\u2019t forget to check the official documentation of React Dropzone<\/a> to explore further and add more features to your app. The complete source code for this tutorial is available on Codesandbox<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28331,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371],"class_list":["post-28330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nImplement Drag and Drop for Media Upload in React<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implement Drag and Drop for Media Upload in React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-28T14:40:14+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Implement Drag and Drop for Media Upload in React\",\"datePublished\":\"2022-04-28T14:40:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\",\"name\":\"Implement Drag and Drop for Media Upload in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA\",\"datePublished\":\"2022-04-28T14:40:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA\",\"width\":1422,\"height\":687},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implement Drag and Drop for Media Upload in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Implement Drag and Drop for Media Upload in React","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/","og_locale":"en_US","og_type":"article","og_title":"Implement Drag and Drop for Media Upload in React","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-28T14:40:14+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/"},"author":{"name":"","@id":""},"headline":"Implement Drag and Drop for Media Upload in React","datePublished":"2022-04-28T14:40:14+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/","name":"Implement Drag and Drop for Media Upload in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA","datePublished":"2022-04-28T14:40:14+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA","width":1422,"height":687},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-for-media-upload-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implement Drag and Drop for Media Upload in React"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924801\/Web_Assets\/blog\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2\/e59b1635df7179721f22437b8dee8772b951db19-1422x687-1_283312b4f2.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28330"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28330\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28331"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}