Andrew Fletcher published: 24 June 2022 2 minutes read
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}