Returning Success / Error messages - Laravel & VueJS

Question

So I am tinkering with an image uploader which will preview the image before uploading.

There are restrictions in place to allow just jpg, jpeg or png image formats, however, the error messages aren't being returned and I have tried a number of methods Please see my code below:

<template>
    <div class="row">
        <div class="col-md-12">
            <img :src="image" class="img-responsive" alt="">
        </div>
        <div class="col-md-8">
            <input type="file" v-on:change="onFileChange" class="form-control">
        </div>
        <div class="col-md-4">
            <button class="btn btn-success btn-block" @click="upload">Upload</button>
        </div>
    </div>
</template>

This is being designed using Vue and Laravel. I am literally 1 day into learning Vue so please let me know if I have missed a vital part you need to look at (such as the route/controller)

<script>
    export default {
        data() {
            return {
                image: ''
            }
        },

        methods: {
            onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },
            createImage(file) {
                let reader = new FileReader();
                let vm = this;
                reader.onload = (e) => {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
            },
            upload(){
                axios.post('/api/upload',{image: this.image})
                    .then(response => {

                    });
            }
        }
    }
</script>

Please see the controller below:

public function upload(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'image' => 'required|image64:jpeg,jpg,png'
        ]);
        if ($validator->fails()) {
            return response()->json(['errors'=>$validator->errors()]);
        } else {
            $imageData = $request->get('image');
            $fileName = Carbon::now()->timestamp . '_' . uniqid() . '.' . explode('/', explode(':', substr($imageData, 0, strpos($imageData, ';')))[1])[1];
            Image::make($request->get('image'))->save(public_path('images/').$fileName);
            return response()->json(['error'=>false]);
        }
    }

what you returning if you get any error message from laravel ? — Niklesh Raut
– Niklesh Raut, Commented Nov 7, 2017 at 11:59
@user, I have added the controller in for you to refer to. I have also added a custom message within validation.php: 'image64' => 'The :attribute must be a file of type: :values.', — Option
– Option, Commented Nov 7, 2017 at 12:04

Niklesh Raut · Accepted Answer · 2017-11-07 12:38:36Z

3

Validate form and return error from laravel controller as

private function validateForm($advsearch){
    $validator = Validator::make($advsearch, [
        'fname' => 'required',
    ]);
    return $validator;
}

public function submitForm(Request $request){
    $validator = $this->validateForm($request->all());
    if ($validator->fails()) {
        return response()->json(['isvalid'=>false,'errors'=>$validator->messages()]);
    }
    .....
    .....
}

And display in vue by binding

<div>{{errors.fname?errors.fname[0]:''}}</div>

if you already bind errors in vue data

   data() {
        return {
            errors:[],
            image: ''
        }
   },

And update it after submit and if you get any error

  axios.post('/api/upload',{image: this.image})
     .then(response => {
         if(response.isValid == false){
            this.errors = response.errors;
         }
  });

in your update you can check errors exist or not by if(response.body.errors !== undefined){

edited Nov 7, 2017 at 12:38

answered Nov 7, 2017 at 12:08

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

16 Comments

Niklesh Raut Over a year ago

in your update you can check errors exist or not by if(response.body.errors !== undefined){

Option Over a year ago

Thanks for the answer, it's throwing an error currently of: Uncaught (in promise) TypeError: Cannot read property 'isValid' of undefined

Niklesh Raut Over a year ago

yes because I used json(['isvalid'=>false,'errors'=>$validator->messages()]) in controller

Option Over a year ago

I added this within the controller also?

Niklesh Raut Over a year ago

use [0] like this {{errors.fname?errors.fname[0]:''}} for fname

|

Abhishek Gurjar · Accepted Answer · 2021-09-17 06:32:46Z

0

response.data.isValid use this instead of response.isValid in uppercase

edited Sep 17, 2021 at 6:32

Abhishek Gurjar

7,47610 gold badges41 silver badges47 bronze badges

answered Sep 16, 2021 at 9:38

ali afzal

11 bronze badge

Collectives™ on Stack Overflow

Returning Success / Error messages - Laravel & VueJS

2 Answers 2

16 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related