Upload an external profile picture from facebook and connect it to model in strapi

Questions and Answers
1

Hi,

I am trying to upload a profile picture from facebook oauth login to strapi. However I am not getting it to work. I tried almost everything, buffers, arrayBufferss, base64, stringified buffers. All result in the files in the request to be undefined. Which I don’t get.

I get an error on the api call /upload: Files are empty. I know for sure the files are not empty but they are appended to the formData.

This is one of the examples that I wrote. Tried it with node-fetch, axios but both give the same results… I hope that someone has experienced this same issue and is able to help me out with this.

        const buffer = await fetch(`${profile.avatar}`).then((res) =>
      res.buffer()
    );

    form.append("files", buffer);
    form.append("ref", "user");
    form.append("refId", createdUser.id);
    form.append("field", "avatar");
    form.append("source", "users-permissions");

    const userJwt = await axios
      .get(
        `${process.env.SERVER_URL}auth/${provider}/callback?access_token=${access_token}`
      )
      .then((res) => res.data);

    // UPLOAD AVATAR IMAGE TO NEWLY CREATED USER
    await fetch(`${process.env.SERVER_URL}upload`, {
      method: "POST",
      body: form,
      headers: {
        Authorization: `Bearer ${userJwt.jwt}`,
        ...form.getHeaders(),
      },
    });

Environment
I am running on the latest stable version of strapi

2

Can you repeat the request and share a screenshot with details from the: Developer Tools → Network → Request Headers & Form Data sections

Don’t forget to blur token value & other private stuff.

1 Like
3

Yes, however there is no developer tools since it’s all happening inside strapi itself. (server) Will share the request soon.