Allow creation of file entities from binary data

I tried converting the base64 for the image and when I attached the body post : [..binarydata..] it creates a blank image on the rest?

and no documentations are provided on what binary data should we provide?

I tried to upload image files into an image filed using the JSON API. However, I get an error (response 500) when I try to do Step 1 of Flow 2. Below is my python code. Where did I do wrong? Really appreciate some help here. I am using JSON API Version: 8.x-2.4.

data = open("test.png","rb").read()
data = bytearray(data)

 header = {'X-CSRF-Token': auth['head']['X-CSRF-Token'],
          "Content-Type": 'application/octet-stream',
          "Accept": "application/vnd.api+json",
          "Content-Disposition": 'file; filename="test.png"'}

pst = requests.post('http://mysite.com/jsonapi/node/cell/field_image', 
                         data=data, headers=header, cookies=auth['cookie'])

It seems that that many people are equating "binary" with "base64" (in this thread and on Slack). These are not the same thing: binary !== base64.

You do not need to convert your data at all before sending it to Drupal.

The file sent, byte-for-byte, exactly as it sits in your filesystem. You do not need to encode the file. Just send it "as-is".

If you're working in JavaScript, this typically means that you should be setting the data attribute of your request to a Blob or File object.

Here is an example of uploading a file using the browser's fetch API with a file form input. (this example is not using Drupal, but it does demonstrate how to add "binary file data" to a request).

These two images show how to use postman to test file upload by JSON:API

1. Send a POST request using POSTMAN
POST /jsonapi/node/article/field_image
[example:{{url}}/jsonapi/node/test/field_image]
1.1. In Authorization tab
Select Type [example: OAuth 2.0 ]
Enter Access Token [example: eyJ0eXAiOiJKV1Qi.....]
1.2. In Headers Tab
Add the following key and value
1. Content-Type application/octet-stream
2. Accept application/vnd.api+json
3. Content-Disposition file; filename="Testing1.jpg"
1.3. In Body Tab
Select Binary and select file with .txt
=> sample.txt [Image file converted to binary or base64]

If success you should get a status message 201 Created

2. Get newly created file entity
GET /jsonapi/file/file/{UUID of new file entity}
[example:{{url}}/jsonapi/file/file/56256e3a-a5c1-46fd-aac7-a1cad1b51e97]

If exists you should get a status message 200 OK

3. Create the entity using a POST and add the file required for image field
POST /jsonapi/node/article
[example:{{url}}/jsonapi/node/test]
3.1. In Authorization tab
Select Type [example: OAuth 2.0 ]
Enter Access Token [example: eyJ0eXAiOiJKV1Qi.....]
3.2. In Headers Tab
Add the following key and value
1. Content-Type application/vnd.api+json
2. Accept application/vnd.api+json
3.3. In Body Tab
Select raw and add the following
{
"data": {
"type": "node--test",
"attributes": {
"title": "Testing1"
},
"relationships": {
"field_image": {
"data": {
"type": "file--file",
"id": "56256e3a-a5c1-46fd-aac7-a1cad1b51e97", {UUID of new file entity}
"meta": {
"alt": "Json Uploaded Testing1",
"title": "Json Uploaded Testing1",
"width": null,
"height": null
}
}
}
}
}
}

If success you should get a status message 201 Created

4. If the text file uploaded is base64 encoded, Image will not be displayed properly
Create a custom module with hook_node_presave function to decode the Image
=> Use base64_decode to decode the Image

The user can't upload a profile picture.

The endpoint "jsonapi/user/user/user_picture" needs "administer users" permission but we don't want to set this permission to all users...

No response from my friend Google, it seems that nobody use the "user_picture" field with a headless Drupal site =)

Does somebody know how to achieve this properly ? Thank you !

Is there an example for doing this with drupal http client? Especially the file upload part.

I am trying to do this, but always ending up with No route found that matches "Content-Type: application/octet-stream" in Drupal\Core\Routing\ContentTypeHeaderMatcher->filter().

I've done this with postman and Unirest PHP successfully like described in the example but struggling with the Drupal http client.

The "flow 1" solution works great if the file field has only one value.
For multiple values field, only the last uploaded file gets added to the host entity

Is there any way to ensure the uploaded file ends up in a particular directory?

In this video, we will explain how to upload and delete the file using Postman Platform and JSON API module for Drupal 9.

There are two flows to upload a file the first flow requires only a single HTTP request the second requires two HTTP requests, which are used in this video.

https://www.youtube.com/watch?v=6WQuk5TfRc8

Hi,
The following snippet code explains how to upload an image file with Dart language to Drupal using JSON API module

Example 1

import 'package:http/http.dart' as http;


    //The source of file could be image picker or file path or anything else
    final XFile? file = PATH_OR_IMAGEPICKER;

    String fileName = 'myFile.jpg';

     var headers = {
      'Content-Type': 'application/octet-stream',
      'Accept': 'application/vnd.api+json',
      'Content-Disposition': 'file; filename="${fileName}"',
      'Authorization':
          'Bearer ACCESS_TOKEN'
    };       

    var request = http.Request(
        'POST',
        Uri.parse(
            'BASEPATH/jsonapi/node/article/field_image'));
 
    request.headers.addAll(headers);        

    var imageBytes = await file!.readAsBytes();
    request.bodyBytes = imageBytes;
 
    http.StreamedResponse response = await request.send();

    if (response.statusCode == 200) {
      print(await response.stream.bytesToString());
    } else {
      print(response.reasonPhrase);
    }

Example 2 with upload progress

    final XFile? file = PATH_OR_IMAGEPICKER;

    String fileName = 'myFile.jpg';

    final stream = file!.openRead();
    int length = await file.length();
    final client = new HttpClient();

    final request = await client.postUrl(
        Uri.parse('BASEPATH/jsonapi/node/article/field_image'));
    request.headers.add('Content-Type', 'application/octet-stream');
    request.headers.add('Accept', '*/*');
    request.headers.add('Content-Disposition', 'file; filename="newwww.jpg"');
    request.headers.add('Authorization',
        'Bearer ${authController.tokenCredentials()!.accessToken}');
    request.contentLength = length;
     
    int byteCount = 0;
    Stream<List<int>> stream2 = stream.transform(
      StreamTransformer.fromHandlers(
        handleData: (data, sink) {
          byteCount += data.length;
          print(byteCount);
          sink.add(data);
        },
        handleError: (error, stack, sink) {},
        handleDone: (sink) {
          sink.close();
        },
      ),
    );

    // await request.addStream(stream);
    await request.addStream(stream2);
    final response = await request.close();

  if (response.statusCode == HttpStatus.created) {
      var body = null; //await response.stream.bytesToString();
      var result = jsonDecode(body);
      if (result['data'] != null) {
        return FileModel.fromJson(result);
      }
    } else {
      if (response.statusCode == HttpStatus.unauthorized) {
          //Refresh token or redirect to login
      }
      print(response.statusCode);
    }

Thank you so much for your attention and participation.