diff options
author | Julien Veyssier <eneiluj@posteo.net> | 2022-06-08 18:44:49 +0300 |
---|---|---|
committer | Julien Veyssier <eneiluj@posteo.net> | 2022-09-06 15:44:53 +0300 |
commit | 3fec1f052dbb8cbe33172e779ac853eeb934ee62 (patch) | |
tree | 9cbdb5e28225dce8e45b14b06829668615fb6f55 /src/components/Editor | |
parent | 3af1eb84126c4bb9396b701c963ee229cdc26c66 (diff) |
allow media file upload, handle display in ImageView
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
Diffstat (limited to 'src/components/Editor')
-rw-r--r-- | src/components/Editor/MediaHandler.vue | 41 |
1 files changed, 33 insertions, 8 deletions
diff --git a/src/components/Editor/MediaHandler.vue b/src/components/Editor/MediaHandler.vue index 7004b5b16..1a0f939d9 100644 --- a/src/components/Editor/MediaHandler.vue +++ b/src/components/Editor/MediaHandler.vue @@ -132,16 +132,14 @@ export default { }) }, async uploadImageFile(file, position = null) { - if (!IMAGE_MIMES.includes(file.type)) { - showError(t('text', 'Image file format not supported')) - return - } - this.state.isUploadingImages = true return this.$syncService.uploadImage(file) .then((response) => { - this.insertAttachmentImage(response.data?.name, response.data?.id, position, response.data?.dirname) + this.insertAttachment( + response.data?.name, response.data?.id, file.type, + position, response.data?.dirname + ) }) .catch((error) => { console.error(error) @@ -165,7 +163,10 @@ export default { this.state.isUploadingImages = true return this.$syncService.insertImageFile(imagePath).then((response) => { - this.insertAttachmentImage(response.data?.name, response.data?.id, null, response.data?.dirname) + this.insertAttachment( + response.data?.name, response.data?.id, response.data?.mimetype, + null, response.data?.dirname + ) }).catch((error) => { console.error(error) showError(error?.response?.data?.error || error.message) @@ -173,7 +174,31 @@ export default { this.state.isUploadingImages = false }) }, - insertAttachmentImage(name, fileId, position = null, dirname = '') { + insertAttachment(name, fileId, mimeType, position = null, dirname = '') { + if (IMAGE_MIMES.includes(mimeType)) { + this.insertAttachmentImage(name, fileId, mimeType, position, dirname) + return + } + this.insertAttachmentMedia(name, fileId, mimeType, position, dirname) + }, + insertAttachmentMedia(name, fileId, mimeType, position = null, dirname = '') { + // inspired by the fixedEncodeURIComponent function suggested in + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent + const src = dirname + '/' + + encodeURIComponent(name).replace(/[!'()*]/g, (c) => { + return '%' + c.charCodeAt(0).toString(16).toUpperCase() + }) + // simply get rid of brackets to make sure link text is valid + // as it does not need to be unique and matching the real file name + const alt = name.replaceAll(/[[\]]/g, '') + + const chain = position + ? this.$editor.chain().focus(position) + : this.$editor.chain() + + chain.setImage({ src, alt }).focus().run() + }, + insertAttachmentImage(name, fileId, mimeType, position = null, dirname = '') { // inspired by the fixedEncodeURIComponent function suggested in // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent const src = dirname + '/' |