---
title: "Image uploader"
date: "2023-10-05T01:08:51+00:00"
summary: "Easily upload and manage images on your website with our intuitive Image Uploader tool. Streamline your content creation process and enhance your site's visual appeal with this user-friendly form element."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/image-uploader"
id: "211c351b-feda-409a-a7bc-fc1767bfc0d4"
---

Schema:

    {
      "type": "object",
      "properties": {
        "type": {"type": "string", "pattern": "^form-field$"},
        "id": {"type": "string", "pattern": "^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$"},
        "machine_name": {"type": "string"},
        "data": {
          "type": "object",
          "properties": {
            "uid": {"type": "string","pattern": "^form-image$"},
            "title": {"type": "string"},
            "value": {"type": "string"}
          }
        }
      },
      "required": ["id", "type", "data"]
    }
    

Example output:

Given "Image uploader" form element on a component set up like so

![32612466-Screenshot%202023-12-04%20at%2009.24.22.png](https://acquia.widen.net/content/e010a198-322c-4472-8cdd-c46ad7f309ad/web/32612466-Screenshot%202023-12-04%20at%2009.24.22.png)

And used on Node layout canvas like so

![924b48f2-Screenshot%202023-12-06%20at%2001.06.01.png](https://acquia.widen.net/content/7f55a968-6315-499c-9d32-be447188bed7/web/924b48f2-Screenshot%202023-12-06%20at%2001.06.01.png)

JSON:API output for this form field will be this:

    {
      "type": "form-field",
      "id": "42b49f68-9aab-4fab-af3c-df019d6401ab",
      "machine_name": "image-uploader",
      "data": {
        "uid": "form-image",
        "title": "Image uploader",
        "value": "https://sitestudiodocs.acquia.com/sites/default/files/2023-11/guac.jpg"
      }
    }