Laravel Vue.js API: axios, FormData() is empty

Question

I'm trying to update some data in Model using API in Laravel and Vue.js but I can't do this because FormData() is empty, I'm checking the data from formdata using the code:

for (var value of formdata.values()) {
        console.log(value);
      }

and it was empty.

I get this result:

this is my update function in vue page

    getFile: function (event) {
      this.image = event.target.files[0];
    },
    updateData: function () {
      let config = {
        header: {
          "Content-Type": "multipart/form-data",
        },
      };
      let formdata = new FormData();
      formdata.append("user_id", this.userId);
      formdata.append("image", this.image);
      formdata.append("name", this.name);
      formdata.append("price", this.price);
      formdata.append("details", this.details);
      formdata.append("subject", this.subject);
      formdata.append("_method", "PUT");
      for (var value of formdata.values()) {
        console.log(value);
      }

      axios
        .post(
          "http://localhost:8000/api/edit-pro/" + this.products.id,
          formdata,
          config
        )
        .then(() => {
          //this.$router.push("/control-panel", response);
        });
    },

controller method where I should update data

public function updatePro(Request $request, $id)
    {
        $product = Product::find($id);

        $product->name = $request->name;
        $product->price = $request->price;
        $product->details = $request->details;
        $product->subject = $request->subject;
        
        $file = $request->file('image');
        $fileName = $file->image;
        $destinationPath = public_path() . '/images';
        $file->move($destinationPath, $fileName);
        $product->image =  $fileName;
        
        try {
            $product->save();
            return ["msg" => "The product was updated successfully"];
        } catch (Exception $error) {
            return [
                "msg" => "The product was not updated successfully",
                "error" => $error,
            ];
        }
    }

HTML with vue.js where I use object which I send to function

<form
              id="main-contact-form"
              class="contact-form row"
              name="contact-form"
            >
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="name"
                  class="form-control"
                  required="required"
                  placeholder="اسم المنتج"
                  v-model="products.name"
                />
              </div>
              <div class="form-group col-md-6">
                <input
                  type="text"
                  name="price"
                  class="form-control"
                  required="required"
                  placeholder="السعر"
                  v-model="products.price"
                />
              </div>
              <div class="form-group col-md-6">
                <select
                  name="subject"
                  class="form-control"
                  v-model="products.subject"
                >
                  <option value="اكسسوريز">اكسسوريز</option>
                  <option value="عنايه">عنايه</option>
                  <option value="مكياج">مكياج</option>
                  <option value="شنط">شنط</option>
                  <option value="عطور">عطور</option>
                  <option value="اجهزه">اجهزه</option>
                  <option value="ملابس نساء">ملابس نساء</option>
                  <option value="رجال">رجال</option>
                </select>
              </div>
              <div class="form-group col-md-6">
                <input
                  ref="image"
                  @change="getFile($event)"
                  type="file"
                  name="image"
                  class="form-control"
                  placeholder="اختر صورة المنتج"
                />
              </div>
              <div class="form-group col-md-12">
                <textarea
                  name="message"
                  id="message"
                  required="required"
                  class="form-control"
                  rows="8"
                  placeholder="وصف المنتج أو نبذة عنه"
                  v-model="products.details"
                ></textarea>
              </div>
              <div class="form-group col-md-12">
                <input
                  type="button"
                  name="submit"
                  class="btn btn-primary pull-right"
                  value="تعديل"
                  @click="updateData(products.id)"
                />
              </div>
            </form>

Let me know if you have any additional questions

Thank you guys a lot for any help and ideas!

Martinez · Accepted Answer · 2022-05-06 18:48:11Z

1

Its look like you have a property products and that property have the values you are trying to get.

so instead doing:

formdata.append("image", this.image);
formdata.append("name", this.name);
formdata.append("price", this.price);
formdata.append("details", this.details);
formdata.append("subject", this.subject);

do:

formdata.append("image", this.image);
formdata.append("name", this.products.name);
formdata.append("price", this.products.price);
formdata.append("details", this.products.details);
formdata.append("subject", this.products.subject);

answered May 6, 2022 at 18:48

Martinez

1,1301 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Khaled Altarhoni Over a year ago

ooh thanks it's working, But there is still an error in the image: message: "Attempt to read property "image" on null"

Khaled Altarhoni Over a year ago

this is if i edit: this.products.image. But if i leave it (this.image) i get this message: "Undefined property: Illuminate\Http\UploadedFile::$image"

Martinez Over a year ago

this.image its the right way

Martinez Over a year ago

to get the name of the file in larval use ->getClientOriginalName()

Collectives™ on Stack Overflow

Laravel Vue.js API: axios, FormData() is empty

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related