Trigger file upload with button

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-05-31 11:01:52 +02:00
parent 2a2e4690ff
commit e8ef5997eb
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
2 changed files with 64 additions and 1 deletions

View File

@ -52,6 +52,13 @@
<b-icon icon="format-header-3" /> <b-icon icon="format-header-3" />
</button> </button>
<button
class="menubar__button"
@click="showImagePrompt(commands.image)"
>
<b-icon icon="image" />
</button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive.bullet_list() }" :class="{ 'is-active': isActive.bullet_list() }"
@ -167,6 +174,8 @@ import tippy, { Instance } from 'tippy.js';
import { SEARCH_PERSONS } from '@/graphql/search'; import { SEARCH_PERSONS } from '@/graphql/search';
import { IActor } from '@/types/actor'; import { IActor } from '@/types/actor';
import Image from '@/components/Editor/Image'; import Image from '@/components/Editor/Image';
import { UPLOAD_PICTURE } from '@/graphql/upload';
import { listenFileUpload } from '@/utils/upload';
@Component({ @Component({
components: { EditorContent, EditorMenuBar, EditorMenuBubble }, components: { EditorContent, EditorMenuBar, EditorMenuBubble },
@ -384,7 +393,7 @@ export default class CreateEvent extends Vue {
arrow: true, arrow: true,
arrowType: 'round', arrowType: 'round',
}) as Instance; }) as Instance;
// we have to update tippy whenever the DOM is updated // we have to update tippy whenever the DOM is updated
if (MutationObserver) { if (MutationObserver) {
this.observer = new MutationObserver(() => { this.observer = new MutationObserver(() => {
if (this.popup != null && this.popup.popperInstance) { 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() { beforeDestroy() {
this.editor.destroy(); this.editor.destroy();
} }

36
js/src/utils/upload.ts Normal file
View File

@ -0,0 +1,36 @@
/**
* Async function to upload a file
*/
export function listenFileUpload(): Promise<File> {
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<FileList> {
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();
});
}