Save an image from Vue to Laravel 8 Part 1

Hey guys, this is a nightmare for me and took me a while to get right, as I always do I write the tutorial so I can pop back if I ever need it again, and hopefully some of you will use it also and it will make your day a little easier.

So I'm creating a really simple blog where a post will have three components. One post will have a Title, Article, and Image. To me, it seemed overkill to use a headless CMS or laravel Nova so I just decided to build out the function myself.

So here we go:

So for this tutorial Im assuming you are using an API driven by Laravel and a front end using Vue.js.

So to start open up your project and a terminal and run the following command:

php artisan make:model Blog -mc

What this does is create a model with the -mc creating a Controller and Migration.

With that head over and open the migration file and add the following code:

$table->id();
            $table->text('title');
            $table->text('article');
            $table->string('image_path');
            $table->timestamps();

Then save and pop over to the terminal and run:

php artisan migrate

Ok database is all set to go and we have a model. So lets have a look at the front end. Lets create a new folder in our Vue components called Blog and inside there add a new Vue file called create.vue

Once we have that I added a new form, Im using Bootstrap Vue for this but amend to what front end library.

<b-form>
          <b-form-group id="title" label="Title:" label-for="title">
            <b-form-input
              id="title"
              v-model="form.title"
              type="text"
              placeholder="Article title"
              required
            ></b-form-input>
          </b-form-group>
          <b-form-group id="article" label="Article:" label-for="article">
            <vue-editor v-model="form.article" id="article" />
          </b-form-group>
          <b-form-group id="image" label="Image:" label-for="image">
            <b-form-file
              v-model="form.image"
              :state="Boolean(form.image)"
              placeholder="Choose a file or drop it here..."
              drop-placeholder="Drop file here..."
            ></b-form-file>
            <div class="mt-3">
              Selected file: {{ form.image ? form.image.name : "" }}
            </div>
          </b-form-group>
          <hr />
          <b-button variant="success" class="btn-block" @click="submitForm()">Submit</b-button>
        </b-form>

With my form in place I start looking at the imports and v-models I need for my form. Again Im using certain packages but please amend on what you need. For my WISIWIG I'm using https://www.vue2editor.com/ which is a simple solution and will give us all we need:

import { VueEditor } from "vue2-editor";
export default {
  components: { VueEditor },
  data() {
    return {
      form: {
        title: "",
        article: "",
        image: null,
      },
    };
  },

So what we have here is the import for the VueEditor and we have all our v-models in place to be able to send the data in the next part.

So we have a Model, Controller and Migration in place on the back-end and our form element has the form and all the important's we require to make that form work. In part 2 we are going to send data to the server and save the blog post and any files we require.

Comments

[Becouif]

thanks for this tutorial, i tried it but I am getting error that I cant use v-model on input type file, when I change to v-on:change , I cant get the image in console