Search code examples
imagerestuploadcomponentsstrapi

STRAPI RestAPI - How to upload image to a Media field, which is lay in Component? 4.2

I have a big question about Strapi v4, I understand that a lot of people are asking it. But I spent 4 hours surfing the internet and I found many cases, but none of them are either solved or just abandoned.

The question is (see screenshots)

I have a component, it has a Media field, how can I load an image into this field using RestAPI?

I was able to load an image if my property (this is the parent of the properties collection) has just the "Media" field, without any components/dynamic zones/blocks involved.

But at the moment the implementation requires that I use a nested Media field, since this component is repeated, and it will have different items (rooms), and each room has its own photo, or an array of photos.

I'm trying to figure out what kind of request I need to make (Or create a custom controller) so that when I pass the correct data and path to formData, I would load and then bind the image to a specific field in the component?

In fact, the nesting is deeper, but in general the question is clear.

I would be grateful for any advice.

property response

last

Solution

  • I am actually find the problem, and an easy solution for this. There is no need to achieve something, writing something somewhere.

    You can use this endpoint (from strapi/admin -- DevTools -- Network)

    localhost:8080/api/properties/${id}?populate={whatever you want}

    And then just put, for example:

    InterriorGallery (component - Single) --> SubGallery (repeatable) --> [1 or any index of the place you want] --> Media (i named this field like that) -- and place id of the UPLOADED image here.

    So basically easy, make load of image array first, take id - and place with that PUT. When you will make a PUT (You can look by yourself), it will require some { data: { ...credentials} } stuff (As usuall), but in general works very easy and well.

    DONT FORGET that all relations that you have in current collection / Single type must be passed too, or either you will have an error that you need to pass it.

    With no need of custom controllers, endpoints...etc I know this might be wrong, but it is what it is.

    So, again:

    1. Load all images to /api/upload && Gather they ID in Array[]
    2. Promise.All() them all to your ${item}:${item} property in Strapi by PUT (Works for Blocks, Dynamic Zone, Components, Components-->Component)

    SOLUTION