title: Nuxt.js - How to upload image to cloudinary?
body: <p>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.</p>
  <p>The HTML:</p>
  <pre><code>&lt;div class=&quot;my-2&quot;&gt;
    &lt;input
      id=&quot;image&quot;
      ref=&quot;image&quot;
      type=&quot;file&quot;
      class=&quot;inputfile img&quot;
      name=&quot;image&quot;
      aria-describedby=&quot;imageFile&quot;
      accept=&quot;image/*&quot;
      @change=&quot;addImage&quot;
    /&gt;
    &lt;label for=&quot;image&quot;&gt;
      &lt;span&gt;{{ fileName }}&lt;/span&gt;
      &lt;strong&gt;&lt;i class=&quot;fas fa-upload&quot;&gt;&lt;/i&gt; Choose an Image&amp;hellip;&lt;/strong&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The addImage function thats called:</p>
  <pre><code>    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;
        }
      },
  </code></pre>
  <p>When it attempts to upload I get the following error:</p>
  <pre><code>{
    &quot;message&quot;: &quot;Invalid file parameter. Make sure your file parameter does not include '[]'&quot;
  }
  </code></pre>
  <p>Is there a better way to upload the image?</p>