[v4] Upload files related to entry is not set the field in content type but file uploaded

[niwasmala]

Bug report

Describe the bug

Unable to set field when upload files related to entry. File is uploaded but the field is not set.

Steps to reproduce the behavior

1. Create content type person with field name (short text) and avatar (media)
2. Create new person data with name "John Doe" and empty avatar
3. Set permission for public to allow upload, find, and find-one
4. Send http request to upload as mentioned in documentation
5. See person data
6. Field avatar is not set

Expected behavior

Person is set with correct avatar.

Screenshots

Content Type Person

Set permissions for public to upload

CURL api with file

File uploaded in media

Field avatar is not set

Code snippets

CURL used to call api

curl -F "files=@logo.jpg" -F "ref=person" -F "refId=1" -F "field=avatar" http://localhost:1337/api/upload

System

• Node.js version: 14.18.0
• NPM version: 7.23.0
• Strapi version: 4.0.0
• Database: sqlite
• Operating system: Windows 10

Additional context

No additional context

[oliveirarennan]

I had the same problem here.
Another symptom occurs when I try to delete the image in the Media Library, I got a 500 error.

[trcalek]

Same here, it only uploads file to media library without any connection to related post. There is also no "related": [] array in json output as it is on 3.6.8.. (postman, fetch)

File can't be deleted from UI.

Deletion atempt output

[emillo]

Same problem, mentioned also in this forum post: https://forum.strapi.io/t/cant-add-image-to-existing-entry-strapi-v4/13331

I've found that using "api::author.author" (my content-type being "author") in field ref it does the linking

For the problem in deleting api-uploaded files from the admin I've opened an issue: #11939

[kasonde]

@emillo 's response is exactly correct. The entity service in v4 takes uids and not names anymore. So the entity is not found during the linkage. I've created a PR to fix this in the docs.

[derrickmehaffy]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/cant-add-image-to-existing-entry-strapi-v4/13331/6

Spend quite some time figuring it out so for those who were looking how to reference users-permissions user entity - it is plugin::users-permissions.user:

        const formData = new FormData();
        formData.append('files', selectedFile);
        formData.append('ref', 'plugin::users-permissions.user');
        formData.append('refId', data.id);
        formData.append('field', 'avatar');
        formData.append('source', 'users-permissions');

By the way, after checking the code of Upload.js it doesn't seem we use source anymore there, even though it is being mentioned in the docs. https://docs.strapi.io/developer-docs/latest/plugins/upload.html#upload-files-related-to-an-entry

[goodpixels]

This still doesn't work for me. Perhaps I am doing something wrong, but no matter what, the file gets uploaded but it never gets linked to the entry.

api/article/content-types/article/schema.json

{
  "kind": "collectionType",
  "collectionName": "articles",
  "info": {
    "singularName": "article",
    "pluralName": "articles",
    "displayName": "Article",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {
    "i18n": {
      "localized": true
    }
  },
  "attributes": {
    "title": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string",
      "required": true
    },
    "text": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "richtext",
      "required": true
    },
    "tags": {
      "type": "relation",
      "relation": "manyToMany",
      "target": "api::tag.tag",
      "inversedBy": "articles"
    },
    "photos": {
      "allowedTypes": [
        "images"
      ],
      "type": "media",
      "multiple": true,
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    }
  }
}

localhost:7331/api/articles/1

{
"data": {
"id": 1,
"attributes": {
"title": "Test article in English",
"text": "This is to check if i18n works correctly.",
"createdAt": "2022-07-23T16:28:58.111Z",
"updatedAt": "2022-08-02T17:04:29.467Z",
"publishedAt": "2022-08-02T17:04:29.465Z",
"locale": "en-GB"
}
},
"meta": {}
}

Fetch POST request

fetch("http://localhost:7331/api/upload?locale=en-GB", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "accept-language": "en-GB",
    "authorization": "Bearer XXX",
    "cache-control": "no-cache",
    "content-type": "multipart/form-data; boundary=----WebKitFormBoundaryuRzS9NOHDUz9BbVB",
    "pragma": "no-cache",
    "sec-ch-ua": "\".Not/A)Brand\";v=\"99\", \"Google Chrome\";v=\"103\", \"Chromium\";v=\"103\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"macOS\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-site"
  },
  "referrer": "http://localhost:3000/",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "------WebKitFormBoundaryuRzS9NOHDUz9BbVB\r\nContent-Disposition: form-data; name=\"files\"; filename=\"bradpitt.webp\"\r\nContent-Type: image/webp\r\n\r\n\r\n------WebKitFormBoundaryuRzS9NOHDUz9BbVB\r\nContent-Disposition: form-data; name=\"data\"\r\n\r\n{\"ref\":\"api::article.article\",\"refId\":\"1\",\"field\":\"photos\"}\r\n------WebKitFormBoundaryuRzS9NOHDUz9BbVB--\r\n",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

Request body

{
    "data": {
        "ref": "api::article.article",
        "refId": "1",
        "field": "photos",
    },
    "files": (binary)
}

Request response

[
  {
    "id": 142,
    "name": "bradpitt.webp",
    "alternativeText": null,
    "caption": null,
    "width": 681,
    "height": 383,
    "formats": {
      "thumbnail": {
        "name": "thumbnail_bradpitt.webp",
        "hash": "thumbnail_bradpitt_53a7b475f1",
        "ext": ".webp",
        "mime": "image/webp",
        "path": null,
        "width": 245,
        "height": 138,
        "size": 3.93,
        "url": "/uploads/thumbnail_bradpitt_53a7b475f1.webp"
      },
      "small": {
        "name": "small_bradpitt.webp",
        "hash": "small_bradpitt_53a7b475f1",
        "ext": ".webp",
        "mime": "image/webp",
        "path": null,
        "width": 500,
        "height": 281,
        "size": 9.44,
        "url": "/uploads/small_bradpitt_53a7b475f1.webp"
      }
    },
    "hash": "bradpitt_53a7b475f1",
    "ext": ".webp",
    "mime": "image/webp",
    "size": 17.11,
    "url": "/uploads/bradpitt_53a7b475f1.webp",
    "previewUrl": null,
    "provider": "local",
    "provider_metadata": null,
    "createdAt": "2022-08-02T17:12:46.594Z",
    "updatedAt": "2022-08-02T17:12:46.594Z"
  }
]

Expected result

File is uploaded successfully AND linked to existing Article with ID 1

Actual result

File is uploaded correctly but NOT linked to existing Article with ID 1

Please refer to the below screenshots:

Tested with 4.2.3 and 4.3.2.

[vileen]

@goodpixels perhaps the issue is that you're nesting fields?
My body looks like this:

without any wrapping in the data object.

Also, for the image to be replaced after the first upload, I first had to remove the old connection and then upload a new image.

[xargr]

make sure you have enable the upload permission and then try the below…

<input type="file" accept="image/*" onChange={(e) => uploadImg(e.target.files[0])} /> 

const formData = new FormData();
  formData.append("files", file);
  formData.append("ref", "api::collection:collection");
  formData.append("refId", "collection's_record_id");
  formData.append("field", "file_field");

  const image = await fetch(`${config.BACKEND_URL}/api/upload`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${session.jwt}`
    },
    body: formData
  });

cheers

[goodpixels]

Thank you all for contributions. This has now been resolved!

[xargr]

@niwasmala

the ref should reference the collection path like api::event.event , also I see the field called Avantar and through request you send avantar