Need help with executing the 'upload' function in the 'MediaImport' component upon clicking a button in the parent component. The goal is to navigate to another route after execution. Any insights on how to achieve this correctly?
Code for VideoRecognition page:
<script lang="ts">
import Button from 'primevue/button';
import MediaImport from '@/components/MediaImport';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import WebSocketService from '@/utils/WebSocketService';
export default {
name: "VideoRecognition",
emits: ['upload-media'],
setup(_, { emit }) {
// Handling logic and methods
},
components: {
Button,
MediaImport,
},
};
</script>
<template>
<div class="container">
// Template structure
</template>
Code for MediaImport component:
<script lang="ts">
import Message from 'primevue/message';
import BaseMediaImport from './BaseMediaImport.vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { Comment, ref } from 'vue';
import { randomNumber } from '@/utils/randomNumber';
export default {
name: 'MediaImport',
extends: BaseMediaImport,
emits: ['select', 'before-upload', 'progress', 'error', 'clear', 'remove', 'has-files', 'media-object-url', 'upload', 'uploader', 'has-uploaded', 'before-send'],
setup() {
// Set up logic for media upload
},
data() {
// Data properties initialization
},
methods: {
// Methods for uploading files and handling related actions
},
computed: {
// Computed properties calculations
},
components: {
ErrorMessage: Message,
FontAwesomeIcon
},
}
</script>
<template>...</template>