Save an image from Vue to Laravel 8 Part 2

So in the first part we set up the MVC side of this little tutorial, now it's time to make it work. First we need to set up our data points on create.vue. So head over to that file and add the following code:

data() {
    return {
      form: {
        title: "",
        article: "",
        image: null,
      },
    };
  },

The above will match the form we created in the first part and our vue models will fill when we use our form.

So now we need to create a function to send our data to the back end where we will save the data and file.

methods: {
    submitForm() {
      let data = new FormData();
      data.append('title', this.form.title);
      data.append('article', this.form.article);
      data.append('image', this.form.image);

      let config = {
      header : {
        'Content-Type' : 'image/png'
      }
    }
    axios.post("/api/blog/create", data, config)
      .then((response) => {
        this.successBool = true
        console.log(response);
      }).catch(
         this.errorBool = true
      );
    },
  },

So to start with create a variable that takes the FormData() function and then append each of our v-models to that data variable. We then set a header so the back end is aware that a image is in the request and finally we stitch all that together in an axios call.

Lets set up that route on the back end to expect the call, head over to routes/api.php and add the following line

//Blog posts
Route::group(['prefix' => 'blog'], function () {
    Route::post('create', 'BlogController@put');
});

So the api.php routes file will automatically append api/ to the route and our Route::group will add the prefix /blog/ and the last part will add the create and point the whole route to the Blog Controller Put method. So let's head over there and add the function.

//Create a blog post
    public function put(Request $request) {

        $article = new Blog;
        $article->title   = $request->input('title');
        $article->article = $request->input('article');

        //Save image to disk
        if($request->hasFile('image')) {
            $image = $request->file('image');
            Storage::putFileAs('images', $image, Carbon::now()->toDateString().'.'.$image->getClientOriginalExtension());
            $article->image_path = Carbon::now()->toDateString().'.'.$image->getClientOriginalExtension();
        } else {
            $article->image_path = 'holding.jpg';
        }

        $article->save();

        $data = [
            'status' => 200,
            'data'   => 'Blog post created successfully'
        ];

        return response($data);

    }

The first part is simple, we grab the blog model and save the title and the article, then we check a an image is in the request object and save it.

Lets talk through that:

1. We create a variable called $image
2. We then put the $image in a folder called images in the storage folder.
3. We then name the image todays date and and append the extension.
4. We save the image name to the database as image_path

The else statement simply saves a holding.jpg string that the front end will use should an image not exist.

And that my folks is how we save a image to the database and use on a front end.

I think I covered all the steps, if you have any issues or questions please leave a comment below