{"id":3397,"date":"2020-08-27T14:28:13","date_gmt":"2020-08-27T14:28:13","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3397"},"modified":"2020-08-27T14:28:13","modified_gmt":"2020-08-27T14:28:13","slug":"converting-a-base64-string-to-a-blob-in-javascript","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript","title":{"rendered":"Converting a base64 string to a blob in JavaScript"},"content":{"rendered":"<p>Web browsers provide a variety of data primitives that web developers use to manage, manipulate, and store data &#8211; from plain text, to files, images, videos and more. However, using them correctly and effectively can be confusing. One such example is converting a base64 string to a blob using JavaScript. A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Blob\">blob<\/a> represents binary data in the form of files, such as images or video. Suppose you have an image in string format that needs to be uploaded to a server. However, the available API accepts the image in blob format only. What do you do?<\/p>\n<p>According to various solutions <a href=\"https:\/\/stackoverflow.com\/questions\/27980612\/converting-base64-to-blob-in-javascript\">around the Internet<\/a>, conversion appears to be complex. Manipulating byte arrays? No thanks. Fortunately, there&#8217;s an easier, modern approach available thanks to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a>. It&#8217;s a powerful feature built into all web browsers that is commonly used to fetch resources across the network, like making HTTP requests to your backend APIs.<\/p>\n<p><!--more--><\/p>\n<p><code>Fetch<\/code> returns a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Response\">Response object<\/a>. As it turns out, it can convert data into more than just JSON, it can also return array buffers, form data, and blobs. In this case, we&#8217;ll use blobs.<\/p>\n<h2>Easy as one, two<\/h2>\n<p>First, pass a base64 string to <code>fetch<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const base64Data = &quot;aGV5IHRoZXJl&quot;;\nconst base64 = await fetch(base64Data);\n<\/code><\/pre>\n<p>Depending on the format of the base64 string, you might need to prepend content type data. For example, a JPEG image:<\/p>\n<pre><code class=\"language-javascript\">const base64Response = await fetch(`data:image\/jpeg;base64,${base64Data}`);\n<\/code><\/pre>\n<p>Next, convert the response to a blob:<\/p>\n<pre><code class=\"language-javascript\">const blob = await base64Response.blob();\n<\/code><\/pre>\n<p>That&#8217;s it! From here, you can upload it to a server, display it on the screen, and more.<\/p>\n<h2>Bonus: Converting a blob to a base64 string<\/h2>\n<p>What about reversing the conversion, from a blob to a base64 string? Unfortunately, this is a bit more complicated (though if you know of a better approach, let me know in the comments!).<\/p>\n<p>I encountered this real-world example recently while building a feature for the <a href=\"https:\/\/github.com\/ionic-team\/ionifits\">Ionifits demo app<\/a>. While entering a company expense, users take a photo of the expense receipt. To implement this, I used the Capacitor <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera\">Camera<\/a> and <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/filesystem\">Filesystem<\/a> APIs.<\/p>\n<p>After taking a photo, the Camera API returns a blob URL, which looks like:<\/p>\n<pre><code>https:\/\/myapp.com\/cc7622aa-271b-4ee3-b707-28cbc84bc37a\n<\/code><\/pre>\n<p>To save the photo permanently to the filesystem (blobs are objects temporarily loaded into browser memory), the Filesystem API requires the data to be in base64 format, so we must convert the blob into a base64 string.<\/p>\n<p>There are a variety of techniques to do so, but as a fan of asynchronous programming, I recommend creating a Promise then using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FileReader\">FileReader API<\/a> to convert the blob:<\/p>\n<pre><code class=\"language-javascript\">convertBlobToBase64 = (blob) =&gt; new Promise((resolve, reject) =&gt; {\n    const reader = new FileReader;\n    reader.onerror = reject;\n    reader.onload = () =&gt; {\n        resolve(reader.result);\n    };\n    reader.readAsDataURL(blob);\n});\n\nconst base64String = await convertBlobToBase64(blob);\n<\/code><\/pre>\n<p>Voil\u00e0! Using modern web development techniques, converting blobs and base64 strings back and forth isn\u2019t so scary after all. What other tips or tricks have you picked up recently in your web development journey?<\/p>\n<blockquote><p>\n  Special thanks to Capacitor community member <a href=\"https:\/\/www.wyldweb.com\/\">Matt Wyld<\/a> for his feedback, especially performance testing the Fetch approach on mobile.\n<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Web browsers provide a variety of data primitives that web developers use to manage, manipulate, and store data &#8211; from plain text, to files, images, videos and more. However, using them correctly and effectively can be confusing. One such example is converting a base64 string to a blob using JavaScript. A blob represents binary data [&hellip;]<\/p>\n","protected":false},"author":62,"featured_media":3399,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[121],"tags":[51],"class_list":["post-3397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Converting a base64 string to a blob in JavaScript - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Converting a base64 string to a blob in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Web browsers provide a variety of data primitives that web developers use to manage, manipulate, and store data &#8211; from plain text, to files, images, videos and more. However, using them correctly and effectively can be confusing. One such example is converting a base64 string to a blob using JavaScript. A blob represents binary data [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-27T14:28:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"967\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Netkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotNetkow\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Netkow\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\"},\"author\":{\"name\":\"Matt Netkow\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\"},\"headline\":\"Converting a base64 string to a blob in JavaScript\",\"datePublished\":\"2020-08-27T14:28:13+00:00\",\"dateModified\":\"2020-08-27T14:28:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\"},\"wordCount\":469,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg\",\"keywords\":[\"JavaScript\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\",\"url\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\",\"name\":\"Converting a base64 string to a blob in JavaScript - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg\",\"datePublished\":\"2020-08-27T14:28:13+00:00\",\"dateModified\":\"2020-08-27T14:28:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg\",\"width\":967,\"height\":725,\"caption\":\"base64-to-blob\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Converting a base64 string to a blob in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\",\"name\":\"Matt Netkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"caption\":\"Matt Netkow\"},\"sameAs\":[\"https:\/\/x.com\/dotNetkow\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mattnetkow\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Converting a base64 string to a blob in JavaScript - Ionic Blog","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:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript","og_locale":"en_US","og_type":"article","og_title":"Converting a base64 string to a blob in JavaScript","og_description":"Web browsers provide a variety of data primitives that web developers use to manage, manipulate, and store data &#8211; from plain text, to files, images, videos and more. However, using them correctly and effectively can be confusing. One such example is converting a base64 string to a blob using JavaScript. A blob represents binary data [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript","og_site_name":"Ionic Blog","article_published_time":"2020-08-27T14:28:13+00:00","og_image":[{"width":967,"height":725,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg","type":"image\/jpeg"}],"author":"Matt Netkow","twitter_card":"summary_large_image","twitter_creator":"@dotNetkow","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Netkow","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript"},"author":{"name":"Matt Netkow","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790"},"headline":"Converting a base64 string to a blob in JavaScript","datePublished":"2020-08-27T14:28:13+00:00","dateModified":"2020-08-27T14:28:13+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript"},"wordCount":469,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg","keywords":["JavaScript"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript","url":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript","name":"Converting a base64 string to a blob in JavaScript - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg","datePublished":"2020-08-27T14:28:13+00:00","dateModified":"2020-08-27T14:28:13+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg","width":967,"height":725,"caption":"base64-to-blob"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/converting-a-base64-string-to-a-blob-in-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Converting a base64 string to a blob in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790","name":"Matt Netkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","caption":"Matt Netkow"},"sameAs":["https:\/\/x.com\/dotNetkow"],"url":"https:\/\/ionic.io\/blog\/author\/mattnetkow"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/base64-to-blob.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3397"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3397\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3399"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}