Picture Upload Problem

Questions and Answers
1

hi my user fields have a component named image which it has 3 field: an image a boolean named confiremed and a boolian named denied. both booleans are false by deafult and they are privete . denied field is for the front end to notify them if that picture is denied . and if that picture is confiremed they cant change or upload image anymore . the only part that its causes a problem is the part that i have to upload my image to /upload and then save it to user field if i deny the picture they upload a new one the last image they have added wont be deleted so that would cause a HUGE problem . is there anyways i can save the image binary ? so if a new picture gets uploaded the last one removes ? if not how can i overwrite the upload function?

2

@Yousef_Borhani I would need to look at the code more, and hear what you are looking for more exactly. Could you set up a time on my calendar? Calendly - Christopher Wray @ Soltech

Thanks!

3

sure tnx a LOT

4

yousef is a friend of mine btw ill notice him about the problem xd

1 Like
5

@kouroshtajalliepour ok sounds good.

6

Take a look at my custom update controller for clients, which updates the client’s data and their avatar photo. The old avatar gets deleted.

const { parseMultipartData, sanitizeEntity } = require('strapi-utils');
const _ = require('lodash');

module.exports = {
  async update(ctx) {
    //id of the client which I want to update
    const { id } = ctx.params;
    let entity;

    //get the existing object of the client, if it doesnt exist then stop here.
    let client = await strapi.services.clients.findOne({ id });
    if (!client) {
      return ctx.badRequest(`Client was not found.`);
    }

    if (ctx.is('multipart')) {
      const { data, files } = parseMultipartData(ctx);

      //check if request constains any files
      if (!_.isEmpty(files)) {
        //if client has an existing avatar (otherwise it returns null)
        if (client.avatar) {
          //get the current avatar and delete it
          const file = await strapi.plugins['upload'].services.upload.fetch({ id: client.avatar.id });
          if (!file) {
            return ctx.notFound('file.notFound');
          }
          await strapi.plugins['upload'].services.upload.remove(file);
        }
        //update the client with new data and avatar
        entity = await strapi.services.clients.update({ id }, data, {
          files,
        });
      } else {
        //update client without files
        entity = await strapi.services.clients.update({ id }, data);
      }
    } else {
      entity = await strapi.services.clients.update({ id }, ctx.request.body);
    }
    return sanitizeEntity(entity, { model: strapi.models.clients });
  },
};
7

hi tnx a lot for the help.
i got how can handle it . but in the first part i get an error from

parseMultipartData

and that is “Invalid ‘data’ field. ‘data’ should be a valid JSON.”

this is the data im sending from front end

let formData = new FormData();
formData.append(‘files’, this.file);
formData.append(‘data’, “example”);
const res2 = await Axios.put(“exampleURL”,
formData,
{
headers: {
‘Content-Type’: 'multipart/form-data
}
}
)

i know im sending the data the wrong way i dont know how should i send it
and ty again for your help mate <3

8

data should contain the data you want to update, in case you are making a request to an API /clients, and you want to update the client’s Firstname and Avatar that would be:

formData.append(‘files’, this.file); //avatar here, as file
formData.append(‘data’, '{"firstname":"Sunny Son"}'); //other Clients fields that need to be updated

Please note that in this case the object for data should be stringified when you are sending also the file. This is why I put it between single quotes.

1 Like
9

tnx a lot u have saved me 3 times now <3