Uploading Movies

Finally, take the modal in the preceding section live.

Upload the Modal Trigger

To upload the modal trigger:

1. Add a button to the navigation bar for launching the upload modal on a click:

   <div class="navbar-menu">
    <div class="navbar-end">
      <a class="button navbar-item" @click="showModal = !showModal">
        Upload
      </a>  
    </div>
   </div>

   Every time you click that button, it flips a showModal boolean. Add the property to the data model:

   showModal: false,

2. Add UploadModal to the App component as a child. Start with adding the element immediately below the container div:

   <UploadModal :showModal="showModal" @handle-       
   upload="uploadToServer"></UploadModal>

   Note that you are passing down showModal to the component. You will learn about the handle-upload event later.

3. Import UploadModal to App:

   import UploadModal from './components/UploadModal.vue';
   
   export default {
   //...
   components: {
   //...
   UploadModal
   }
   }

Watch showModal

You show the modal according to the value of the showModal property in the UploadModal component:

watch: {
  showModal(val) {
    val ? this.$refs.modal.open() : this.$refs.modal.close();
  }
},

Click the Upload button for the modal:

Upload an Image or a Video

On a click of each of the Upload buttons on the modal, the startUpload method is called but with different arguments. Create that method as follows:

methods: {
  startUpload(type) {
    cloudinary.openUploadWidget(
      { cloud_name: 'christekh', upload_preset: 'idcidr0h' },
      (error, result) => {
        console.log(error, result[0]);
        type === 'banner'
          ? (this.banner = result[0].public_id)
          : (this.trailer = result[0].public_id);
      }
    );
  },
},

startUpload launches the upload widget, which enables you to upload images or videos. After the upload, depending on which button was clicked, set the value to reflect the banner or trailer model.

Besides cloud_name, you must also create upload_preset, unsigned, to enable uploads. To do so, fill in the fields on Cloudinary's Upload settings page under the upload prest section.

The upload widget uses another library for modularity. Add the following code below the scripts in the public/index.html file:

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

Clicking the Upload button on the modal displays this widget:

Generate an Upload Event

The form contains an attached handleUpload event, which ensures that on a click of the Submit button, the titles and IDs of the media content are displayed. handleUpload checks if those values are available before generating an event to the parent component for an upload.

Add this code to the methods object:

handleUpload() {
  const data = {
    title: this.title,
    banner: this.banner,
    trailer: this.trailer
  };
  if (data.title && this.banner && this.trailer)
    this.$emit('handle-upload', data);
}

Upload to the Server

Recall that the element for UploadModal reads like this:

<UploadModal :showModal="showModal" @handle-upload="uploadToServer"></UploadModal>

The uploadToServer method is the handler for the event generated in the child component. Create uploadToServer in the methods object:

uploadToServer(data) {
  axios.post(this.url, data).then(res => {
    this.movies = [...this.movies, res.data];
    this.showModal = false;
  })
}

uploadToServer pushes to the server and updates the list with the new entry. It also hides the modal.

The App component script reads:

import axios from 'axios';
import VideoPlayer from './components/VideoPlayer.vue';
import VideoList from './components/VideoList.vue';
import UploadModal from './components/UploadModal.vue';

export default {
  data() {
    return {
      movie: {},
      movies: [],
      showModal: false,
      url: 'https://wt-nwambachristian-gmail_com-0.run.webtask.io/server/movies'
    }
  },
  created() {
    this.cloudinaryInstance = window.cloudinary.Cloudinary.new({
      cloud_name: 'christekh',
      secure: true
    });
    axios.get(this.url)
      .then(res => {
        this.movies = res.data;
      })
  },
  methods: {
    updatePlayer(movie) {
      this.movie = movie;
    },
    uploadToServer(data) {
      axios.post(this.url, data).then(res => {
        this.movies = [...this.movies, res.data];
        this.showModal = false;
      })
    }
  },
  components: {
    VideoPlayer,
    VideoList,
    UploadModal
  }
};