422 Unprocessable Entity on updating record with image

Level 27

Can show the full PUT request by the browser? 422 means that the validation failed.

Level 6

there's no request on the browser... what I see the error 422 Unprocessable Entity

Level 104

You have no data in the axios request; you will need a FormData instance to append the news_image, otherwise you cannot upload the image.

// you will need to get the file from the form input - I use the `id` here
let file = document.getElementById('news_image').files[0];

formData.append('title', 'Some title');
formData.append('description', 'Some description');
formData.append('news_image', file);

axios.put('/api/news/'+this.form.id, formData)

Sinnbeck

Level 102

You can do it manually to work with ajax

$validator = Validator::make($request->all(), [
            'title' => 'required',
            'description' => 'required',
            'news_image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:5100'
        ]);
if ($validator->fails()) {
//here we check if it is an ajax request and return a more useful response :)
            if($request->ajax())
            {
                return response()->json(array(
                    'success' => false,
                    'message' => 'There are incorect values in the form!',
                    'errors' => $validator->getMessageBag()->toArray()
                ), 422);
            }
$this->throwValidationException(

                $request, $validator

            );
}

Level 6

still I update my code like this by your suggestions still got the same error PUT http://www.bethyl-trade.test/api/news/5 422 (Unprocessable Entity)

updateNews(){

        let data = new FormData();

        let file = document.getElementById('news_image').files[0];

        data.append('title',this.form.title);
        data.append('description',this.form.description);
        data.append('news_image', file);

        axios.put('/api/news/'+this.form.id, data)
          .then((response)=>{
           console.log(response);
          })
      },

Level 6

Not working sir

Sinnbeck

Level 102

Who are you writing to? Did you reply to me or @tykus ?

And if you replied to me, what are you getting now?

Level 104

Add a console.log to interrogate the error response; see which input is causing the validation failure. Also, please note that my code snippet above was as an example, I don't know your markup, so there is no way for me to know if you have the input with id="news_image"!

axios.put('/api/news/'+this.form.id, data)
     .then((response)=>{
         console.log(response);
     })
     .catch(error =>  console.log(error.response)

Level 6

@sinnbeck I already tried your suggestion sir but still got the error PUT http://www.bethyl-trade.test/api/news/5 422 (Unprocessable Entity)

Level 6

@tykus This are the fields in modal

<div class=" modal-body">
                
                  <div class="form-group">
                    <label>Title</label>
                    <input v-model="form.title" type="text" name="title"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('title') }" required>
                    <has-error :form="form" field="title"></has-error>
                  </div>
                  <div class="form-group">
                    <label>Description</label>
                    <input v-model="form.description" type="text" name="description"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('description') }" required>
                    <has-error :form="form" field="description"></has-error>
                  </div>
                   <div class="form-group">
                    <label>News Image</label>
                    <input type="file"  @change="imageSelected"   ref="fileInput" name="news_image" id="news_image"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('news_image') }" required>
                    <has-error :form="form" field="news_image"></has-error>
                  </div>    
                  <div v-if="imagepreview" class="mt-3">
                    <img :src="imagepreview" class="figure-img img-fluid" style="max-height:100px;">
                  </div>         
              </div>

and this is my data()

data(){
      return {
        news_image: null,
        imagepreview: null,
        editmode: false,
        newslist: {},
        form: new Form({
          id : '',  
          title: '',
          description:'',
          news_image: '',
        }),
       
      }
    },

and the update()

updateNews(){

        axios.put('/api/news/'+this.form.id, data)
          .then((response)=>{
           console.log(response);
          })
      },

and the controller

 public function update(Request $request, News $news)
    {

        \Log::info($request->all());
        $this->validate($request, [
            'title' => 'required',
            'description' => 'required',
            'news_image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:5100'
        ]);

        $news->where("id", $request->get("id"))->update($request->all());
    }

laracoft

Level 27

@anonymouse703 please stay focused only on your PHP codes.

Does this still give you 422?

public function update(Request $request, News $news)
{
	$news->where("id", $request->get("id"))->update($request->all());
}

Level 104

You are not submitting the correct data, this:

axios.put('/api/news/'+this.form.id, data)

should be

axios.put('/api/news/'+this.form.id, this.form)

But, how does imageSelected do to form.news_image so that you are submiting the image as multipart form data rather than a string

Level 6

@tykus I got the same error and when I console.log I have undefined.... and imageSelected is a guide for the user to see the image they upload.

Level 104

Can you show the entire Vue component?