diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue index 8ff091c86..a40f5640e 100644 --- a/js/src/components/Editor.vue +++ b/js/src/components/Editor.vue @@ -52,6 +52,13 @@ + + + + { if (this.popup != null && this.popup.popperInstance) { @@ -409,6 +418,24 @@ export default class CreateEvent extends Vue { } } + /** + * Show a file prompt, upload picture and insert it into editor + * @param command + */ + async showImagePrompt(command) { + const image = await listenFileUpload(); + const { data } = await this.$apollo.mutate({ + mutation: UPLOAD_PICTURE, + variables: { + file: image, + name: image.name, + }, + }); + if (data.uploadPicture && data.uploadPicture.url) { + command({ src: data.uploadPicture.url }); + } + } + beforeDestroy() { this.editor.destroy(); } diff --git a/js/src/utils/upload.ts b/js/src/utils/upload.ts new file mode 100644 index 000000000..b415f0fa4 --- /dev/null +++ b/js/src/utils/upload.ts @@ -0,0 +1,36 @@ +/** + * Async function to upload a file + */ +export function listenFileUpload(): Promise { + return new Promise((resolve, reject) => { + const inputElement = document.createElement('input'); + inputElement.type = 'file'; + inputElement.onchange = () => { + if (inputElement.files && inputElement.files.length > 0) { + resolve(inputElement.files[0]); + } + }; + + inputElement.onerror = reject; + inputElement.click(); + }); +} + +/** + * Async function to upload a file + */ +export function listenFileUploads(): Promise { + return new Promise((resolve, reject) => { + const inputElement = document.createElement('input'); + inputElement.type = 'file'; + inputElement.multiple = true; + inputElement.onchange = () => { + if (inputElement.files && inputElement.files.length > 0) { + resolve(inputElement.files); + } + }; + + inputElement.onerror = reject; + inputElement.click(); + }); +}