Add Image into nested components

Questions and Answers
1

Hello, I am very new in strapi and I don’t know, how strapi works internally in backend but I have one hosted strapi given by the client and I am working on it.

I have problem to upload image into components component

like

I have one collection called order, on that I have one component called opc and on that I have one component called director and on that I have one field called ‘image’, I want to upload my image on that and also want to link that.

order > opc > director ( want to upload here in image field )

image
image1600×872 46.2 KB

Code

const fileData = new FormData();
fileData.append(
  `files`,
  value,
  `${new Date().getTime()}_${key}_${type[1]}`
);
// fileData.append("ref", "order");
fileData.append("ref", "order.opc.director");
// fileData.append(`refId`, order);
fileData.append(`refId`, order.opc.director.id);
fileData.append(`field`, 'image');
fileData.append(
  "fileInfo",
  JSON.stringify({ alternativeText: value.name })
);
const res = await axios({
  method: "POST",
  url: "https://api.example.com/upload",
  headers: {
    Authorization: `Bearer ${token}`,
    "Content-type": "multipart/form-data",
  },
  data: fileData,
});

is it right co

System

  • Node.js version: 14.17.0
  • NPM version: 7.11.2
  • Operating system: Ubuntu 20.04

can someone please help me to add image on that component?

Here is the issue of github Add Image into nested components · Issue #10478 · strapi/strapi · GitHub

1 Like
2

Hi @nisharg007, can you share information about what happens after you execute your code? Is there an error you’re getting back from the Strapi backend?

3

I am getting these errors when performing the request

Code

fileData.append(
`files`,
value[i],
`${new Date().getTime()}_${key}_${type[1]}`
);
fileData.append("ref", "order.opc.director");
fileData.append(`refId`, order.opc.director.id);
fileData.append(`field`, 'image');

Error

12|strapi-dev  | [2021-06-18T17:27:22.003Z] error TypeError: Cannot read property 'associations' of undefined

If I am trying to follow the docs as suggested here https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#upload-file-during-entry-creation

TIP

If you want to upload files for a component, you will have to specify the index of the item you want to add the file to. Example files.my_component_name[the_index].attribute_name

Is it required to specify index on Single Component ( files.opc[0].director[0].image )

Code

fileData.append(
`files.opc[0].director[0].image`,
value[i],
`${new Date().getTime()}_${key}_${type[1]}`
);
fileData.append("ref", "order.opc.director");
fileData.append(`refId`, order.opc.director.id);
fileData.append(`field`, 'image');

Error

{"statusCode":400,"error":"Bad Request","message":"Bad Request","data":{"errors":[{"id":"Upload.status.empty","message":"Files are empty"}]}}

Please help me on that, I do not understand how I figure this out

1 Like
4

@nisharg007
Have u found out the solution to upload the media in nested component?

3 Likes
5

any update on this one? Many people is having this issue

6

interest too? any solve? even when I upload the image first and then make a PUT request with the image (its in a next component) it does not save.

7

Any update?, i am having the same problem, in my case, there is no errors but the images do not upload, i have a component called licensePhotos inside my model,
my code: const formData = new FormData(); formData.append("files.licensePhotos.drivingLicenseFrontPhoto", payload.files.drivingLicenseFrontPhoto );

8

2024 and it still do not work… sadly :confused:

1 Like