title: Cannot save multiple Image using Form Data
body: <p>First of all this is the error that I get.<a href="https://i.stack.imgur.com/PEHQO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PEHQO.png" alt="enter image description here" /></a></p>
  <p>This is my first time working with Multiple Image with other Inputs.</p>
  <p>as you can see in my FormData Headers the picture File is an Empty Array.</p>
  <p><a href="https://i.stack.imgur.com/C23fP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C23fP.png" alt="enter image description here" /></a></p>
  <p>But inside the console it returns a file.</p>
  <p><a href="https://i.stack.imgur.com/ErNf5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ErNf5.png" alt="enter image description here" /></a></p>
  <p>my question for this one that is this good? because the picture that I'm sending is a PNG one but it only says FILE.</p>
  <p>This is my Vue Code.</p>
  <pre><code> &lt;q-dialog
    v-model=&quot;uploadForm&quot;
    transition-show=&quot;slide-up&quot;
    transition-hide=&quot;slide-down&quot;
    persistent
  &gt;
    &lt;q-card style=&quot;width: 700px; max-width: 50vw;&quot;&gt;
      &lt;q-card-section&gt;
        &lt;div class=&quot;text-h6&quot;&gt;Add Product&lt;/div&gt;
      &lt;/q-card-section&gt;
      &lt;div class=&quot;q-pa-md&quot;&gt;
        &lt;form
          action=&quot;http://127.0.0.1:8000/api/createProduct&quot;
          class=&quot;q-gutter-md&quot;
          method=&quot;POST&quot;
          enctype=&quot;multipart/form-data&quot;
        &gt;
          &lt;q-input outlined label=&quot;Product name&quot; v-model=&quot;data.productName&quot; /&gt;
  
          &lt;q-input
            multiple=&quot;multiple&quot;
            outlined
            type=&quot;file&quot;
            accept=&quot;image/png,jpg/jpeg&quot;
            @change=&quot;onFilePicked&quot;
            ref=&quot;file&quot;
          &gt;
            &lt;template v-slot:prepend&gt;
              &lt;q-icon name=&quot;attach_file&quot; /&gt;
            &lt;/template&gt;
          &lt;/q-input&gt;
          &lt;div&gt;
            &lt;div class=&quot;image-category&quot;&gt;
              &lt;div v-for=&quot;(image, key) in data.picture&quot; :key=&quot;key&quot;&gt;
                &lt;div class=&quot;image-item&quot;&gt;
                  &lt;img
                    class=&quot;grid&quot;
                    :src=&quot;image.src&quot;
                    width=&quot;300&quot;
                    height=&quot;300&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;q-input outlined label=&quot;Description&quot; v-model=&quot;data.description&quot; /&gt;
  
          &lt;q-input
            prefix=&quot;₱ &quot;
            type=&quot;number&quot;
            outlined
            label=&quot;Price&quot;
            v-model=&quot;data.price&quot;
          /&gt;
  
          &lt;q-select
            square
            outlined
            v-model=&quot;data.category_id&quot;
            :options=&quot;categories&quot;
            :option-value=&quot;'id'&quot;
            :option-label=&quot;'categoryName'&quot;
            label=&quot;Category&quot;
          /&gt;
  
          &lt;div class=&quot;q-ma-md float-right&quot;&gt;
            &lt;q-btn label=&quot;Submit&quot; color=&quot;primary&quot; @click=&quot;createProduct&quot; /&gt;
            &lt;q-btn
              label=&quot;Cancel&quot;
              color=&quot;primary&quot;
              flat
              class=&quot;q-ml-sm&quot;
              @click=&quot;closeCreateModal&quot;
            /&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt; &lt;/q-card
  &gt;&lt;/q-dialog&gt;
  </code></pre>
  <p>My returning Data()</p>
  <pre><code>  data: {
      picture: [],
      productName: &quot;Grizzly Bear&quot;,
      description: &quot;Machaba.&quot;,
      price: &quot;260000&quot;,
      category_id: []
    },
  </code></pre>
  <p>my @Change in accepting multiple Images.</p>
  <pre><code>    onFilePicked(e) {
    let selectedFiles = e.target.files;
    for (let i = 0; i &lt; selectedFiles.length; i++) {
      let img = {
        src: URL.createObjectURL(selectedFiles[i]),
        file: selectedFiles[i]
      };
      this.data.picture.push(img);
      console.log(this.data.picture, &quot;inside&quot;);
    }
    console.log(this.data.picture, &quot;outside&quot;);
  },
  </code></pre>
  <p>My CreatingProduct method.</p>
  <pre><code>createProduct() {
    let t = this.data;
  
    if (
      t.picture == &quot;&quot; ||
      t.productName.trim() == &quot;&quot; ||
      t.description.trim() == &quot;&quot; ||
      t.price == &quot;&quot; ||
      t.categories == &quot;&quot;
    ) {
      this.uploadForm = false;
  
      this.$q
        .dialog({
          title: &quot;Incomplete Details&quot;,
          message: &quot;Please fill up all the fields in the Product&quot;,
          persistent: true,
          color: &quot;negative&quot;
        })
        .onOk(() =&gt; {
          this.uploadForm = true;
        });
    } else {
      let formData = new FormData();
      const picture = JSON.stringify(this.data.picture); // returns [object, object] so I needed to do 
   //this.
      const category_id = JSON.stringify(this.data.category_id); 
  
      formData.append(&quot;picture&quot;, picture);
      formData.append(&quot;productName&quot;, this.data.productName);
      formData.append(&quot;description&quot;, this.data.description);
      formData.append(&quot;price&quot;, this.data.price);
      formData.append(&quot;category_id&quot;, category_id);
  
      let config = {
        headers: {
          &quot;Content-Type&quot;: &quot;multipart/form-data&quot;
        }
      };
  
      this.$axios
        .post(&quot;http://127.0.0.1:8000/api/createProduct&quot;, formData, config)
        .then(response =&gt; {
          this.products.unshift(response.data);
          this.uploadForm = false;
          (this.data = &quot;&quot;),
            this.$q.notify({
              icon: &quot;info&quot;,
              message: &quot;Product Added Successfully&quot;,
              color: &quot;positive&quot;
            });
        })
        .catch(() =&gt; {
          this.$q.notify({
            color: &quot;negative&quot;,
            position: &quot;top&quot;,
            message: &quot;Unable to save Product&quot;,
            icon: &quot;report_problem&quot;
          });
        });
    }
  }},
  </code></pre>
  <p>my Backend in laravel</p>
  <pre><code>    public function createProduct(Request $request)
  {
      $this-&gt;validate($request,[
          'productName' =&gt; 'required',
          'description' =&gt; 'required',
          'picture' =&gt; 'required|image|mimes:jpg,png,jpeg|max:2048',
          'price' =&gt; 'required',
          'category_id' =&gt; 'required'
      ]);
  
      $product = new Product($request-&gt;input());
  
  
      if($request-&gt;hasFile('picture')){
          foreach($request-&gt;file('picture') as $file){
              $name = $file-&gt;getClientOriginalName();
              $file-&gt;move(public_path().'/uploads/',$name);
              $product-&gt;picture = $name;
          }
      }
  
      $product-&gt;save();
  
      return response()-&gt;json($product);
  
  }
  </code></pre>
  <p>Can anyone explain to me what is wrong? I made my research and it doesn't work. and also how do you edit a multiple Image? How would you select a specific image in the Index to make that one being edit.</p>
  <p>this is my first time working with Quasar + Laravel in creating a Product with Multiple Image.</p>