# 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:
```markup
```
Every time you click that button, it flips a `showModal` boolean. Add the property to the data model:
```javascript
showModal: false,
```
2. Add `UploadModal` to the `App` component as a child. Start with adding the element immediately below the container `div`:
```markup
```
Note that you are passing down `showModal` to the component. You will learn about the `handle-upload` event later.
3. Import `UploadModal` to `App`:
```javascript
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:
```javascript
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:
```javascript
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](https://cloudinary.com/console/settings/upload) 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:
```markup
```
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:
```javascript
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:
```markup
```
The `uploadToServer` method is the handler for the event generated in the child component. Create `uploadToServer` in the `methods` object:
```javascript
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:
```javascript
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
}
};
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://cloudinary.gitbook.io/build-a-mini-netflix-clone-with-vue/uploading-movies.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.