{"id":28030,"date":"2022-06-02T12:01:49","date_gmt":"2022-06-02T12:01:49","guid":{"rendered":"http:\/\/upload-images-to-cloudinary-with-node.js-and-react"},"modified":"2025-05-14T11:25:03","modified_gmt":"2025-05-14T18:25:03","slug":"upload-images-to-cloudinary-with-node-js-and-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/","title":{"rendered":"Upload Images to Cloudinary with Node.js and React"},"content":{"rendered":"

The use of multimedia on the web has gone mainstream primarily because of obvious benefits such as increased user engagement, dwell time, improved SEO, etc. Getting it right with media assets on the web entails dealing with optimization, delivery, transformation, and other management tasks. Fortunately, technologies like Cloudinary offer scalable, performant, and easy-to-use tools for practically all media management concerns.<\/p>\n

In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.<\/p>\n

Project Setup<\/h2>\n

Run this command in your terminal to create the working directory:<\/p>\n

mkdir cloudinary-react-node\n<\/code><\/span><\/pre>\n
We\u2019ll also need two subdirectories within the cloudinary-react-node<\/code> directory. Run this command to create them:<\/p>\n
cd cloudinary-react-node\nmkdir frontend server\n<\/code><\/span><\/pre>\n
Our React app, and its dependencies, will be kept in the frontend<\/code> folder, while our backend code will be in the server<\/code> folder.<\/p>\n
Let\u2019s initialize the working directory to be able to install the necessary dependencies that will be used for our backend. Run this command:<\/p>\n
npm init --y\n<\/code><\/span><\/pre>\n
Next, run the following command in your terminal to install the dependencies for our backend:<\/p>\n
npm install express multer cloudinary cors dotenv\n<\/code><\/span><\/pre>\n
The above command installs several modules: express<\/code> will be used to build our web server, all the necessary routes, and handling middleware. multer<\/code> is a middleware used to parse multipart form data, which includes files from the HTTP request body. The cloudinary<\/code> SDK will provide us with easy-to-use APIs to upload parsed files to our Cloudinary account and do any media file manipulations as the need be. The cors<\/code> module is also another middleware that would help us with CORS errors, and finally, the dotenv<\/code> module will allow us to parse environment variables defined in a .env<\/code> file.<\/p>\n
Run this command to create a file within the server<\/code> folder, where we will write our serverside logic:<\/p>\n
touch server\/index.js\n<\/code><\/span><\/pre>\n
Now let\u2019s run the following command to set up our React app in the frontend<\/code> folder created earlier:<\/p>\n
npx create-react-app frontend\n<\/code><\/span><\/pre>\n
Run this command to install the dependency for our React app \u2014 the axios module, which will be our HTTP client:<\/p>\n
cd frontend\nnpm install axios\n<\/code><\/span><\/pre>\n
We are not done with our setup yet. We need a way to automate the task of starting our React app and our web server concurrently. Within the working directory, run this command in your terminal to install the concurrently module:<\/p>\n
npm i concurrently --save-dev\n<\/code><\/span><\/pre>\n
Next, update the scripts<\/code> object within the package.json<\/code> file in the root of the working directory to match the following:<\/p>\n
      \"scripts\"<\/span>: {\n        \"backend\"<\/span>: \"node server\/index.js\"<\/span>,\n        \"frontend\"<\/span>: \"npm run start --prefix frontend\"<\/span>,\n        \"dev\"<\/span>: \"concurrently \\\"npm run backend\\\" \\\"npm run frontend\\\"\"<\/span>\n      },\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we included three scripts, the first two are for starting our Node server and our React app, respectively, and the third uses the concurrently module to start both of them concurrently.<\/p>\n
Setting up Cloudinary<\/h2>\n
To use Cloudinary\u2019s provisioned services, you need to first sign up for a free Cloudinary account<\/a> if you don\u2019t have one already. Displayed on your account\u2019s Management Console (aka Dashboard) are important details: your cloud name, API key, etc.<\/p>\n
\"\"<\/p>\n
Next, let\u2019s create environment variables to hold the details of our Cloudinary account. Create a new file called .env<\/code> at the root of your project and add the following to it:<\/p>\n
    CLOUD_NAME = YOUR CLOUD NAME HERE\n    API_KEY = YOUR API API KEY\n    API_SECRET = YOUR API API SECRET\n<\/code><\/span><\/pre>\n
You can update the .env<\/code> file with your Cloudinary credentials.<\/p>\n
Setting up the Server and Defining the Upload Endpoint<\/h2>\n
In the following steps, we will update our server.js<\/code> file with the logic needed to set up our web server and include the endpoint that will enable us to upload files to Cloudinary.<\/p>\n
    \n
  1. Let\u2019s start by including the necessary imports we will be needing. Add the following to your server.js<\/code> file:<\/li>\n<\/ol>\n
    require<\/span>(\"dotenv\"<\/span>).config();\nconst<\/span> express = require<\/span>(\"express\"<\/span>);\nconst<\/span> cloudinary = require<\/span>(\"cloudinary\"<\/span>).v2;\nconst<\/span> cors = require<\/span>(\"cors\"<\/span>);\nconst<\/span> Multer = require<\/span>(\"multer\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
      \n
    1. Next, let\u2019s set up our Cloudinary SDK and define a function that will help us with file uploads.<\/li>\n<\/ol>\n
      cloudinary.config({\n  cloud_name<\/span>: process.env.CLOUD_NAME,\n  api_key<\/span>: process.env.API_KEY,\n  api_secret<\/span>: process.env.API_SECRET,\n});\nasync<\/span> function<\/span> handleUpload<\/span>(file<\/span>) <\/span>{\n  const<\/span> res = await<\/span> cloudinary.uploader.upload(file, {\n    resource_type<\/span>: \"auto\"<\/span>,\n  });\n  return<\/span> res;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
      In the code above, we import Cloudinary and configure it with an object consisting of our Cloudinary credentials. Next, we define the handleUpload<\/code> function, which accepts a file and attempts to upload the file. The upload is made possible by calling the upload<\/code> method on the cloudinary<\/code> object, and it accepts two parameters. The first is the file to be uploaded, and the second is an object that holds the options we want for the uploaded file.<\/p>\n
      When we do uploads from the server, the upload call assumes that the file is an image, i.e., resource_type: "image"<\/code>, but setting the resource_type<\/code> to auto<\/code> automatically detects the file type during the upload process. Once the file is successfully uploaded, the response we get from the API is returned.<\/p>\n
        \n
      1. Next, let\u2019s set up the multer middleware.<\/li>\n<\/ol>\n
        const<\/span> storage = new<\/span> Multer.memoryStorage();\nconst<\/span> upload = Multer({\n  storage,\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
        Multer provides us with two storage options: disk and memory storage. In the snippet above, we create and initialize a Multer instance and select the memory storage option.<\/p>\n
        Now, let\u2019s use the Express<\/code> module to create a web server to listen for requests. We will also create an endpoint to handle file uploads.<\/p>\n
        const<\/span> app = express();\napp.use(cors());\n\napp.post(\"\/upload\"<\/span>, upload.single(\"my_file\"<\/span>), async<\/span> (req, res) => {\n  try<\/span> {\n    const<\/span> b64 = Buffer.from(req.file.buffer).toString(\"base64\"<\/span>);\n    let<\/span> dataURI = \"data:\"<\/span> + req.file.mimetype + \";base64,\"<\/span> + b64;\n    const<\/span> cldRes = await<\/span> handleUpload(dataURI);\n    res.json(cldRes);\n  } catch<\/span> (error) {\n    console<\/span>.log(error);\n    res.send({\n      message<\/span>: error.message,\n    });\n  }\n});\nconst<\/span> port = 6000<\/span>;\napp.listen(port, () => {\n  console<\/span>.log(`Server Listening on ${port}<\/span>`<\/span>);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
        We create an instance of express and store it in a variable called app<\/code>; this is followed by including the cors middleware. Then we create an endpoint that will route any POST requests made to the \/upload<\/code> path, with two middlewares to handle the request.<\/p>\n
        The first is the multer middleware we created earlier. The upload.single("my_file")<\/code> call returns a function that is set up to parse a single file contained in the request body with a named attribute \u2014 my file<\/code> (this is the name we would bind to the file before it is uploaded on the client-side).\nOnce the file is parsed successfully, the multer middleware attaches a file property to the request body, i.e., req.file, which contains information about the file. Since we are using the memoryStorage<\/code> option to store our file, the object looks like this for some images:<\/p>\n
        \"\"<\/p>\n
        The Second middleware then takes the request body, converts the buffer in the parsed file to base64, and further transforms this representation to a data URI, which is then fed to the handleUpload<\/code> function to upload. Once it succeeds, we send the upload response we get from cloudinary back to the client-side, and if it fails, the error response is sent back.<\/p>\n
        Building the Frontend<\/h2>\n
        We now have our web server ready. Next, let\u2019s build our frontend application that will communicate with it. Open the frontend<\/code> folder and update the content of the src\/App.js<\/code> file with the following:<\/p>\n
        import \".\/index.css\"<\/span>;\nimport { useState } from \"react\"<\/span>;\nimport axios from \"axios\"<\/span>;\n\nfunction<\/span> App<\/span>()<\/span> <\/span>{\n  const<\/span> [file, setFile] = useState(null<\/span>);\n  const<\/span> [loading, setLoading] = useState(false<\/span>);\n  const<\/span> [res, setRes] = useState({});\n  const<\/span> handleSelectFile = (e) => setFile(e.target.files[0<\/span>]);\n  const<\/span> handleUpload = async () => {\n    try<\/span> {\n      setLoading(true<\/span>);\n      const<\/span> data = new<\/span> FormData();\n      data.append(\"my_file\"<\/span>, file);\n      const<\/span> res = await axios.post(\"http:\/\/localhost:6000\/upload\"<\/span>, data);\n      setRes(res.data);\n    } catch<\/span> (error) {\n      alert(error.message);\n    } finally<\/span> {\n      setLoading(false<\/span>);\n    }\n  };\n\n  return<\/span> (\n    <div className=\"App\"<\/span>>\n      <label htmlFor=\"file\"<\/span> className=\"btn-grey\"<\/span>>\n        {\" \"<\/span>}\n        select file\n      <\/label>\n      {file && <center> {file.name}<\/center>}\n      <input\n        id=\"file\"<\/span>\n        type=\"file\"<\/span>\n        onChange={handleSelectFile}\n        multiple={false<\/span>}\n      \/>\n      <code>\n        {Object.keys(res).length > 0<\/span>\n          ? Object.keys(res).map((key) => (\n              <p className=\"output-item\"<\/span> key={key}>\n                <span>{key}:<\/span>\n                <span>\n                  {typeof res[key] === \"object\"<\/span> ? \"object\"<\/span> : res[key]}\n                <\/span>\n              <\/p>\n            ))\n          : null<\/span>}\n      <\/code>\n      {file && (\n        <>\n          <button onClick={handleUpload} className=\"btn-green\"<\/span>>\n            {loading ? \"uploading...\"<\/span> : \"upload to cloudinary\"<\/span>}\n          <\/button>\n        <\/>\n      )}\n    <\/div>\n  );\n}\nexport default<\/span> App;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
        This component is quite straightforward; it simply allows the user to select a file from their computer, provides them with a button to upload the file, and displays the result received from the server on the screen if the upload is successful. The centerpiece of this component is the function called handleUpload<\/code>, which performs file uploading through the following steps:<\/p>\n
          \n
        1. \n
          It embeds the file selected by the user into the request payload using the FormData API with a name attribute called my_file<\/code> \u2014 a string that matches the one we configured on our server using the Multer middleware.<\/p>\n<\/li>\n
        2. \n
          The payload is then used to initiate an HTTP request to our backend. If the request is successful, the response is stored in a state variable called res<\/code>, which is iterated on and rendered to the screen; otherwise, an error message is displayed.<\/p>\n<\/li>\n<\/ol>\n
          We\u2019ll also need some styles to give the application a nice appearance. Copy the styles in this codeSandbox link<\/a> to your index.css<\/code> file.<\/p>\n
          To preview the running application, let\u2019s start our web server and React app. Run this command in your terminal:<\/p>\n
              npm run dev\n<\/code><\/span><\/pre>\n
          \"\"<\/p>\n
          As seen above, we get the upload response displayed on the screen. You can also visit the media gallery section on your cloudinary account to see the uploaded file.<\/p>\n
          \"\"<\/p>\n
          Find the complete project here<\/a> on GitHub.<\/p>\n
          Conclusion<\/h2>\n
          When working with media assets, platforms like Cloudinary provide you with an advantage. Hopefully, using this as a jumping-off point, you can go further and explore the platform\u2019s advanced features.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28031,"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,383,246,371,373],"class_list":["post-28030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nodejs","tag-react","tag-under-review","tag-upload"],"acf":[],"yoast_head":"\nUpload Images to Cloudinary with Node.js and React<\/title>\n<meta name=\"description\" content=\"In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.\" \/>\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\/upload-images-to-cloudinary-with-node-js-and-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload Images to Cloudinary with Node.js and React\" \/>\n<meta property=\"og:description\" content=\"In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-02T12:01:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-14T18:25:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/upload-images-to-cloudinary-with-node-js-and-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Upload Images to Cloudinary with Node.js and React\",\"datePublished\":\"2022-06-02T12:01:49+00:00\",\"dateModified\":\"2025-05-14T18:25:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Node(JS)\",\"React\",\"Under Review\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/\",\"name\":\"Upload Images to Cloudinary with Node.js and React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA\",\"datePublished\":\"2022-06-02T12:01:49+00:00\",\"dateModified\":\"2025-05-14T18:25:03+00:00\",\"description\":\"In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Images to Cloudinary with Node.js and 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":"Upload Images to Cloudinary with Node.js and React","description":"In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.","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\/upload-images-to-cloudinary-with-node-js-and-react\/","og_locale":"en_US","og_type":"article","og_title":"Upload Images to Cloudinary with Node.js and React","og_description":"In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-02T12:01:49+00:00","article_modified_time":"2025-05-14T18:25:03+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/"},"author":{"name":"","@id":""},"headline":"Upload Images to Cloudinary with Node.js and React","datePublished":"2022-06-02T12:01:49+00:00","dateModified":"2025-05-14T18:25:03+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA","keywords":["Guest Post","Image","Node(JS)","React","Under Review","Upload"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/","name":"Upload Images to Cloudinary with Node.js and React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA","datePublished":"2022-06-02T12:01:49+00:00","dateModified":"2025-05-14T18:25:03+00:00","description":"In this post, we will upload files from a simple React app using a Cloudinary backend SDK on a Node.js web server.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-images-to-cloudinary-with-node-js-and-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Upload Images to Cloudinary with Node.js and 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\/v1681925633\/Web_Assets\/blog\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1\/ae8d9ee2558975fe6f7f763cd5a12c6557ae1be1-1280x720-1_280317d6a1.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28030","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=28030"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28030\/revisions"}],"predecessor-version":[{"id":37635,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28030\/revisions\/37635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28031"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}