{"id":31797,"date":"2023-11-14T07:00:00","date_gmt":"2023-11-14T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31797"},"modified":"2025-10-29T12:33:42","modified_gmt":"2025-10-29T19:33:42","slug":"uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget","title":{"rendered":"React Upload File | Uploading Images and Videos in React"},"content":{"rendered":"\n<p>The Cloudinary ecosystem offers a vast array of features and advanced capabilities for managing your media content. However, to harness this power effectively, you must begin by uploading your images and videos to <a href=\"https:\/\/cloudinary.com\/users\/register_free\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary<\/a>. While you could manually accomplish this task using Cloudinary&#8217;s extensive APIs and SDKs, there&#8217;s a more streamlined way to go about it.<br><br>In this Dev Hint, we&#8217;ll delve into the world of Cloudinary and explore how to integrate the <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\" target=\"_blank\" rel=\"noreferrer noopener\">Upload Widget<\/a> into an empty React application. We&#8217;ll guide you through the steps of effortlessly dropping this widget right into the heart of your web page, making media uploads a breeze. Let&#8217;s get started!<\/p>\n\n\n\n<p>You can use Cloudinary\u2019s digital asset management (DAM) for free for life, making it easier to handle the React upload file process and far more. <a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">Check out what Cloudinary DAM offers<\/a>, and sign up. It costs nothing, and gives you far more efficiency when you work with media in React.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Uploading Images &amp; Videos in React with the Cloudinary Upload Widget - Dev Hints\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/paiO6M2wBqE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">React Upload File: Initial Setup and Integration<\/h2>\n\n\n\n<p>To get started, the first step is to load the script into our React application. You can access the widget code directly from the <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget#how_to_set_up_and_integrate_the_upload_widget_into_your_site_or_app\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary Upload Widget documentation<\/a>.<br><br>Copy the script from the documentation and include it in your index.html file, found in the <strong>public<\/strong> folder of your React project directory. Paste the script at the bottom of the <code>&lt;head&gt;<\/code> section as shown below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-comment\">&lt;!-- Place this script at the bottom of the &lt;head&gt; section in your 'index.html' file --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/upload-widget.cloudinary.com\/global\/all.js\"<\/span>     <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span>  \n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/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\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>If a more suitable script loading solution already exists in your application, feel free to use that method.<\/p>\n<\/div>\n\n\n<p><br>With this, our widget script will load synchronously whenever the application loads.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Incorporating the Widget Into Components<\/h2>\n\n\n\n<p>To maintain a clean code base, it&#8217;s advisable not to include all the code inside the primary app file. Instead, we&#8217;ll create a separate component for this purpose. Let&#8217;s call it &#8220;UploadWidget.js&#8221;.<br><br>In the UploadWidget.js file, define and export a new component called <strong>UploadWidget<\/strong>. Once this is done, we&#8217;ll need a way to store references of the loaded code, whenever our Upload script runs. React&#8217;s <code>useRef<\/code> and <code>useEffect<\/code> hooks come in handy here.<br><br>Here&#8217;s a brief snippet showing how to do this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { useEffect, useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-keyword\">const<\/span> UploadWidget = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> cloudinaryRef = useRef();\n\n  useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    cloudinaryRef.current = <span class=\"hljs-built_in\">window<\/span>.cloudinary;\n  }, &#91;]);\n};\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> UploadWidget;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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\n\n<p>After creating the component and setting up the required references, it&#8217;s time to utilize the UploadWidget component by exporting it to the App.js file, as demonstrated below:<\/p>\n\n\n<pre class=\"wp-block-code\" 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-keyword\">import<\/span> UploadWidget <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/components\/UploadWidget'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/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\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"main\"<\/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\">\"container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"title\"<\/span>&gt;<\/span>\n          React &amp; Cloudinary Upload Widget\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">UploadWidget<\/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\">main<\/span>&gt;<\/span><\/span>\n  );\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-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\n\n<h2 class=\"wp-block-heading\">Creating the Upload Widget<\/h2>\n\n\n\n<p>Let&#8217;s now focus on creating the upload widget and preparing it for uploads. We&#8217;ll pass onto it two arguments: our configuration and a result function that&#8217;ll handle the result of the uploads. The configuration is a simple JavaScript object containing two key-value pairs: the &#8220;cloud name&#8221; and the &#8220;upload preset&#8221;.<\/p>\n\n\n\n<p>You can find the cloud name easily under the account details on your <a href=\"https:\/\/cloudinary.com\/users\/login\" target=\"_blank\" rel=\"noreferrer noopener\">dashboard<\/a> under your Account Details section as highlighted below.<\/p>\n\n\n\n<p>Since we&#8217;ll be performing an unsigned upload, we&#8217;ll require an unsigned upload preset. To create an upload preset, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Access the Cloudinary <strong>Settings<\/strong> section.<\/li>\n\n\n\n<li>Navigate to the <strong>Upload<\/strong> tab.<\/li>\n\n\n\n<li>Scroll down to locate the <strong>Upload Presets<\/strong> section.<\/li>\n\n\n\n<li>Click <strong>Add Upload Preset<\/strong>.<\/li>\n\n\n\n<li>In the <strong>Upload Preset Name<\/strong> field, modify the name or use the default one.<\/li>\n\n\n\n<li>Set the <strong>Signing Mode<\/strong> to <strong>Unsigned<\/strong>.<\/li>\n\n\n\n<li>Adjust any other settings as necessary for your upload preset.<\/li>\n\n\n\n<li>Once you&#8217;re satisfied with the configuration, click <strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Initializating the Cloudinary Upload Widget<\/strong><\/h2>\n\n\n\n<p><br>After configuring all the necessary settings, the next step involves initializing the Cloudinary Upload Widget when the component is mounted.<br><br>This can be achieved by adding the following to the <code>useEffect<\/code> hook we defined above in the UploadWidget.js<strong> <\/strong>file :<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">useEffect(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  cloudinaryRef.current = <span class=\"hljs-built_in\">window<\/span>.cloudinary;\n  widgetRef.current = cloudinaryRef.current.createUploadWidget({\n    <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">'Your_cloudName'<\/span>,\n    <span class=\"hljs-attr\">uploadPreset<\/span>: <span class=\"hljs-string\">'Your_uploadPreset'<\/span>\n  }, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{\n    <span class=\"hljs-built_in\">console<\/span>.log(result);\n    <span class=\"hljs-comment\">\/\/ Handle the result or error here<\/span>\n  });\n}, &#91;]);\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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\n\n<p>In the <code>useEffect<\/code> above, we set up the Cloudinary Upload Widget using the <strong>createUploadWidget<\/strong> function. This widget is configured with your Cloudinary account details and an upload preset. When users interact with the widget, a callback function logs the upload result, such as the file&#8217;s URL, to the console. This code is the foundation for integrating Cloudinary&#8217;s file upload feature into a web application.<br><br>The next step is to create a reference (<code>widgetRef<\/code>) using the <code>useRef<\/code><strong> <\/strong>hook that will be used by the upload button to trigger the opening of the Cloudinary Upload Widget. This <code>useRef<\/code> reference will allow us to control and interact with the widget when the button is clicked. This can be achieved by the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" 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-keyword\">const<\/span> widgetRef = useRef();\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\n\n<p>To finalize the component, return a straightforward JSX structure containing a single button. The button has an <code>onClick<\/code> listener, which, when clicked, will trigger the opening of the Cloudinary Upload Widget using <code>widgetRef.current.open()<\/code> method, as shown below:<\/p>\n\n\n<pre class=\"wp-block-code\" 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-keyword\">return<\/span> (\n  <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> widgetRef.current.open()}&gt;\n      Upload\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n);\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\n\n<p>With all of these steps and code in place, the <code>UploadWidget<\/code> component will display a button labeled &#8220;Upload&#8221;. When a user clicks this button, it will trigger the Cloudinary Upload Widget to open. This will allow users to select and upload files (such as images or videos) to your Cloudinary account. The uploaded files will be processed according to the specified upload preset and stored in your Cloudinary media library. If the upload is successful, the component will log information about the uploaded file(s) to the console. Any potential errors during the upload process can also be handled as needed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The Cloudinary Upload Widget significantly improves the ease of uploading images and videos to our media library. Easy to integrate and rich in features, the widget is an inherent piece of a React application that promises to smooth out the upload process.<br><br>Deploying this widget is a fine balance between functionality and utility, and remains true to React&#8217;s convention of maintaining neat, readable code. You&#8217;ll find that your users will admire the effortless interaction that this widget enables.<br><br>If you\u2019re not using Cloudinary, you can get access to the Upload Widget, and all functionality for free for life, so <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for Cloudinary today<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Cloudinary ecosystem offers a vast array of features and advanced capabilities for managing your media content. However, to harness this power effectively, you must begin by uploading your images and videos to Cloudinary. While you could manually accomplish this task using Cloudinary&#8217;s extensive APIs and SDKs, there&#8217;s a more streamlined way to go about [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":31800,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[246,373],"class_list":["post-31797","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-react","tag-upload"],"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 File | Uploading Images and Videos in React<\/title>\n<meta name=\"description\" content=\"Learn how to upload media files in React with the Cloudinary upload widget React environment for free.\" \/>\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\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Upload File | Uploading Images and Videos in React\" \/>\n<meta property=\"og:description\" content=\"Learn how to upload media files in React with the Cloudinary upload widget React environment for free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-14T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-29T19:33:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.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\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"React Upload File | Uploading Images and Videos in React\",\"datePublished\":\"2023-11-14T15:00:00+00:00\",\"dateModified\":\"2025-10-29T19:33:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\"},\"wordCount\":954,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA\",\"keywords\":[\"React\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\",\"url\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\",\"name\":\"React Upload File | Uploading Images and Videos in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA\",\"datePublished\":\"2023-11-14T15:00:00+00:00\",\"dateModified\":\"2025-10-29T19:33:42+00:00\",\"description\":\"Learn how to upload media files in React with the Cloudinary upload widget React environment for free.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing an upload screen in React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Upload File | Uploading Images and Videos 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 File | Uploading Images and Videos in React","description":"Learn how to upload media files in React with the Cloudinary upload widget React environment for free.","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\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget","og_locale":"en_US","og_type":"article","og_title":"React Upload File | Uploading Images and Videos in React","og_description":"Learn how to upload media files in React with the Cloudinary upload widget React environment for free.","og_url":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget","og_site_name":"Cloudinary Blog","article_published_time":"2023-11-14T15:00:00+00:00","article_modified_time":"2025-10-29T19:33:42+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.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\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"React Upload File | Uploading Images and Videos in React","datePublished":"2023-11-14T15:00:00+00:00","dateModified":"2025-10-29T19:33:42+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget"},"wordCount":954,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA","keywords":["React","Upload"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget","url":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget","name":"React Upload File | Uploading Images and Videos in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA","datePublished":"2023-11-14T15:00:00+00:00","dateModified":"2025-10-29T19:33:42+00:00","description":"Learn how to upload media files in React with the Cloudinary upload widget React environment for free.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing an upload screen in React"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/uploading-images-and-videos-in-react-with-the-cloudinary-upload-widget#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Upload File | Uploading Images and Videos 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\/v1699650873\/Upload_in_react-Blog\/Upload_in_react-Blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31797","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=31797"}],"version-history":[{"count":8,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31797\/revisions"}],"predecessor-version":[{"id":39020,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31797\/revisions\/39020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/31800"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=31797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=31797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=31797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}