Nuxt.js - How to upload image to cloudinary?

Question

I am trying to upload an image to cloudinary from the client side. I have created a Form Data and I am trying to pass that but it comes back empty.

The HTML:

<div class="my-2">
  <input
    id="image"
    ref="image"
    type="file"
    class="inputfile img"
    name="image"
    aria-describedby="imageFile"
    accept="image/*"
    @change="addImage"
  />
  <label for="image">
    <span>{{ fileName }}</span>
    <strong><i class="fas fa-upload"></i> Choose an Image&hellip;</strong>
  </label>
</div>

The addImage function thats called:

    async addImage(image) {
      try {
        this.$emit('input', image.target.files[0]);

        this.photo = this.$refs.image.files[0];
        this.photoName = this.photo.name;

        const formData = new FormData();
        formData.append('file', this.photo, this.photo.name);

        const upload = await this.$cloudinary.upload(formData, {
          upload_preset: 'jj4vb6nq',
        });

      } catch (e) {
        console.error(e.message);
        // this.error = e.message;
      }
    },

When it attempts to upload I get the following error:

{
  "message": "Invalid file parameter. Make sure your file parameter does not include '[]'"
}

Is there a better way to upload the image?

could you log your request payload when you send to cloudinary in the network tab please? — DarioRega
` FormData { } Object { upload_preset: "jj4vb6nq" } ` The formData object seems empty even though i have appended the information. — DittoGod
the log for this.photo is File { name: "Screenshot from 2020-11-05 16-12-45.png", lastModified: 1604590494854, webkitRelativePath: "", size: 291860, type: "image/png" } — DittoGod
try to change this line this.photo = image.target.files[0] — DarioRega

Michalk Michalk · Accepted Answer · 2020-11-25T13:16:48

Since you are passing an object as the file and not just the file itself you are receiving this error. The file can be the actual data (byte array buffer), the Data URI (Base64 encoded), a remote FTP, HTTP, or HTTPS URL of an existing file.

Nuxt.js - How to upload image to cloudinary?

1 Answers