How to upload files at entry creation with the Upload Plugin?

Discord Q&A strapi-questions
1

Relevant documentation Upload | Strapi Documentation

I can’t an entry to a collection and multiples files at the same time in flutter. I managed to create an entry and upload files in separate POST request, but couldn’t figure out how to link them like described in the documentation, so I tried to create and entry and upload the files at the same time, like described here Upload | Strapi Documentation , to no avail. How exactly should the json looks like? I have something like this

{
    "data": {
        "id": 10,
        "ref": 1,
        "answeredAt": "2024-05-28T21:03:55.869Z",
        "answers": [
           {
                "__component": "answer.text",
                "instruction": "aaaaaaaaaaaa",
                "options": null
            },
            {
                "__component": "answer.pictures",
                "instruction": "My Pictures",
                // this is a Media Content-Type, as defined by the upload plugins
                "medias": [ 
                    // ????????
                    // What to place here
                ]
            }
        ]
    }
}

This topic has been created from a Discord post (1255962672852111511) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

I managed to convert my request to a form data instead of a json body, now I need to figure out the format in which it wants each form data entry, I’m trying to decipher this tip from the docs

If you want to upload files for a repeatable component, you will have to specify the zero-based index of the item you want to add the file to, using the following syntax: files.my_component_name[the_index].attribute_name. For instance, if you put 3 components and the file is for the second one, the index will be 1.

really confusing

3

When uploading the files, are you getting the return data from the file uploads, that’s what you would have to add to each “media”

4

I tried to do what you suggested, but according to the docs, you need these fields in order to link an upload with an entry

I couldn’t figure out what exactly is each field, so I went the “Upload files at entry creation” route and managed to make it work.

Instead of your usual HTTP Content-Type Json Body, you need a FormData, your json body goes into the FormData as the “value” of a “data” key. Then, each file is uploaded with an specially formatted key. The pattern is 'files.MY_COMPONENT.MY_FIELD, so let’s say you have a ContentType with a “name” and a “album” field, you need to upload the file with the key files.album, and the value is the file bytes.

My working example in flutter


  @override
  Future<int> createOrUpdateAnswer(
      AnswerModel myAnswer) async {
    final _extra = <String, dynamic>{};
    final queryParameters = <String, dynamic>{};
    final _headers = <String, dynamic>{};
    final _data = FormData();
    _data.fields.add(MapEntry(
      'data',
      jsonEncode(checklist),
    ));
    for (int i = 0; i < (myAnswer.answers?.length ?? 0); i++) {
      final answer = myAnswer.answers![i];
      for (final media in answer.mediaPaths) {
        final file = File(media);
        _data.files.add(MapEntry(
          'files.answers[$i].medias',
          await MultipartFile.fromFile(file.path,
              contentType: MediaType('application', 'octet-stream'),
              filename: basename(file.path)),
        ));
      }
    }

    final _result = await _dio.fetch<int>(_setStreamType<int>(Options(
      method: 'POST',
      headers: _headers,
      extra: _extra,
      contentType: 'multipart/form-data',
    )
        .compose(
          _dio.options,
          '/answers',
          queryParameters: queryParameters,
          data: _data,
        )
        .copyWith(
            baseUrl: _combineBaseUrls(
          _dio.options.baseUrl,
          baseUrl,
        ))));
    final value = _result.data!;
    return value;
  }
5

My ContentTypes