Upload multiples files to an entry after its creation (and how to add a caption ?)

System Information
  • Strapi Version: 3.2.3
  • Operating System: alpine3.12
  • Database: postgres 13
  • Node Version: node 12.19
  • NPM Version: ?
  • Yarn Version:

Hello, community,

I am trying to upload multiples files to an entry already created.

async addImagesToPost(images, postId) {
  const bodyFormData = new FormData()

  bodyFormData.append('ref', 'posts')
  bodyFormData.append('refId', postId)
  bodyFormData.append('field', 'images')
  images.forEach(({ file }) => bodyFormData.append(`files.images`, file, file.name))

  try {
    // the client is an axios instance.
    return await client.post('/upload', bodyFormData)
  } catch (error) {
    console.error("error while adding images to post", error)
    return error.response
  }
}

This is the code I am using and it doesn’t work. Even if instead of using files.images I am using files[] (which a standard look at here in the example) or 'files.' + index it does not works.

If I am uploading a single file it works bodyFormData.append(files, images[0].file, images[0].name)

They said how to upload multiples files at the same time as creating the entry but not when we want to add some files to an entry.

At the same time in the documentation there no mention of how to add a caption for instance on an image.

If somebody has the answer it will be great :slight_smile:

Everything looks fine, expect:

It should be just files, without .images

images.forEach(({ file }) => bodyFormData.append(`files`, file, file.name))

I don’t know if you are uploading from backend or frontend, or if you set the headers to the axios instance, but if you use axios on the backend, then I want to mention that you need to use getHeaders() in Node.js because Axios doesn’t automatically set the multipart form boundary in Node.

So for the backend, the correct axios request will be:

return await client.post('/upload', bodyFormData,{
    headers: {
      ...data.getHeaders(),
    },
  })
1 Like

I am from the client-side. Okay so just uploading to files works with multiples files too.
And for the caption, there is any way to add it? Or do I need to create a route specifically for updating an image id with a caption?

Yes, you can add them, in fileInfo:

bodyFormData.append('fileInfo', '{"caption":"caption text","alternativeText":"alternative text"}');

Currently, there is no way to add caption and alternativeText for multiple files, you can send it only for a single file. If you send it with multiple files then only the first one will get them.

I would recommend sending each file individually to the /upload path, something like:

   images.forEach(({ file }) => {
        const bodyFormData = new FormData()
        bodyFormData.append('ref', 'posts')
        bodyFormData.append('refId', postId)
        bodyFormData.append('field', 'images')
        bodyFormData.append(`files`, file)
        bodyFormData.append('fileInfo', `{"caption":"${file.caption}","alternativeText":"${file.alternativeText}","name":"${file.name}"}`);
        client.post('/upload', bodyFormData)
    })
1 Like

Amazing, you should add it to the documentation! It’s a must-have information :slight_smile:

Yeah, a lot of things are not documented yet. Also a lot of cool things are made by contributors and not all of them update the documentation.