skip to Main Content

i am trying to update a data through axio as showing below:

<b-form @submit.prevent="update" enctype="multipart/form-data">
.
.
.
.
<b-form-file
    v-model="invoice.file"
    placeholder="Choose a file or drop it here..."
    drop-placeholder="Drop file here..."
     v-on:change="onChange"
 />

Script:

data() {
return {
  invoice: {
    .
    .
    .
    file: "",
    _method: "patch"
  }
};
},

methods: {
onChange(e) {
  this.file = e.target.files[0];
},

async update() {
  await this.axios
    .post(`/api/auth/outstanding-payment/${this.$route.params.id}`, this.invoice)
    .then((response) => {
      this.$router.push({ name: "apps-invoice-list" });
    })
    .catch((error) => {
      console.log(error);
    });
},

controller for the update function:

public function update(Request $request, OutstandingPayment $outstandingPayment)
{


    $payment_voucher_supporting_doc = '';

    if ($request->hasFile('file')) {

    $payment_voucher_supporting_doc = time() . '.' . $request->file->extension();
    $request->file->storeAs('uploads/images/test', $payment_voucher_supporting_doc);

    if ($outstandingPayment->payment_voucher_supporting_doc) {
    Storage::delete('public/images/' . $outstandingPayment->payment_voucher_supporting_doc);
    }
    }

    else {
    $payment_voucher_supporting_doc = $outstandingPayment->payment_voucher_supporting_doc;
    }

$postData = [
    'payment_voucher_file_ref_no' => $request->payment_voucher_file_ref_no,
    'payment_voucher_date' => $request->payment_voucher_date,
    .
    .
    .
    'payment_voucher_received_by' => $request->payment_voucher_received_by,
    'payment_voucher_supporting_doc' => $payment_voucher_supporting_doc,
];

$outstandingPayment->update($postData);


}

so when i submit the form all the data will be updated but the file won’t be updated

i included "enctype="multipart/form-data"" in the form and checked if the file is passed through the request am i missing something?

UPDATE:

i tried modifying the controller function as below:

if(!$request->file()) {
        return response()->json("Hi!");
    }

to check if there is no file been passed and i got the response

why the file not being passed in the request?

2

Answers


  1. Chosen as BEST ANSWER

    ANSWER:

    i had to use:

    _method: "patch"
    

    with FormData:

    data.append('_method', this.invoice._method);
    

  2. You’re updating wrong value.
    Change this

    onChange(e) {
      this.file = e.target.files[0];
    },
    

    To

    onChange(e) {
      this.invoice.file = e.target.files[0];
    },
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search