{
  "doc": {
    "id": "api/utilities/blob",
    "title": "Cypress.Blob",
    "description": "Cypress automatically includes a Blob library and exposes it as Cypress.Blob.",
    "section": "api",
    "source_path": "/llm/markdown/api/utilities/blob.md",
    "version": "29f95bf8bb06f320986f3749f5bf09a35a409eab",
    "updated_at": "2026-09-04T10:49:54.630Z",
    "headings": [
      {
        "id": "api/utilities/blob#cypress-blob",
        "text": "Cypress.Blob",
        "level": 1
      },
      {
        "id": "api/utilities/blob#syntax",
        "text": "Syntax",
        "level": 2
      },
      {
        "id": "api/utilities/blob#usage",
        "text": "Usage",
        "level": 3
      },
      {
        "id": "api/utilities/blob#examples",
        "text": "Examples",
        "level": 2
      },
      {
        "id": "api/utilities/blob#image-fixture",
        "text": "Image Fixture",
        "level": 3
      },
      {
        "id": "api/utilities/blob#using-an-image-fixture-for-jquery-plugin-upload",
        "text": "Using an image fixture for jQuery plugin upload",
        "level": 4
      },
      {
        "id": "api/utilities/blob#getting-dataurl-string",
        "text": "Getting dataUrl string",
        "level": 3
      },
      {
        "id": "api/utilities/blob#create-an-img-element-and-set-its-src-to-the-dataurl",
        "text": "Create an img element and set its src to the dataUrl",
        "level": 4
      },
      {
        "id": "api/utilities/blob#history",
        "text": "History",
        "level": 2
      },
      {
        "id": "api/utilities/blob#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "api/utilities/blob#examples",
      "doc_id": "api/utilities/blob",
      "heading": "Examples",
      "heading_level": 2,
      "content_markdown": "## Examples\n\n### Image Fixture\n\n#### Using an image fixture for jQuery plugin upload\n\n```\n// programmatically upload the logo\ncy.fixture('images/logo.png').as('logo')\ncy.get('input[type=file]').then(function ($input) {\n  // convert the logo base64 string to a blob\n  const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png')\n\n  // pass the blob to the fileupload jQuery plugin\n  // https://github.com/blueimp/jQuery-File-Upload\n  // used in your application's code\n  // which initiates a programmatic upload\n  $input.fileupload('add', { files: blob })\n})\n```\n\n### Getting dataUrl string\n\n#### Create an `img` element and set its `src` to the `dataUrl`\n\n```\nreturn Cypress.Blob.imgSrcToDataURL('/assets/img/logo.png').then((dataUrl) => {\n  const img = Cypress.$('<img />', { src: dataUrl })\n\n  cy.get('.utility-blob').then(($div) => {\n    // append the image\n    $div.append(img)\n  })\n  cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl)\n})\n```\n",
      "section": "api",
      "anchors": [
        "examples"
      ],
      "path": "/llm/json/chunked/api/utilities/blob.json",
      "token_estimate": 151
    },
    {
      "id": "api/utilities/blob#image-fixture",
      "doc_id": "api/utilities/blob",
      "heading": "Image Fixture",
      "heading_level": 3,
      "content_markdown": "### Image Fixture\n\n#### Using an image fixture for jQuery plugin upload\n\n```\n// programmatically upload the logo\ncy.fixture('images/logo.png').as('logo')\ncy.get('input[type=file]').then(function ($input) {\n  // convert the logo base64 string to a blob\n  const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png')\n\n  // pass the blob to the fileupload jQuery plugin\n  // https://github.com/blueimp/jQuery-File-Upload\n  // used in your application's code\n  // which initiates a programmatic upload\n  $input.fileupload('add', { files: blob })\n})\n```\n",
      "section": "api",
      "anchors": [
        "image-fixture"
      ],
      "path": "/llm/json/chunked/api/utilities/blob.json",
      "token_estimate": 88
    },
    {
      "id": "api/utilities/blob#using-an-image-fixture-for-jquery-plugin-upload",
      "doc_id": "api/utilities/blob",
      "heading": "Using an image fixture for jQuery plugin upload",
      "heading_level": 4,
      "content_markdown": "#### Using an image fixture for jQuery plugin upload\n\n```\n// programmatically upload the logo\ncy.fixture('images/logo.png').as('logo')\ncy.get('input[type=file]').then(function ($input) {\n  // convert the logo base64 string to a blob\n  const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png')\n\n  // pass the blob to the fileupload jQuery plugin\n  // https://github.com/blueimp/jQuery-File-Upload\n  // used in your application's code\n  // which initiates a programmatic upload\n  $input.fileupload('add', { files: blob })\n})\n```\n",
      "section": "api",
      "anchors": [
        "using-an-image-fixture-for-jquery-plugin-upload"
      ],
      "path": "/llm/json/chunked/api/utilities/blob.json",
      "token_estimate": 84
    },
    {
      "id": "api/utilities/blob#getting-dataurl-string",
      "doc_id": "api/utilities/blob",
      "heading": "Getting dataUrl string",
      "heading_level": 3,
      "content_markdown": "### Getting dataUrl string\n\n#### Create an `img` element and set its `src` to the `dataUrl`\n\n```\nreturn Cypress.Blob.imgSrcToDataURL('/assets/img/logo.png').then((dataUrl) => {\n  const img = Cypress.$('<img />', { src: dataUrl })\n\n  cy.get('.utility-blob').then(($div) => {\n    // append the image\n    $div.append(img)\n  })\n  cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl)\n})\n```\n",
      "section": "api",
      "anchors": [
        "getting-dataurl-string"
      ],
      "path": "/llm/json/chunked/api/utilities/blob.json",
      "token_estimate": 60
    },
    {
      "id": "api/utilities/blob#create-an-img-element-and-set-its-src-to-the-dataurl",
      "doc_id": "api/utilities/blob",
      "heading": "Create an img element and set its src to the dataUrl",
      "heading_level": 4,
      "content_markdown": "#### Create an `img` element and set its `src` to the `dataUrl`\n\n```\nreturn Cypress.Blob.imgSrcToDataURL('/assets/img/logo.png').then((dataUrl) => {\n  const img = Cypress.$('<img />', { src: dataUrl })\n\n  cy.get('.utility-blob').then(($div) => {\n    // append the image\n    $div.append(img)\n  })\n  cy.get('.utility-blob img').click().should('have.attr', 'src', dataUrl)\n})\n```\n",
      "section": "api",
      "anchors": [
        "create-an-img-element-and-set-its-src-to-the-dataurl"
      ],
      "path": "/llm/json/chunked/api/utilities/blob.json",
      "token_estimate": 55
    },
    {
      "id": "api/utilities/blob#history",
      "doc_id": "api/utilities/blob",
      "heading": "History",
      "heading_level": 2,
      "content_markdown": "## History\n\n| Version | Changes |\n| --- | --- |\n| [5.0.0](/llm/markdown/app/references/changelog.md) | Return type of `arrayBufferToBlob`, `base64StringToBlob`, `binaryStringToBlob`, and `dataURLToBlob` methods changed from `Promise<Blob>` to `Blob` |\n| [5.0.0](/llm/markdown/app/references/changelog.md) | Added `arrayBufferToBinaryString`, `binaryStringToArrayBuffer` methods. |\n",
      "section": "api",
      "anchors": [
        "history"
      ],
      "path": "/llm/json/chunked/api/utilities/blob.json",
      "token_estimate": 51
    }
  ]
}