refactor: uploading content in lesson

frontend/src/utils/upload.js

@@ -1,6 +1,9 @@
 import AudioBlock from '@/components/AudioBlock.vue'
 import VideoBlock from '@/components/VideoBlock.vue'
-import { createApp } from 'vue'
+import UploadPlugin from '@/components/UploadPlugin.vue'
+import { h, createApp, inject } from 'vue'
+import { Upload as UploadIcon } from 'lucide-vue-next'
+import translationPlugin from '../translation'
 
 export class Upload {
 	constructor({ data, api, readOnly }) {
@@ -8,17 +11,38 @@ export class Upload {
 		this.readOnly = readOnly
 	}
 
+	static get toolbox() {
+		const app = createApp({
+			render: () =>
+				h(UploadIcon, { size: 18, strokeWidth: 1.5, color: 'black' }),
+		})
+
+		const div = document.createElement('div')
+		app.mount(div)
+
+		return {
+			title: 'Upload',
+			icon: div.innerHTML,
+		}
+	}
+
 	static get isReadOnlySupported() {
 		return true
 	}
 
 	render() {
 		this.wrapper = document.createElement('div')
-		this.renderUpload(this.data)
+
+		if (this.data && this.data.file_url) {
+			this.renderFile(this.data)
+		} else {
+			this.renderFileUploader()
+		}
+
 		return this.wrapper
 	}
 
-	renderUpload(file) {
+	renderFile(file) {
 		if (this.isVideo(file.file_type)) {
 			const app = createApp(VideoBlock, {
 				file: file.file_url,
@@ -44,6 +68,26 @@ export class Upload {
 		}
 	}
 
+	renderFileUploader() {
+		const app = createApp(UploadPlugin, {
+			wrapper: this.wrapper,
+			onFileUploaded: (file) => {
+				this.data.file_url = file.file_url
+				this.data.file_type = file.file_type
+				this.renderFile(file)
+			},
+		})
+		app.use(translationPlugin)
+		app.mount(this.wrapper)
+	}
+
+	validate(savedData) {
+		if (!savedData.file_url || !savedData.file_type) {
+			return false
+		}
+		return true
+	}
+
 	save(blockContent) {
 		return {
 			file_url: this.data.file_url,