{"id":347,"date":"2025-09-03T09:02:45","date_gmt":"2025-09-03T09:02:45","guid":{"rendered":"https:\/\/datasymbol.com\/blog\/?p=347"},"modified":"2025-09-03T10:56:04","modified_gmt":"2025-09-03T10:56:04","slug":"how-to-decode-a-barcode-from-a-file-on-a-website","status":"publish","type":"post","link":"https:\/\/datasymbol.com\/blog\/2025\/09\/03\/how-to-decode-a-barcode-from-a-file-on-a-website\/","title":{"rendered":"How to Decode a Barcode from a File on a Website"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"629\" src=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-file-decoder.jpg\" alt=\"\" class=\"wp-image-375\" style=\"width:600px\" srcset=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-file-decoder.jpg 800w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-file-decoder-300x236.jpg 300w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-file-decoder-768x604.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Can you decode an image file with a barcode directly on the client side in a browser?<br>Yes, you can. In this article, we\u2019ll show how to do it using our <strong><a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Web SDK for websites<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Why decode barcodes locally in the browser instead of on the server?<\/strong><\/p>\n\n\n\n<p>Normally, you could upload the file to a server and decode it there using a server-side <strong><a href=\"https:\/\/datasymbol.com\/barcode-reader-sdk\/barcode-reader-sdk.html\">BarcodeReader SDK<\/a><\/strong>. However, there are several use cases where local decoding in the client\u2019s browser is more beneficial:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Security reasons<\/strong> \u2013 The image file with the barcode is processed locally on the user\u2019s computer. The file never leaves the device.<\/li>\n\n\n\n<li><strong>Reduced server load<\/strong> \u2013 If high traffic is expected, you don\u2019t need powerful server infrastructure. Since decoding happens on the client device, even a lightweight IoT device can serve as the HTTP host.<\/li>\n\n\n\n<li><strong>Easy deployment<\/strong> \u2013 A barcode scanning application is still simple to manage and benefits from all the advantages of the <strong><a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Web SDK for websites<\/a><\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\"><strong>How to configure the Web SDK for decoding files instead of using the camera<\/strong><\/p>\n\n\n\n<p>To disable the use of the device camera and enable image file decoding, you just need to pass a <a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/scanner-settings.html\">ScannerSettings<\/a> object without a &#8220;camera&#8221; property when creating the scanner (<a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/dsscanner-methods.html\">DSScanner.Create<\/a>).<\/p>\n\n\n\n<p>Here\u2019s an example configuration:<\/p>\n\n\n\n<pre class=\"wp-block-code has-normal-font-size\" style=\"line-height:1.3\"><code>var scannerSettings = {\n  scanner: {\n    key: '',\n  },\n  viewport: {\n    id: 'datasymbol-barcode-viewport',\n  },\n  barcode: {\n    barcodeTypes: &#91;'Code128', 'Code39', 'QRCode'],\n  },\n};<\/code><\/pre>\n\n\n\n<p>Now, when you call:<\/p>\n\n\n\n<p>DSScanner.Create(scannerSettings);<\/p>\n\n\n\n<p>the <strong><a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Web SDK<\/a><\/strong> will detect that no &#8220;camera&#8221; object is provided and will create an <strong>image file decoder<\/strong> instead.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-large-font-size\"><strong>Example of decoding barcodes from image files<\/strong><\/p>\n\n\n\n<p>Original OnLine URL: <a href=\"https:\/\/websdk.datasymbol.com\/appfile\/\">https:\/\/websdk.datasymbol.com\/appfile\/<\/a><\/p>\n\n\n\n<iframe src='https:\/\/websdk.datasymbol.com\/appfile\/' height=700>\n<\/iframe>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!-- READY TO GET STARTED START -->\n<div class='blue_rect blue_rect1' style='margin-top:3em; padding:2em;'>\n\n\t<h1 class='h15class'>Ready to get started?<\/h1>\n\n\t<div class='v18' style='width:60%'>\n\t\tIntegrate the DataSymbol Web SDK into your Web application in under an hour. Check out our tutorials, documentation, source code, or download the demo app to get started right away.\n\t<\/div>\n\n\t<br><br>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Barcode Scanner Web SDK<\/a>\n<\/div>\n<!-- READY TO GET STARTED STOP -->\n","protected":false},"excerpt":{"rendered":"<p>Can you decode an image file with a barcode directly on the client side in a browser?Yes, you can. In this article, we\u2019ll show how to do it using our Web SDK for websites. Why decode barcodes locally in the browser instead of on the server? Normally, you could upload the file to a server [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":375,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-barcode-scanner-web-sdk"],"_links":{"self":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/comments?post=347"}],"version-history":[{"count":15,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/347\/revisions"}],"predecessor-version":[{"id":393,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/347\/revisions\/393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media\/375"}],"wp:attachment":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media?parent=347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/categories?post=347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/tags?post=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}