How do you update an image from the Front End

Questions and Answers
1

I’ve been trying different methods, and can update information like text, but can’t seem to figure out how to update an existing image using both GraphQL and REST.

2

Do you mean upload a new image or update the current image attached to an entry?

3

Update current image with a PUT call. I have accomplished POST an entry with an Image, but would like to update it. A user story example would be an individual wanting to update their profile picture.

4

I am also trying to accomplish the same, update the entry with new image. Any solution?

5

Nothing yet. I’ll probably be picking it back up soon, and post once I get a solution. I might just delete and reallocate, but even then it doesn’t seem intuitive. I know you can do it on the backend GUI, so it’s got to be possible on programmatically.

1 Like
6

@Abe_Kim @Jagadeeswar I am also facing the same issue. Have you found a solution?

7

The answer is here: Upload plugin | Strapi 5 Documentation

I wrote this form to update the profile field that I added to the user model, so users can update their profile photo. Here’s how:
Of course, be careful to only allow it for authenticated users.

<form>
  <input type="file" name="files" />
  <input type="submit" value="Submit" />
</form>

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

  form.addEventListener('submit', async (e) => {
   event.preventDefault();
    const formData = new FormData(event.target);
    formData.append("ref", "plugin::users-permissions.user");
    formData.append("refId", "1"); // here is user's "id", in the docs says "documentId" but don't works for me. 
    formData.append("field", "profile");

    await fetch('/api/upload', {
      method: 'post',
      body: formData
    });
  });
8

“users-permissions” en “user” section select only “me”, so the user can only see and change his own data.