{"id":28239,"date":"2023-05-30T07:00:00","date_gmt":"2023-05-30T14:00:00","guid":{"rendered":"http:\/\/how-to-upload-multiple-images-at-once-in-react"},"modified":"2025-11-26T21:34:02","modified_gmt":"2025-11-27T05:34:02","slug":"how-to-upload-multiple-images-at-once-in-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react","title":{"rendered":"How to Upload Multiple Images at Once in React"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Ever implemented an upload file feature with React using an npm package, but it doesn\u2019t have options for selecting multiple images? In this article, we\u2019ll solve that challenge by implementing a simple React app where users can select multiple images.<\/p>\n<h2>Prerequisites<\/h2>\n<p>You should have:<\/p>\n<ul>\n<li>Knowledge of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/A_re-introduction_to_JavaScript\">JavaScript<\/a> and React <a href=\"https:\/\/beta.reactjs.org\/learn\">basics<\/a>.<\/li>\n<li>Node &gt;=v14 installed.<\/li>\n<\/ul>\n<p>The complete project is set up on Codesandbox below. Click the button in the sandbox to launch and get started with your React multiple image upload project.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/inspiring-worker-y9vzx1?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"inspiring worker\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Getting Started<\/h2>\n<p>Let\u2019s start by bootstrapping a new React project with create-react-app. Run the command below to do this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-id\">#bash<\/span>\n<span class=\"hljs-selector-tag\">npx<\/span> <span class=\"hljs-selector-tag\">create-react-app<\/span> <span class=\"hljs-selector-tag\">upload-multiple-images<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When it\u2019s done installing, run these commands in your terminal to start the React app.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-id\">#bash<\/span>\n<span class=\"hljs-selector-tag\">cd<\/span> <span class=\"hljs-selector-tag\">upload-multiple-images<\/span>\n<span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">run<\/span> <span class=\"hljs-selector-tag\">start<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The app should start at <code>http:localhost:3000<\/code>.<\/p>\n<p>Navigate to the <code>src<\/code> directory and delete all the files except <code>index.js<\/code>, <code>App.js<\/code>, and <code>index.css<\/code>. This will break the React app that\u2019s running but we\u2019ll fix that soon.<\/p>\n<p>Update the <code>index.js<\/code> with the code snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/index.js<\/span>\n<span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> ReactDOM <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-dom\/client'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/index.css'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> App <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/App'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> root = ReactDOM.createRoot(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'root'<\/span>));\n  root.render(\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">React.StrictMode<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">App<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">React.StrictMode<\/span>&gt;<\/span><\/span>\n  );\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In this project, we\u2019ll use <code>react-bootstrap<\/code> components, so head to your terminal and run the following commands to install the packages.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-id\">#bash<\/span>\n<span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-selector-tag\">react-bootstrap<\/span> <span class=\"hljs-selector-tag\">bootstrap<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>If you\u2019ve gotten to this point, you\u2019re awesome!<\/p>\n<h2>Creating Mock Data<\/h2>\n<p>For this project, we\u2019ll use some mock images to demonstrate multiple selections. Go ahead and create a <code>mock.js<\/code> file at the root directory.<\/p>\n<p>Paste this code snippet in <code>mock.js<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/mock.js<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> mockData = &#91;\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1653325532801-20505a866e9d?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1534353436294-0dbd4bdac845?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1471897488648-5eae4ac6686b?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1653325297180-2ba1b7e34215?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=379\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1652534603944-2ebdf360d6c7?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=725\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1653349859617-48672bdfa490?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=423\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1653356677409-27ecda2dcba4?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1653359406652-843d58aec2c8?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">src<\/span>: <span class=\"hljs-string\">\"https:\/\/images.unsplash.com\/photo-1653376774810-a81964615abb?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=80&amp;raw_url=true&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=391\"<\/span>,\n    }\n]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now we\u2019ve created our mock data, let\u2019s go ahead and make use of the data in our <code>App<\/code> component.<\/p>\n<h2>Implementing Component UI<\/h2>\n<p>Let\u2019s create a simple image grid UI.<\/p>\n<p>Navigate to <code>App.js<\/code> and add the code snippet below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/App.js<\/span>\n    \n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'bootstrap\/dist\/css\/bootstrap.min.css'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Container, Col, Row, Image } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-bootstrap'<\/span>\n<span class=\"hljs-keyword\">import<\/span> { mockData } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/mock'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> handleClick = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> { }\n<span class=\"hljs-keyword\">return<\/span> (\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Container<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Row<\/span>&gt;<\/span>\n      {mockData.map((data, index) =&gt; (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Col<\/span> <span class=\"hljs-attr\">md<\/span>=<span class=\"hljs-string\">{4}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{index}<\/span> &gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"img-card\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> handleClick(data.src)}&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">width:<\/span> '<span class=\"hljs-attr\">300px<\/span>', <span class=\"hljs-attr\">height:<\/span> \"<span class=\"hljs-attr\">300px<\/span>\" }} <span class=\"hljs-attr\">thumbnail<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{data.src}<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Col<\/span>&gt;<\/span>\n      )\n     )}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Row<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Container<\/span>&gt;<\/span><\/span>\n);\n}\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Let\u2019s break down the code snippet into chunks.<\/p>\n<p>First, we\u2019ll import bootstrap css so we can use bootstrap styles with our <code>react-bootstrap<\/code> components.<\/p>\n<p>Next, we\u2019ll import react-bootstrap components, and use them in the template.<\/p>\n<p>We also imported the mock data and used it in templates.<\/p>\n<p>There\u2019s also a <code>handleClick()<\/code> function we\u2019ll work on in the next section.<\/p>\n<p>Let\u2019s also use some custom css styles. Go to <code>index.css<\/code> and add these lines of code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/index.css<\/span>\n    \nbody {\n    <span class=\"hljs-attr\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n    font-family: -apple-system, BlinkMacSystemFont, <span class=\"hljs-string\">'Segoe UI'<\/span>, <span class=\"hljs-string\">'Roboto'<\/span>, <span class=\"hljs-string\">'Oxygen'<\/span>,\n      <span class=\"hljs-string\">'Ubuntu'<\/span>, <span class=\"hljs-string\">'Cantarell'<\/span>, <span class=\"hljs-string\">'Fira Sans'<\/span>, <span class=\"hljs-string\">'Droid Sans'<\/span>, <span class=\"hljs-string\">'Helvetica Neue'<\/span>,\n      sans-serif;\n    -webkit-font-smoothing: antialiased;\n     -moz-osx-font-smoothing: grayscale;\n}\n      \n.img-checked {\n  <span class=\"hljs-attr\">padding<\/span>: <span class=\"hljs-number\">10<\/span>px;\n  width: <span class=\"hljs-number\">300<\/span>px;\n  background: rgb(<span class=\"hljs-number\">49<\/span>, <span class=\"hljs-number\">132<\/span>, <span class=\"hljs-number\">199<\/span>);\n  color: white;\n  border-radius: <span class=\"hljs-number\">20<\/span>px;\n  font-weight: bolder;\n  position: relative;\n  <span class=\"hljs-comment\">\/* margin-top: 2px ; *\/<\/span>\n}\n.img-card{\n  <span class=\"hljs-attr\">border<\/span>: <span class=\"hljs-number\">3<\/span>px solid rgb(<span class=\"hljs-number\">95<\/span>, <span class=\"hljs-number\">95<\/span>, <span class=\"hljs-number\">95<\/span>);\n  margin: <span class=\"hljs-number\">10<\/span>px;\n  width: <span class=\"hljs-number\">300<\/span>px;\n}\n.img-card:hover {\n  <span class=\"hljs-attr\">border<\/span>: <span class=\"hljs-number\">2<\/span>px solid red;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Run the app with <code>npm run start<\/code>  and navigate to your browser. You should have something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_24EFF65CC905ECF742E2B13A12856CE202607F24D98C9BEBD998925BCDAAB3F6_1656945833924_file.png\" alt=\"Image showing example of web page created with image upload React JS\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1440\" height=\"978\"\/><\/p>\n<p>Awesome. Let\u2019s now go ahead to implement select functionality.<\/p>\n<h2>Implementing Multiple Select Functionality<\/h2>\n<p>After displaying the image gallery, we\u2019ll create a hover event for marking images that will be uploaded. Navigate to the <code>App``.js<\/code> file and update with the following lines of code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/App.js<\/span>\n...\nimport { useState } from <span class=\"hljs-string\">'react'<\/span>\n...\n    \n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> &#91;allImages, setAllImages] = useState(&#91;]);\n  <span class=\"hljs-keyword\">const<\/span> handleClick = async (source) =&gt; {\n    <span class=\"hljs-keyword\">const<\/span> check = allImages.includes(source)\n    <span class=\"hljs-keyword\">if<\/span> (check) {\n      <span class=\"hljs-keyword\">const<\/span> id = allImages.indexOf(source)\n        let newArr = allImages\n        newArr.splice(id, <span class=\"hljs-number\">1<\/span>)\n          setAllImages(&#91;...newArr])\n    } <span class=\"hljs-keyword\">else<\/span> {\n      allImages.push(sourc)\n      setAllImages(&#91;...allImages])\n    }\n  }\n\n<span class=\"hljs-keyword\">return<\/span> (\n    ...\n  &lt;div className=<span class=\"hljs-string\">\"img-card\"<\/span> onClick={() =&gt; handleClick(data.src)}&gt;\n    ....\n  {allImages.includes(data.src) ?\n    &lt;div className=<span class=\"hljs-string\">\"img-checked\"<\/span> &gt;Selected&lt;\/div&gt;\n      : <span class=\"hljs-keyword\">null<\/span>}\n    &lt;\/div&gt;\n)\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The above code snippets include some state variables.<\/p>\n<ul>\n<li>\n<strong>allImages<\/strong>: This is an array of the selected images.<\/li>\n<li>\n<strong>handleClick<\/strong>: This function handles the <code>onClick<\/code> event when adding an image to the list.<\/li>\n<\/ul>\n<p>We wrapped our image tag with a div that has an on hover event, such that a border appears on hover. We then displayed a text <strong>selected<\/strong> when an image is selected.<\/p>\n<p>We then implemented the <code>handleClick<\/code> function.<\/p>\n<p>The function handles the <strong>onClick<\/strong> event. It checks if the value passed exists in the <strong>mock<strong><strong>D<\/strong><\/strong>ata<\/strong> ****array. If so, it will pop the value from the array. If not, it will push the value into the array.<\/p>\n<p>Save and run the app on your terminal. You should see something like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_004E20A04BEBECDEA01EC7CD8AB35638248FFB5DE5A5C35B7F579034C13BC9A7_1653664134832_Animation345.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1901\" height=\"930\"\/><\/p>\n<p>We can now upload the array of images to an external platform or an upload media API endpoint.<\/p>\n<\/div>\n\n\n<p>\nIn this part, we learned how to build a React application that handles multiple image uploads with React Bootstrap. Let\u2019s see an alternative way to upload multiple images in React.\n<\/p>\n<h3>Alternative: Direct File Input and Image List Display<\/h3>\n\n\n<p>\nAs an alternative to the visual selection method described above, you can also use a direct file input to allow users to select images from their file system. This section details how to incorporate this method into your React application.\n<\/p>\n<h4>1. Integrating the File Input<\/h4>\n\n\n<p>\nIncorporate the <code>&lt;input type=\"file\"><\/code> component into your app, which allows users to select multiple files:\n<\/p>\n\n\n\n<pre class=\"prettyprint\">&lt;input type=\"file\" multiple onChange={(e) => images.push(e.target.files[0])} \/>\n<\/pre>\n\n\n<p>\nThis line of code lets users choose files directly from their computer, giving them an intuitive and familiar way to select images.\n<\/p>\n<h4>2. Displaying Selected Image Names<\/h4>\n\n\n<p>\nAfter selecting images, it&#8217;s useful to display the names of the selected files as feedback:\n<\/p>\n\n\n\n<pre class=\"prettyprint\">&lt;ul>\n    {images.map((image) => (\n        &lt;li key={image.name}>\n            {image.name}\n        &lt;\/li>\n    ))}\n&lt;\/ul>\n<\/pre>\n\n\n<p>\nThis list of filenames ensures users can confirm their selections before proceeding to upload.\n<\/p>\n<h4>3. Building the Upload Component<\/h4>\n\n\n<p>\nThis component allows users to initiate the file upload to a server:\n<\/p>\n\n\n\n<pre class=\"prettyprint\">function handleFileUpload(files) {\n  \/\/ Upload the files to the server\n}\n\nconst ImageUploader = ({ images }) => {\n  const [uploading, setUploading] = useState(false);\n\n  const handleUpload = () => {\n    setUploading(true);\n    handleFileUpload(images)\n      .then(() => {\n        setUploading(false);\n      })\n      .catch((error) => {\n        console.log(error);\n        \/\/ Optionally, you can display a user-friendly error message\n      });\n  }\n\n  return (\n    &lt;div>\n      &lt;input type=\"file\" multiple onChange={(e) => images.push(e.target.files[0])} \/>\n      &lt;button onClick={handleUpload} disabled={uploading}>\n        Upload\n      &lt;\/button>\n    &lt;\/div>\n  );\n}\n<\/pre>\n\n\n<p>\nEnsure to include error handling in case the upload process fails. The <code>.catch()<\/code> method can be utilized to handle errors gracefully, perhaps showing an error message to the user via a Toast or modal.\n<\/p>\n<h3>Conclusion<\/h3>\n\n\n<p>\nWhile the visual selection method offers a graphical way to pick images, the direct file input provides an alternative approach that some users might find more intuitive. Whichever method you opt for, always remember to handle errors gracefully and provide adequate user feedback. Use the provided code with caution.\n<\/p>\n\n<p>\nWe at Cloudinary want to help you be a better developer. If this article helped you out today, take a minute to see how <a href=\"https:\/\/cloudinary.com\/developers\">Cloudinary helps developers<\/a> build amazing web and app experiences while making your work easier along the way.\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this part, we learned how to build a React application that handles multiple image uploads with React Bootstrap. Let\u2019s see an alternative way to upload multiple images in React. Alternative: Direct File Input and Image List Display As an alternative to the visual selection method described above, you can also use a direct file [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":29371,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246],"class_list":["post-28239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>React Upload Multiple Images | How to Upload Multiple Images at Once in React<\/title>\n<meta name=\"description\" content=\"In this article, we&#039;ll cover the image upload React JS process and how to set up a React app where users can select multiple images at once.\" \/>\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\/how-to-upload-multiple-images-at-once-in-react\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Upload Multiple Images at Once in React\" \/>\n<meta property=\"og:description\" content=\"In this article, we&#039;ll cover the image upload React JS process and how to set up a React app where users can select multiple images at once.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-30T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T05:34:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/how-to-upload-multiple-images-at-once-in-react#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"How to Upload Multiple Images at Once in React\",\"datePublished\":\"2023-05-30T14:00:00+00:00\",\"dateModified\":\"2025-11-27T05:34:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react\"},\"wordCount\":301,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react\",\"url\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react\",\"name\":\"React Upload Multiple Images | How to Upload Multiple Images at Once in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA\",\"datePublished\":\"2023-05-30T14:00:00+00:00\",\"dateModified\":\"2025-11-27T05:34:02+00:00\",\"description\":\"In this article, we'll cover the image upload React JS process and how to set up a React app where users can select multiple images at once.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing graphic including screenshot of code of how to upload image react and example of web page with react upload multiple images\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Upload Multiple Images at Once 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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Upload Multiple Images | How to Upload Multiple Images at Once in React","description":"In this article, we'll cover the image upload React JS process and how to set up a React app where users can select multiple images at once.","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\/how-to-upload-multiple-images-at-once-in-react","og_locale":"en_US","og_type":"article","og_title":"How to Upload Multiple Images at Once in React","og_description":"In this article, we'll cover the image upload React JS process and how to set up a React app where users can select multiple images at once.","og_url":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react","og_site_name":"Cloudinary Blog","article_published_time":"2023-05-30T14:00:00+00:00","article_modified_time":"2025-11-27T05:34:02+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"How to Upload Multiple Images at Once in React","datePublished":"2023-05-30T14:00:00+00:00","dateModified":"2025-11-27T05:34:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react"},"wordCount":301,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react","url":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react","name":"React Upload Multiple Images | How to Upload Multiple Images at Once in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA","datePublished":"2023-05-30T14:00:00+00:00","dateModified":"2025-11-27T05:34:02+00:00","description":"In this article, we'll cover the image upload React JS process and how to set up a React app where users can select multiple images at once.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing graphic including screenshot of code of how to upload image react and example of web page with react upload multiple images"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how-to-upload-multiple-images-at-once-in-react#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Upload Multiple Images at Once 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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458843\/blog-multi-upload-with-react\/blog-multi-upload-with-react.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28239","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28239"}],"version-history":[{"count":11,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28239\/revisions"}],"predecessor-version":[{"id":39464,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28239\/revisions\/39464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/29371"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}