@westartcom/bread-quasar-fields 0.0.2

package/fields/ImageUploadField.vue

@@ -0,0 +1,431 @@
+<template>
+    <div class="field-wrap" :id="id">
+        <div class="field-wrap-inner">
+            <div class="field-label-wrap">
+                <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
+            </div>
+
+            <div class="images-upload">
+                <div v-show="canAdd">
+                    <button type="button" class="btn hollow" @click="$refs.imageUpload.click()">
+                        <template v-if="allowMultiple">
+                            {{ $i18n.get('actions.add_images') }}
+                        </template>
+                        <template v-else>
+                            {{ $i18n.get('actions.add_image') }}
+                        </template>
+                    </button>
+                    <input
+                        ref="imageUpload"
+                        :id="id + '-input'"
+                        type="file"
+                        style="display: none;"
+                        :accept="allowedMimeTypes"
+                        :multiple="allowMultiple"
+                        @change="onImageSelect($event.target.files)">
+                </div>
+
+                <div class="added-images">
+                    <div class="image" v-for="(image, index) in addedTusImages" :key="index" @click="onRemoveImage(index, image, true)">
+                        <div class="remove-overlay">
+                            <delete-icon class="icon-2x"></delete-icon>
+                        </div>
+                        <div class="upload-error" v-show="image.error">
+                            <upload-error-icon class="icon-2x"></upload-error-icon>
+                        </div>
+                        <div class="upload-progress" v-show="image.progress < 100">
+                            <div class="progress-bar" :style="{ width: image.progress + '%' }"></div>
+                        </div>
+                        <img :src="safeUrl(image)">
+                    </div>
+
+                    <div
+                        v-for="(image, index) in addedImages"
+                        :key="index"
+                        class="image"
+                        @click="onRemoveImage(index, image)">
+                        <div class="remove-overlay">
+                            <q-icon name="fa-solid fa-trash"></q-icon>
+                        </div>
+                        <img :src="safeUrl(image)">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+import { UploadImage } from '@westartcom/bread-quasar-fields/interfaces/UploadImage';
+//    import * as tus from 'tus-js-client';
+
+interface ImageUploadFieldDefinition extends ModelFieldDefinition<FieldType.MEDIA, InputType.IMAGE_UPLOAD> {
+    default: string | null;
+    extra_data: {
+        media_type: 'images';
+        tus: boolean;
+        tus_endpoint: string;
+        mime_types: string[];
+        multiple: boolean;
+        collection: string;
+    }
+}
+
+export default defineComponent({
+    components: {
+        DeleteIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/DeleteIcon.vue')),
+        UploadErrorIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/FileAlertOutlineIcon.vue'))
+    },
+
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<ImageUploadFieldDefinition>,
+            required: true
+        },
+        modelValue: Array,
+        errors: Array as PropType<string[]>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid',
+        'update:uploading'
+    ],
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            images: [] as UploadImage[],
+            tusImages: [] as UploadImage[],
+            internalErrors: [],
+            tusUploads: {} as {
+                [key: string]: any;
+            }
+        };
+    },
+
+    computed : {
+        allowMultiple() {
+            return (this.field.extra_data && this.field.extra_data.multiple);
+        },
+
+        allowedMimeTypes() {
+            return ((this.field.extra_data?.mime_types) ? this.field.extra_data.mime_types : ['image/*']).join('|');
+        },
+
+        canAdd() {
+            return this.allowMultiple || !this.images.filter(image => !image.remove).length;
+        },
+
+        useTus() {
+            return (this.field.extra_data && this.field.extra_data.tus);
+        },
+
+        addedImages() {
+            return this.images.filter(image => !image.remove && (image.url || image.base64));
+        },
+
+        addedTusImages() {
+            return this.tusImages.filter(image => !image.remove);
+        }
+    },
+
+    mounted() {
+        this.tusUploads = {};
+
+        if (this.modelValue) {
+            this.images = (Array.isArray(this.modelValue)) ? this.modelValue : [this.modelValue];
+        } else if (this.field.default && Array.isArray(this.field.default)) {
+            this.images = this.field.default;
+        }
+
+        this.validate(this.images);
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                if (
+                    val &&
+                    Array.isArray(val)
+                ) {
+                    this.images = val;
+                    if (this.tusImages.length) {
+                        this.tusImages = this.tusImages.filter(tusImage => {
+                            return !tusImage.tusKey || val.some(
+                                upstreamImage => (upstreamImage.tusKey && upstreamImage.tusKey === tusImage.tusKey));
+                        });
+                    }
+                } else {
+                    this.images = [];
+                    this.tusImages = [];
+                    (this.$refs.imageUpload as any).value = '';
+                }
+            },
+            deep: true
+        },
+
+        images: {
+            handler: function(val) {
+                this.validate(val);
+                this.$emit('update:modelValue', val);
+            },
+            deep: true
+        },
+
+        errors: {
+            handler: function(val) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val) {
+            this.$emit('update:invalid', val);
+        },
+
+        tusImages: {
+            handler: function(val) {
+                if (val.some(image => image.progress < 100)) {
+                    this.$emit('update:uploading', true);
+                } else {
+                    this.$emit('update:uploading', false);
+                }
+            },
+            deep: true
+        }
+    },
+
+    methods: {
+        async onImageSelect(files: FileList) {
+            if (files.length) {
+                for (let i = 0; i < files.length; i++) {
+                    const file = files.item(i);
+
+                    if (!file) {
+                        continue;
+                    }
+
+                    if (this.useTus) {
+                        await this.startTus(file);
+                    } else {
+                        this.addImage(await this.getBase64(file));
+                    }
+                }
+            }
+        },
+
+        async startTus(file: File) {
+            throw 'TUS not implemented';
+            //                const vueInstance = this;
+            //                const tempKey = Date.now().toString() + '/' + file.name;
+            //
+            //                this.tusImages.push({
+            //                    tempKey: tempKey,
+            //                    tusKey: null,
+            //                    add: true,
+            //                    base64: await this.getBase64(file),
+            //                    error: false,
+            //                    progress: 0
+            //                });
+            //
+            //                const upload = new tus.Upload(file, {
+            //                    endpoint: window.axios.defaults.baseURL + 'v1/' + this.field.extra_data.tus_endpoint,
+            //                    chunkSize: (2 * (1024 * 1024)), // 2 MB
+            //                    metadata: {
+            //                        filename: file.name,
+            //                        filetype: file.type,
+            //                    },
+            //                    onBeforeRequest(req) {
+            //                        let xhr = req.getUnderlyingObject()
+            //                        xhr.withCredentials = true;
+            //                    },
+            //                    onProgress(bytesUploaded, bytesTotal) {
+            //                        let percentage = (bytesUploaded / bytesTotal * 100).toFixed(0)
+            //                        vueInstance.tusImages = vueInstance.tusImages.map((image) => {
+            //                            if (image.tempKey === tempKey) {
+            //                                image.progress = percentage;
+            //                            }
+            //                            return image;
+            //                        });
+            //                    },
+            //                    onSuccess() {
+            //                        const urlParts = upload.url.split('/');
+            //                        const tusKey = urlParts[urlParts.length - 1];
+            //                        vueInstance.tusImages = vueInstance.tusImages.map((image) => {
+            //                            if (image.tempKey === tempKey) {
+            //                                image.tusKey = tusKey;
+            //                            }
+            //                            return image;
+            //                        });
+            //                        vueInstance.addImage(tusKey, true);
+            //                    },
+            //                    onError() {
+            //                        vueInstance.$modal.show('error', this.$i18n.get('generic.an_error_occurred'), this.$i18n.get('validation.image_upload_failed'));
+            //                        vueInstance.tusImages = vueInstance.tusImages.map((image) => {
+            //                            if (image.tempKey === tempKey) {
+            //                                image.error = true;
+            //                            }
+            //                            return image;
+            //                        });
+            //                    }
+            //                });
+            //
+            //                upload.start();
+            //                this.tusUploads[tempKey] = upload;
+        },
+
+        getBase64(file: File): Promise<string> {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => resolve(reader.result as string);
+                reader.onerror = error => reject(error);
+            });
+        },
+
+        addImage(image: string, isTus = false) {
+            if (isTus) {
+                this.images.push({
+                    tusKey: image,
+                    add: true
+                });
+            } else {
+                this.images.push({
+                    base64: image,
+                    add: true
+                });
+            }
+        },
+
+        onRemoveImage(index, image, isTus = false) {
+            this.$modal.confirm(
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                () => {
+                    this.removeImage(index, image, isTus);
+                }
+            );
+        },
+
+        removeImage(index: number, image: UploadImage, isTus = false) {
+            if (image.add === true) {
+                if (isTus) {
+                    this.tusImages = this.tusImages.filter((img, idx) => idx !== index);
+                    if (image.tempKey && this.tusUploads[image.tempKey]) {
+                        this.tusUploads[image.tempKey].abort(true);
+                    }
+                } else {
+                    // Safe to just pop it from array since it's not been saved yet
+                    this.images = this.images.filter((img, idx) => idx !== index );
+                }
+                (this.$refs.imageUpload as any).value = ''; // Need to clear the input field so the image can be selected again
+            } else {
+                // We need to flag the image for removal in API
+                image.remove = true;
+                this.images = this.images.map((existing, existingIndex) => {
+                    return (existingIndex === index) ? image : existing;
+                });
+            }
+        },
+
+        validate(val) {
+            this.invalid = (this.field.required && (!val.length || !val.filter(image => !image.remove).length));
+        },
+
+        safeUrl(image) {
+            return (image.url) ? image.url : image.base64;
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    .added-images {
+        margin-top: var(--global-spacing);
+
+        .image {
+            display: inline-block;
+            width: 100px;
+            height: 100px;
+            overflow: hidden;
+            position: relative;
+            margin-right: var(--global-spacing);
+            cursor: pointer;
+            text-align: center;
+            vertical-align: middle;
+            user-select: none;
+            border-radius: var(--global-radius);
+
+            .remove-overlay {
+                display: none;
+                background-color: rgba(red, 0.8);
+                color: var(--color-light-txt);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .upload-error {
+                @extend .remove-overlay;
+                background-color: rgba(var(--color-danger-rgb), 0.3);
+                display: flex;
+            }
+
+            &:hover {
+                .remove-overlay {
+                    display: flex;
+                }
+            }
+
+            .upload-progress {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 15%;
+                width: 100%;
+                background-color: rgba(255,255,255, 0.5);
+
+                .progress-bar {
+                    display: block;
+                    height: 100%;
+                    background-color: var(--color-success);
+                }
+            }
+
+            img {
+                object-fit: contain;
+                object-position: center;
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+    }
+</style>