The given data was invalid. updating function with file uplaod in laravel 8 vue 2

Question

i'm trying to make an update function with file upload

here is what i have tried so far

<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"
      />
      <b-button
      v-ripple.400="'rgba(255, 255, 255, 0.15)'"
      type="submit"
      variant="primary"
      class="mr-1">
      Submit
    </b-button>
</b-form>

data in script:

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

Methods in script:

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 (update function):

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

    $upload = OutstandingPayment::find($outstandingPayment);

    $this->validate($request,[
           'file' => 'required|mimes:jpg,jpeg,png,csv,txt,xlx,xls,pdf|max:2048',
           .
           .
           .
           .
    ]);

    if($request->file()) {


            $file_name = time().'_'.$request->file->getClientOriginalName();
            $file_path = $request->file('file')->move(public_path('uploads/outstandingPayment'), $file_name);
            $upload->payment_voucher_supporting_doc = time().'_'.$request->file->getClientOriginalName();
            $upload->path = '/storage/' . $file_path;
            $upload->save();


  $upload->update($request->all());

  return ['message' => 'Success'];
}

and after submitting the form i'm getting this response (422):

The given data was invalid.

i am uploading a file with pdf extension

and the storing function is working fine as showing below:

public function store(Request $request)
{
    $request->validate([
           'file' => 'required|mimes:jpg,jpeg,png,csv,txt,xlx,xls,pdf|max:2048',
           .
           .
           .
           .
           .
        ]);

        $fileUpload = new OutstandingPayment([
            .
            .
            .
            .
        ]);

        if($request->file()) {


            $file_name = time().'_'.$request->file->getClientOriginalName();
            $file_path = $request->file('file')->move(public_path('uploads/outstandingPayment'), $file_name);
            $fileUpload->payment_voucher_supporting_doc = time().'_'.$request->file->getClientOriginalName();
            $fileUpload->path = '/storage/' . $file_path;
            $fileUpload->save();

            return response()->json(['success'=>'File uploaded successfully.']);
        }
}

what am i doing wrong here?

is it from controller side or the script side?

Answer 1

first you should use sperate requests for both storing and updating.

Route::post('...', '...') // for store (called by this.axios.post() methods)
Route::put('...', '...') // for updating (called by this.axios.put() methods)

Second, make sure you will have to upload file not string, as postman shows you, you will need to upload file by using FORMDATA as below:

 let config = {};
 let formData = new FormData();
 formData.append('file', this.file);
 formData.append('name', this.name); // other params as you want to send along
 ...
 
   this.axios.put(`/api/auth/outstanding-payment/${this.$route.params.id}`, formData, config)
   .then(function (response) {
     currentObj.success = response.data.success;
   })
   .catch(function (error) {
     currentObj.output = error;
   });

for reference you can see exmaple "Vue/laravel file upload example" .