How to read barcodes in JavaScript & jQuery using Cloud API (low level) - ByteScout

How to read barcodes in JavaScript & jQuery using Cloud API (low level)

  • Home
  • /
  • Articles
  • /
  • How to read barcodes in JavaScript & jQuery using Cloud API (low level)

The following code samples will show how to read barcodes in JavaScript & jQuery using ByteScout Cloud API (low level).

Also, check this article: How to generate barcodes in JavaScript & jQuery.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BarcodeReader JQuery sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="read_barcode.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>
    <form id="form" enctype="multipart/form-data">
        <p>
            <label>Copy-paste your API Key for api.pdf.co here</label>
            <input type="text" id="apiKey" placeholder="API Key" />
        </p>
        <p>
            <label>InputFile</label>
            <input type="file" name="file" id="inputFile" />
        </p>
        <p>
            <label>Barcode Types to read</label>
            <select multiple="multiple" size="10" id="barcodeTypesToFind">
                <option selected="selected">All</option>
                <option>All1D</option>
                <option>All2D</option>
                <option>AllOMRElements</option>
                <option>AustralianPostCode</option>
                <option>Aztec</option>
                <option>CircularI2of5</option>
                <option>Codabar</option>
                <option>CodablockF</option>
                <option>Code128</option>
                <option>Code16K</option>
                <option>Code39</option>
                <option>Code39Extended</option>
                <option>Code39Mod43</option>
                <option>Code39Mod43Extended</option>
                <option>Code93</option>
                <option>DataMatrix</option>
                <option>EAN13</option>
                <option>EAN2</option>
                <option>EAN5</option>
                <option>EAN8</option>
                <option>GS1</option>
                <option>GS1DataBarExpanded</option>
                <option>GS1DataBarExpandedStacked</option>
                <option>GS1DataBarLimited</option>
                <option>GS1DataBarOmnidirectional</option>
                <option>GS1DataBarStacked</option>
                <option>GTIN12</option>
                <option>GTIN13</option>
                <option>GTIN14</option>
                <option>GTIN8</option>
                <option>IntelligentMail</option>
                <option>Interleaved2of5</option>
                <option>ITF14</option>
                <option>MaxiCode</option>
                <option>MICR</option>
                <option>MicroPDF</option>
                <option>MSI</option>
                <option>PatchCode</option>
                <option>PDF417</option>
                <option>Pharmacode</option>
                <option>PostNet</option>
                <option>PZN</option>
                <option>QRCode</option>
                <option>RoyalMail</option>
                <option>RoyalMailKIX</option>
                <option>Trioptic</option>
                <option>UPCA</option>
                <option>UPCE</option>
                <option>UPU</option>
                <option>Checkbox</option>
                <option>Circle</option>
                <option>Oval</option>
                <option>UnderlinedField</option>
                <option>HorizontalLine</option>
                <option>VerticalLine</option>
                <option>Segment</option>
            </select>
        </p>
        <button type="button" id="submit">Read</button>
    </form>

    <div id="errorBlock">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <ul id="errors"></ul>
    </div>

    <div id="resultBlock">
        <h2>Result:</h2>
        <pre id="result"></pre>
    </div>

</body>
</html>

read_barcodes.js

$(document).ready(function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();
});

$(document).on("click", "#submit", function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();

    var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at https://bytescout.com/

    var urlUploadFile = "https://api.pdf.co/api/v1/file/upload?apiKey=" + apiKey;

    var formData = new FormData($("#form")[0]);

    $.ajax({
        url: urlUploadFile,
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (fileId) {
            ReadBarcodes(apiKey, fileId);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function () {
                $("#errors").append($("<li></li>").html(this));
            });
        }
    });
});

function ReadBarcodes(apiKey, fileId) {
    var url = "https://api.pdf.co/api/v1/barcodereader/read?apiKey=" + apiKey;

    var options = {
        "properties": {
            "startPageIndex": 0,
            "endPageIndex": 0,
            "barcodeTypesToFind": {},
        },
        "input": fileId,
        "inputType": "fileId"
    };

    var barcodeTypesToFind = {};
    $.each($("#barcodeTypesToFind").val(), function () {
        barcodeTypesToFind[this] = true;
    });
     options["properties"]["barcodeTypesToFind"] = barcodeTypesToFind;

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify(options),
        contentType: "application/json",
        success: function (response) {
            $("#resultBlock").show();
            $("#result").html(response);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function () {
                $("#errors").append($("<li></li>").html(this));
            });
        }
    });
}

Tutorials:

prev
next