Upload an image file using JSON:API

Whilst I had regularly used HAL to upload files through REST API, this is no longer an option given Hal is now deprecated and will be dropped in Drupal 10.  Time to explore JSON:API.

Drupal modules to be installed

You will need to install

• JSON:API
• Media

Configuration for JSON:API

Alter the JSON:API to accept all:

Path: Administration > Configuration > Web services > JSON:API

Select: Accept all JSON:API create, read, update, and delete operations.

Configuration for Media

Path: Administration > People > Permissions

Under media add permissions for authenticated user

• Create media
• Update own media

Postman testing

Testing the image file upload I'll do through Postman and provide the configuration below.

POST    http://{domain}/jsonapi/media/image/field_media_image/

Headers

Content-Type: application/octet-stream
Accept: application/vnd.api+json
X-CSRF-Token: {token}
Content-Disposition: file;filename="{filename}"

Body

Use binary and add an image

Response

A successful response will be:

{
    "jsonapi": {
        "version": "1.0",
        "meta": {
            "links": {
                "self": {
                    "href": "http://jsonapi.org/format/1.0/"
                }
            }
        }
    },
    "data": {
        "type": "file--image",
        "id": "f17322ca-6e4f-4c0b-83b7-e25f362c841c",
        "links": {
            "self": {
                "href": "http://{domain}/jsonapi/file/image/f17322ca-6e4f-4c0b-83b7-e25f362c841c"
            }
        },
        "attributes": {
            "drupal_internal__fid": 8954,
            "langcode": "en",
            "filename": "image-32x32.png",
            "uri": {
                "value": "public://2022-06/image-32x32_0.png",
                "url": "/sites/default/files/2022-06/image-32x32_0.png"
            },
            "filemime": "image/png",
            "filesize": 105784,
            "status": false,
            "created": "2022-06-24T01:52:39+00:00",
            "changed": "2022-06-24T01:52:39+00:00",
            "path": {
                "alias": null,
                "pid": null,
                "langcode": "en"
            },
            "metatag": null,
            "field_image_alt_text": null,
            "field_image_title_text": null
        },
        "relationships": {
            "file_type": {
                "data": {
                    "type": "file_type--file_type",
                    "id": "b91d750b-f6e9-4ae5-8d9c-a16f3ebcc23f",
                    "meta": {
                        "drupal_internal__target_id": "image"
                    }
                },
                "links": {
                    "related": {
                        "href": "http://{domain}/jsonapi/file/image/f17322ca-6e4f-4c0b-83b7-e25f362c841c/file_type"
                    },
                    "self": {
                        "href": "http://{domain}/jsonapi/file/image/f17322ca-6e4f-4c0b-83b7-e25f362c841c/relationships/file_type"
                    }
                }
            },
            "uid": {
                "data": {
                    "type": "user--user",
                    "id": "2703a587-307e-4f8b-8af8-77a3dc5887f8",
                    "meta": {
                        "drupal_internal__target_id": 200
                    }
                },
                "links": {
                    "related": {
                        "href": "http://{domain}/jsonapi/file/image/f17322ca-6e4f-4c0b-83b7-e25f362c841c/uid"
                    },
                    "self": {
                        "href": "http://{domain}/jsonapi/file/image/f17322ca-6e4f-4c0b-83b7-e25f362c841c/relationships/uid"
                    }
                }
            }
        }
    },
    "links": {
        "self": {
            "href": "http://{domain}/jsonapi/file/image/f17322ca-6e4f-4c0b-83b7-e25f362c841c"
        }
    }
}

The key item of data to grab here is 

{
   "attributes": {
            "drupal_internal__fid": 8954,
   }
}

The file id {fid}