{"id":40106,"date":"2026-06-16T07:00:00","date_gmt":"2026-06-16T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=40106"},"modified":"2026-06-16T10:28:52","modified_gmt":"2026-06-16T17:28:52","slug":"image-upload-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image-upload-javascript","title":{"rendered":"Build Your First Image Upload With JavaScript and Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Building your first web app feels great. The code works. The layout looks clean. Your idea starts to feel real. Then you reach one feature that changes everything: <strong>Image upload.<\/strong> When a user selects an image with a standard file input, that file still lives on their device.<\/p>\n<pre class=\"js-syntax-highlighted\" 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-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"avatar-input\"<\/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<p>At this point, your app doesn\u2019t have a real image URL yet. It only has access to a local file during that browser session. That\u2019s fine for testing, but it doesn\u2019t work for a real app. Your goal is to turn this local file into something your app can use anywhere.<\/p>\n<p>Here\u2019s the key difference between local and hosted:<\/p>\n<ul>\n<li>\n<strong>Local file.<\/strong> The image exists on only one device.<\/li>\n<li>\n<strong>Hosted asset.<\/strong> The image has a secure URL that your app can store, share, and display anywhere.<\/li>\n<\/ul>\n<p>The goal is simple. <strong>We want to take a local image and turn it into a live hosted asset URL<\/strong>, like this:<\/p>\n<p><code>https:\/\/res.cloudinary.com\/your-cloud-name\/image\/upload\/...<\/code><\/p>\n<p>That URL can now be saved in a database, shown on a profile page, or shared across devices.<\/p>\n<h2>Meet the Cloudinary Upload Widget<\/h2>\n<p>Building an uploader from scratch takes work. You need to handle file selection, validation, upload progress, API calls, error states, and previews. For a beginner project, that can feel like too much too soon.<\/p>\n<p>The <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\"><strong>Cloudinary Upload Widget<\/strong><\/a> gives you a faster path. It provides a ready-made upload interface that sends files directly from the browser to the cloud.<\/p>\n<p>This helps because:<\/p>\n<ul>\n<li>You don\u2019t need a backend server.<\/li>\n<li>The widget supports drag and drop.<\/li>\n<li>It shows real-time upload progress.<\/li>\n<li>It returns a secure hosted URL after upload.<\/li>\n<\/ul>\n<p>This allows you to focus on how a local file becomes a live asset.<\/p>\n<h2>Project Setup<\/h2>\n<p>For this demo, you\u2019ll use:<\/p>\n<ul>\n<li>HTML and CSS<\/li>\n<li>Core JavaScript<\/li>\n<li>The <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\">Cloudinary Upload Widget<\/a>\n<\/li>\n<li>An <a href=\"https:\/\/cloudinary.com\/documentation\/upload_presets#unsigned_uploads\">unsigned upload preset<\/a>\n<\/li>\n<\/ul>\n<p>You\u2019ll need two Cloudinary values: your <strong>cloud name<\/strong> and an <strong>unsigned upload preset<\/strong>.<\/p>\n<p>{note}Don\u2019t use your API secret in the browser. The browser can see client-side code, so secrets should stay out of this project.{\/note}<\/p>\n<h2>The HTML Setup<\/h2>\n<p>First, include the Cloudinary Upload Widget script via CDN.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>\n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/upload-widget.cloudinary.com\/latest\/global\/all.js\"<\/span>\n  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>\n&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/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\">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<p>Then add a button to open the widget and an image tag to display the result.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"upload_widget\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"cloudinary-button\"<\/span>&gt;<\/span>Upload Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"preview-area\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"uploadedimage\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: none;\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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<h2>The JavaScript Logic<\/h2>\n<p>Now, connect the button to the widget logic. This is where the integration happens.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" 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> myWidget = cloudinary.createUploadWidget(\n  {\n    <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"your_cloud_name\"<\/span>,\n    <span class=\"hljs-attr\">uploadPreset<\/span>: <span class=\"hljs-string\">\"ml_beginners_preset\"<\/span>,\n  },\n  (error, result) =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (!error &amp;&amp; result &amp;&amp; result.event === <span class=\"hljs-string\">\"success\"<\/span>) {\n      <span class=\"hljs-keyword\">const<\/span> liveUrl = result.info.secure_url;\n\n      <span class=\"hljs-keyword\">const<\/span> imgTag = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"uploadedimage\"<\/span>);\n      imgTag.src = liveUrl;\n      imgTag.style.display = <span class=\"hljs-string\">\"block\"<\/span>;\n    }\n  }\n);\n\n<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"upload_widget\"<\/span>).addEventListener(\n  <span class=\"hljs-string\">\"click\"<\/span>,\n  () =&gt; {\n    myWidget.open();\n  },\n  <span class=\"hljs-literal\">false<\/span>\n);\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<p>The important part is the <code>liveUrl<\/code>. That is the exact moment the local file becomes a hosted asset.<\/p>\n<h2>The Transformation<\/h2>\n<p>After the upload succeeds, Cloudinary returns a URL starting with <code>https:\/\/res.cloudinary.com\/<\/code>. This is no longer a local file. It is now a hosted asset that can load in your app from anywhere.<\/p>\n<p>You can save this URL in tools like Supabase, Firebase, or MongoDB. The user selects a file once, and your app gets a URL it can keep using forever.<\/p>\n<h2>See It in Action<\/h2>\n<p>The best way to understand this is to try the demo yourself.<\/p>\n<ul>\n<li>\n<strong>Live Demo:<\/strong> <a href=\"https:\/\/cloudinary-masterclass.vercel.app\/\">Getting Started with Cloudinary<\/a>\n<\/li>\n<li>\n<strong>Source Code:<\/strong> <a href=\"https:\/\/github.com\/musebe\/cloudinary-masterclass\">GitHub Repo: cloudinary-masterclass<\/a>\n<\/li>\n<\/ul>\n<p>Watch the full upload flow:<\/p>\n<\/div>\n\n<cld-video-player\n      cloud-name='cloudinary-marketing'\n      public-id='blog-Build_Your_First_Image_Upload_With_JavaScript_and_Cloudinary-1'\n      js-config='{\"playbackRates\":[0.5,1,1.5,2]}'\n      style='max-width: ;'\n      class='c-video-player'\n      \n      core-version='2.12.3'\n      player-version='1.7.0'\n      >\n      <video\n        id='_video-player6a31ec0304fde'\n        data-cld-big-play-button='init'\n        data-cld-source-types='[\"hls\",\"webm\\\/vp9\",\"mp4\\\/h265\",\"mp4\"]'\n        controls\n        muted\n        class='cld-video-player cld-fluid wp-block-cloudinary-video-player  cld-video-player-skin-dark'\n      ><\/video>\n    <\/cld-video-player>\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Final Wrap-Up<\/h2>\n<p>You\u2019ve now built a simple image upload flow with Core JavaScript and Cloudinary. You started with a local file, used the widget to send it to the cloud, and received a secure hosted URL.<\/p>\n<p>This URL can now power real features like profile images, product photos, or image galleries. Ready to start building media-rich web apps? <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up<\/a> for a free Cloudinary account today.<\/p>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><style>\n    .faqs {padding: 30px 60px; margin-top: 40px;background: var(--color-background-offset);border-radius: 20px;}\n    #frequently_asked_questions {margin-bottom: 20px;}\n    .question {margin-bottom: 20px;}\n<\/style>\n<div class=\"faqs\">\n<h2>Frequently Asked Questions<\/h2>\n<div class=\"question\">\n<p><b>What is the difference between a local file and a hosted asset?<\/b><\/p>\nA local file exists only on the specific device where it was created. A hosted asset is stored on a cloud server like Cloudinary and assigned a permanent URL, which makes it accessible from any device or browser.\n<\/div>\n<div class=\"question\">\n<p><b>Why should beginners use the Cloudinary Upload Widget?<\/b><\/p>\nThe widget manages complex technical tasks like file validation, drag and drop, and upload progress. This allows developers to build a working upload feature without having to set up a backend server or manage infrastructure.\n<\/div>\n<div class=\"question\">\n<p><b>Is it safe to use Cloudinary in a frontend JavaScript project?<\/b><\/p>\nIt is safe if you use Unsigned Upload Presets. These presets allow you to send files directly from the browser to Cloudinary without exposing your private API Secret in your client side code.\n<\/div>\n<div class=\"question\">\n<p><b>What information does Cloudinary return after a successful upload?<\/b><\/p>\nCloudinary returns a result object that includes a secure URL for the uploaded file. This link can be used immediately to display the image on a page or saved to a database like Supabase for later use.\n<\/div>\n<div class=\"question\">\n<p><b>Can I transform images immediately after they are uploaded?<\/b><\/p>\nYes. Since the file is now a hosted asset, you can apply dynamic transformations such as resizing, cropping, or blurring. You do this by adding specific parameters directly to the hosted URL provided by Cloudinary.\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":40109,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[390,370,177,373],"class_list":["post-40106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-app","tag-image","tag-javascript","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>Build Your First Image Upload With JavaScript and Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to convert local files into live hosted assets using the Cloudinary Upload Widget and JavaScript. A beginner friendly guide to building image uploads without a backend.\" \/>\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\/image-upload-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Your First Image Upload With JavaScript and Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to convert local files into live hosted assets using the Cloudinary Upload Widget and JavaScript. A beginner friendly guide to building image uploads without a backend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-16T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-16T17:28:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.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\/image-upload-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Build Your First Image Upload With JavaScript and Cloudinary\",\"datePublished\":\"2026-06-16T14:00:00+00:00\",\"dateModified\":\"2026-06-16T17:28:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA\",\"keywords\":[\"app\",\"Image\",\"Javascript\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\",\"url\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\",\"name\":\"Build Your First Image Upload With JavaScript and Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA\",\"datePublished\":\"2026-06-16T14:00:00+00:00\",\"dateModified\":\"2026-06-16T17:28:52+00:00\",\"description\":\"Learn how to convert local files into live hosted assets using the Cloudinary Upload Widget and JavaScript. A beginner friendly guide to building image uploads without a backend.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image-upload-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Your First Image Upload With JavaScript and Cloudinary\"}]},{\"@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":"Build Your First Image Upload With JavaScript and Cloudinary","description":"Learn how to convert local files into live hosted assets using the Cloudinary Upload Widget and JavaScript. A beginner friendly guide to building image uploads without a backend.","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\/image-upload-javascript","og_locale":"en_US","og_type":"article","og_title":"Build Your First Image Upload With JavaScript and Cloudinary","og_description":"Learn how to convert local files into live hosted assets using the Cloudinary Upload Widget and JavaScript. A beginner friendly guide to building image uploads without a backend.","og_url":"https:\/\/cloudinary.com\/blog\/image-upload-javascript","og_site_name":"Cloudinary Blog","article_published_time":"2026-06-16T14:00:00+00:00","article_modified_time":"2026-06-16T17:28:52+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.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\/image-upload-javascript#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Build Your First Image Upload With JavaScript and Cloudinary","datePublished":"2026-06-16T14:00:00+00:00","dateModified":"2026-06-16T17:28:52+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA","keywords":["app","Image","Javascript","Upload"],"inLanguage":"en-US","copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript","url":"https:\/\/cloudinary.com\/blog\/image-upload-javascript","name":"Build Your First Image Upload With JavaScript and Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA","datePublished":"2026-06-16T14:00:00+00:00","dateModified":"2026-06-16T17:28:52+00:00","description":"Learn how to convert local files into live hosted assets using the Cloudinary Upload Widget and JavaScript. A beginner friendly guide to building image uploads without a backend.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/image-upload-javascript"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Your First Image Upload With JavaScript and Cloudinary"}]},{"@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"}}]}},"parsely":{"version":"1.1.0","canonical_url":"https:\/\/cloudinary.com\/blog\/image-upload-javascript","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Build Your First Image Upload With JavaScript and Cloudinary","url":"https:\/\/cloudinary.com\/blog\/image-upload-javascript","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/image-upload-javascript"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA&w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA"},"articleSection":"Uncategorized","author":[{"@type":"Person","name":"melindapham"}],"creator":["melindapham"],"publisher":{"@type":"Organization","name":"Cloudinary Blog","logo":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA"},"keywords":["app","image","javascript","upload"],"dateCreated":"2026-06-16T14:00:00Z","datePublished":"2026-06-16T14:00:00Z","dateModified":"2026-06-16T17:28:52Z"},"rendered":"<meta name=\"parsely-title\" content=\"Build Your First Image Upload With JavaScript and Cloudinary\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/cloudinary.com\/blog\/image-upload-javascript\" \/>\n<meta name=\"parsely-type\" content=\"post\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA&w=150&amp;h=150&amp;crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2026-06-16T14:00:00Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>\n<meta name=\"parsely-tags\" content=\"app,image,javascript,upload\" \/>\n<meta name=\"parsely-author\" content=\"melindapham\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/cloudinary.com\/p.js"},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1779911308\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary\/Blog_Build_Your_First_Image_Upload_Form_with_Javascript_and_Cloudinary.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/40106","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=40106"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/40106\/revisions"}],"predecessor-version":[{"id":40113,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/40106\/revisions\/40113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/40109"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=40106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=40106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=40106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}