How to load an image into a collection entry when creating it?

Questions and Answers
1

How to load an image into a collection entry when creating it? I’ve tried several ways but all of them just load the image into “MediaLibrary” but don’t add the image to the entry.

<form>
  <!-- Can be multiple files if you setup "collection" instead of "model" -->
  <input type="text" name="name" />
  <input type="file" name="cover" />
  <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
  const formElement = document.querySelector('form');

  formElement.addEventListener('submit', e => {
    e.preventDefault();

    const request = new XMLHttpRequest();

    const formData = new FormData();

    const formElements = formElement.elements;

    const data = {};

    for (let i = 0; i < formElements.length; i++) {
      const currentElement = formElements[i];
      if (!['submit', 'file'].includes(currentElement.type)) {
        data[currentElement.name] = currentElement.value;
      } else if (currentElement.type === 'file') {
        if (currentElement.files.length === 1) {
          const file = currentElement.files[0];
          formData.append(`files.${currentElement.name}`, file, file.name);
        } else {
          for (let i = 0; i < currentElement.files.length; i++) {
            const file = currentElement.files[i];

            formData.append(`files.${currentElement.name}`, file, file.name);
          }
        }
      }
    }

    formData.append('data', JSON.stringify(data));

    request.open('POST', `${HOST}/restaurants`);

    request.send(formData);
  });
</script>

And if you assign an image to a entry through the admin panel, the image will still not be issued in the get request.
If you really understand this, can you give an example of how to properly create a collection entry with images?

3

I have a similar scenario where my UI allows images to be uploaded as part of a collection creation/update.

First I upload the Image(s) using a similar REST call to what you use. The response is an array with Image IDs - so I extract the image IDs from the response ready for the next call.

For the next call, I pass the Image IDs to the form data.

Hope it helps