@exmg/exm-upload 1.0.0

package/src/exm-upload-base.js

@@ -0,0 +1,373 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@material/web/icon/icon.js';
+import { FileUploadError } from './types.js';
+// File upload imports
+import './exm-upload-item.js';
+import './exm-upload-crop.js';
+import './exm-upload-drop-area.js';
+import { isCorrectResolution, isImage, isSizeValid, isTypeValidExtension } from './utils.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ExmgElement, observer } from '@exmg/lit-base';
+export class ExmgUploadBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Files addded to component
+         */
+        this.files = [];
+        /**
+         * Accepted file types seperated by comma
+         */
+        this.accept = '';
+        /**
+         * The max file size allowed to upload e.g. '20mb'
+         */
+        this.maxSize = '100mb';
+        /**
+         * Determines if multiple files can be selected. When false maxAmount is set to 1 automatically
+         */
+        this.multiple = false;
+        /**
+         * Disable the upload component useful for forms
+         */
+        this.disabled = false;
+        /**
+         * The upload response type
+         */
+        this.responseType = 'json';
+        /**
+         * The upload response type
+         */
+        this.serverType = 'xhr';
+        /**
+         * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
+         */
+        this.cropperConfig = {};
+        this._cropperConfig = {
+            modal: true,
+            center: true,
+            dragMode: 'move',
+            movable: true,
+            scalable: true,
+            guides: true,
+            zoomOnWheel: true,
+            cropBoxMovable: true,
+            wheelZoomRatio: 0.1,
+        };
+        /**
+         * Internal state to check if user is cropping or not
+         */
+        this._isCropping = false;
+        this.isModeDialog = false;
+        /**
+         * Internal state to check if file is uploaded or not
+         */
+        this._uploaded = false;
+        /**
+         * Allow cropping can only be used when fixedResolution is not set
+         */
+        this.allowCropping = false;
+    }
+    getValues() {
+        return this.files.filter((file) => file.status === 'UPLOADED').map((file) => file.url);
+    }
+    /**
+     * Extract files from either file input or drop event
+     * @param event
+     * @returns FileList[] | []
+     */
+    _getFiles(event) {
+        var _a;
+        const { files } = (_a = (event.type === 'drop' ? event.dataTransfer : event.target)) !== null && _a !== void 0 ? _a : {};
+        return Array.from(files !== null && files !== void 0 ? files : []);
+    }
+    /**
+     * Resets the upload component
+     * @public
+     */
+    reset() {
+        this._uploaded = false;
+        this.files = [];
+        this.cancelActiveCrop();
+    }
+    prepareFiles(addedFiles) {
+        // Loop through files and assign unique id
+        const newFiles = addedFiles.map((item) => ({
+            id: (Date.now() + Math.random()).toString(36),
+            file: item,
+            status: 'UPLOADING',
+        }));
+        for (const file of newFiles) {
+            this._validateFile(file);
+            this.files = [...this.files, file];
+        }
+        this.fire('files-changed', { files: this.files }, true);
+        this._uploaded = true;
+        if (this.fileElement) {
+            this.fileElement.value = '';
+        }
+    }
+    /**
+     * Handles file change which also validates
+     * @param event
+     * @fires files-changed
+     */
+    async _handleChange(event) {
+        event.preventDefault();
+        if (this.disabled) {
+            return;
+        }
+        // clear error files
+        this.files = [...this.files.filter((item) => !item.invalid)];
+        const addedFiles = this._getFiles(event);
+        this.prepareFiles(addedFiles);
+    }
+    /**
+     * Validator function to check file before upload to server
+     * @param FileData
+     */
+    async _validateFile(item) {
+        if (!isSizeValid(item.file.size, this.maxSize)) {
+            this._handleError(FileUploadError.INVALID_SIZE, item);
+        }
+        if (!isTypeValidExtension(item.file, this.accept || '')) {
+            this._handleError(FileUploadError.INVALID_TYPE, item);
+        }
+        if (this.maxAmount && this.files.length >= this.maxAmount) {
+            this._handleError(FileUploadError.INVALID_AMOUNT, item);
+        }
+        if (!this.multiple && this.files.length >= 1) {
+            this._handleError(FileUploadError.INVALID_MULTIPLE, item);
+        }
+        const _isImage = isImage(item.file);
+        if (_isImage && this.fixedResolution) {
+            const isCorrect = await isCorrectResolution(item.file, this.fixedResolution);
+            if (!isCorrect) {
+                this._handleError(FileUploadError.INVALID_RESOLUTION, item);
+            }
+        }
+    }
+    /**
+     * Enable cropping mode
+     * @param e
+     */
+    _handleCropping(e) {
+        const file = e.detail;
+        this._isCropping = true;
+        setTimeout(() => { var _a; return (_a = this.cropSection) === null || _a === void 0 ? void 0 : _a.crop(file); });
+    }
+    /**
+     * Removes file from files array
+     * @param id
+     */
+    removeFile(id) {
+        this.files = this.files.filter((item) => {
+            return item.id !== id;
+        });
+        this.fire('file-removed', id);
+        this.fire('files-changed', { files: this.files }, true);
+    }
+    /**
+     * Removes the file out of the files array.
+     * @fires file-removed
+     * @param e
+     * @param id
+     */
+    _handleRemove(e) {
+        const idToRemove = e.detail;
+        this.removeFile(idToRemove);
+    }
+    /**
+     * Handles crop done and toggles cropping state
+     * @fires crop-done
+     * @param e
+     */
+    async _handleCropDone(e) {
+        this._isCropping = false;
+        const item = e.detail;
+        this.removeFile(item === null || item === void 0 ? void 0 : item.id);
+        this.prepareFiles([item.file]);
+        this.fire('crop-done', e.detail, true);
+    }
+    /**
+     * Handles crop cancel and toggles cropping state
+     * @fires crop-cancel
+     */
+    cancelActiveCrop() {
+        this._isCropping = false;
+        this.fire('crop-cancel', {}, true);
+    }
+    saveActiveCrop() {
+        var _a;
+        (_a = this.cropSection) === null || _a === void 0 ? void 0 : _a.saveCropArea();
+    }
+    /**
+     * Error handling helper function used for all validation
+     * @param message
+     * @param item
+     */
+    _handleError(message, item) {
+        item.invalid = true;
+        item.status = 'INVALID';
+        item.error = message;
+    }
+    openFileSelector(e) {
+        var _a;
+        e.preventDefault();
+        const fileInput = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#file');
+        if (fileInput) {
+            fileInput.click();
+        }
+    }
+    renderDescription() {
+        const { accept, maxSize, fixedResolution } = this;
+        return `Only ${accept ? accept.replace(/,/g, ' ') : ''} files${fixedResolution ? ` of resolution ${fixedResolution} px` : ''} that do not exceed ${maxSize} in size`;
+    }
+    /**
+     * Renders the file items
+     */
+    renderFileItems() {
+        return repeat(this.files || [], (file) => file.id, (item) => html `<exm-upload-item
+          class="item"
+          id=${item.id}
+          @edit-image=${this._handleCropping}
+          @remove-item=${this._handleRemove}
+          uploadUrl=${ifDefined(this.uploadUrl)}
+          customAdapterPath=${ifDefined(this.customAdapterPath)}
+          serverType=${this.serverType}
+          responseType=${this.responseType}
+          ?allowCropping=${!this.fixedResolution && this.allowCropping}
+          .item=${item}
+        ></exm-upload-item>`);
+    }
+    renderUploadCrop() {
+        const { _cropperConfig } = this;
+        return html `
+      <exm-upload-crop
+        id="crop-dialog"
+        ?hideActions=${this.isModeDialog}
+        @crop-done=${this._handleCropDone}
+        @crop-cancel=${this.cancelActiveCrop}
+        .cropperConfig=${_cropperConfig}
+      ></exm-upload-crop>
+    `;
+    }
+    renderUploadDropArea() {
+        const { disabled } = this;
+        return html `
+      <exm-upload-drop-area
+        description=${this.renderDescription()}
+        ?disabled=${disabled}
+        @browse-files=${this.openFileSelector}
+        @remove-file=${this._handleRemove}
+        @drop=${this._handleChange}
+      >
+        <slot slot="drop-icon" name="drop-icon">
+          <md-icon>upload</md-icon>
+        </slot>
+        <slot slot="drop-text" name="drop-text"
+          >Drag and drop, or <a href="#" @click=${this.openFileSelector}>browse</a> your files</slot
+        >
+      </exm-upload-drop-area>
+    `;
+    }
+    render() {
+        const { _isCropping, accept, disabled } = this;
+        if (_isCropping) {
+            return this.renderUploadCrop();
+        }
+        return html `
+      <div class="image-upload-wrapper ${classMap({ disabled: !!this.disabled })}">
+        ${this.renderUploadDropArea()}
+
+        <form id="form-upload" enctype="multipart/form-data">
+          <input
+            id="file"
+            type="file"
+            name="file"
+            tabindex="-1"
+            accept=${ifDefined(accept)}
+            ?disabled=${disabled}
+            @change=${this._handleChange}
+            ?multiple=${this.multiple}
+            hidden
+          />
+        </form>
+      </div>
+
+      <!-- Upload Items list -->
+      <div class="item-container">${this.renderFileItems()}</div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "for", void 0);
+__decorate([
+    property({ type: Array })
+], ExmgUploadBase.prototype, "files", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "accept", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "maxSize", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadBase.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Number })
+], ExmgUploadBase.prototype, "maxAmount", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "customAdapterPath", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "uploadUrl", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "responseType", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "serverType", void 0);
+__decorate([
+    property({ type: Object }),
+    observer(function (value) {
+        this._cropperConfig = { ...this._cropperConfig, ...value };
+    })
+], ExmgUploadBase.prototype, "cropperConfig", void 0);
+__decorate([
+    state()
+], ExmgUploadBase.prototype, "_cropperConfig", void 0);
+__decorate([
+    state()
+], ExmgUploadBase.prototype, "_isCropping", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadBase.prototype, "isModeDialog", void 0);
+__decorate([
+    state()
+], ExmgUploadBase.prototype, "_uploaded", void 0);
+__decorate([
+    query('#crop-dialog')
+], ExmgUploadBase.prototype, "cropSection", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadBase.prototype, "allowCropping", void 0);
+__decorate([
+    property({ type: String })
+], ExmgUploadBase.prototype, "fixedResolution", void 0);
+__decorate([
+    query('#file')
+], ExmgUploadBase.prototype, "fileElement", void 0);
+__decorate([
+    query('.item-container')
+], ExmgUploadBase.prototype, "itemContainer", void 0);
+//# sourceMappingURL=exm-upload-base.js.map

package/src/exm-upload-crop-base.d.ts

@@ -0,0 +1,16 @@
+import '@material/web/button/filled-button.js';
+import { FileData } from './types.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare class ExmgUploadCropBase extends ExmgElement {
+    cropperConfig: any;
+    cropArea?: HTMLImageElement;
+    hideActions: boolean;
+    _item?: FileData;
+    private cropper?;
+    protected firstUpdated(): void;
+    crop(item: FileData): Promise<void>;
+    _cancel(): void;
+    saveCropArea(): void;
+    renderActions(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-upload-crop-base.js

@@ -0,0 +1,76 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { query, property, state } from 'lit/decorators.js';
+import '@material/web/button/filled-button.js';
+import { ExmgElement } from '@exmg/lit-base';
+import Cropper from 'cropperjs';
+export class ExmgUploadCropBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.cropperConfig = {};
+        this.hideActions = false;
+    }
+    firstUpdated() {
+        this.fire('crop-start', {}, true);
+    }
+    async crop(item) {
+        this._item = item;
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (this.cropArea) {
+                this.cropArea.src = reader.result;
+            }
+            this.cropper = new Cropper(this.cropArea, this.cropperConfig);
+        };
+        if (item.file) {
+            reader.readAsDataURL(item.file);
+        }
+    }
+    _cancel() {
+        this.fire('crop-cancel', {}, true);
+    }
+    saveCropArea() {
+        var _a, _b;
+        const canvas = (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.getCroppedCanvas();
+        if (!canvas) {
+            throw new Error('Cropper canvas not found');
+        }
+        canvas === null || canvas === void 0 ? void 0 : canvas.toBlob((blob) => {
+            if (!this._item || !blob) {
+                return;
+            }
+            const file = new File([blob], `cropped-${this._item.file.name}`, { type: this._item.file.type });
+            this._item.file = file;
+            this.fire('crop-done', this._item);
+        }, (_b = this._item) === null || _b === void 0 ? void 0 : _b.file.type);
+    }
+    renderActions() {
+        return html `
+      <div class="actions">
+        <md-filled-button @click=${this._cancel}>Cancel</md-filled-button>
+        <md-filled-button @click=${this.saveCropArea}>Crop</md-filled-button>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="image-container">
+        <img id="image" />
+      </div>
+      ${this.hideActions ? nothing : this.renderActions()}
+    `;
+    }
+}
+__decorate([
+    property({ type: Object })
+], ExmgUploadCropBase.prototype, "cropperConfig", void 0);
+__decorate([
+    query('#image')
+], ExmgUploadCropBase.prototype, "cropArea", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadCropBase.prototype, "hideActions", void 0);
+__decorate([
+    state()
+], ExmgUploadCropBase.prototype, "_item", void 0);
+//# sourceMappingURL=exm-upload-crop-base.js.map

package/src/exm-upload-crop.d.ts

@@ -0,0 +1,9 @@
+import { ExmgUploadCropBase } from './exm-upload-crop-base.js';
+export declare class ExmgUploadCrop extends ExmgUploadCropBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-upload-crop': ExmgUploadCrop;
+    }
+}

package/src/exm-upload-crop.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-upload-crop-styles-css.js';
+import { ExmgUploadCropBase } from './exm-upload-crop-base.js';
+let ExmgUploadCrop = class ExmgUploadCrop extends ExmgUploadCropBase {
+};
+ExmgUploadCrop.styles = style;
+ExmgUploadCrop = __decorate([
+    customElement('exm-upload-crop')
+], ExmgUploadCrop);
+export { ExmgUploadCrop };
+//# sourceMappingURL=exm-upload-crop.js.map

package/src/exm-upload-drop-area-base.d.ts

@@ -0,0 +1,8 @@
+import { ExmgElement } from '@exmg/lit-base';
+declare const ExmgUploadDropAreaBase_base: (new (...args: any[]) => import("./mixins/exm-upload-drag-drop-mixin.js").DragAndDropInterface) & typeof ExmgElement;
+export declare class ExmgUploadDropAreaBase extends ExmgUploadDropAreaBase_base {
+    description?: string;
+    disabled?: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/exm-upload-drop-area-base.js

@@ -0,0 +1,34 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { DragAndDropMixin } from './mixins/exm-upload-drag-drop-mixin.js';
+import { ExmgElement } from '@exmg/lit-base';
+export class ExmgUploadDropAreaBase extends DragAndDropMixin(ExmgElement) {
+    render() {
+        return html ` <div
+      class="drop ${classMap({
+            disabled: !!this.disabled,
+            dropHover: this.dragOver && !this.disabled,
+        })}"
+      @dragover=${this.onDragOver}
+      @dragleave=${this.onDragLeave}
+      @drop=${this.onDrop}
+    >
+      <div class="drop-container">
+        <slot name="drop-icon"></slot>
+        <span class="drop-text">
+          <slot name="drop-text"></slot>
+        </span>
+        <span class="description">${this.description}</span>
+      </div>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmgUploadDropAreaBase.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadDropAreaBase.prototype, "disabled", void 0);
+//# sourceMappingURL=exm-upload-drop-area-base.js.map

package/src/exm-upload-drop-area.d.ts

@@ -0,0 +1,9 @@
+import { ExmgUploadDropAreaBase } from './exm-upload-drop-area-base.js';
+export declare class ExmgUploadDropArea extends ExmgUploadDropAreaBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-upload-drop-area': ExmgUploadDropArea;
+    }
+}

package/src/exm-upload-drop-area.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-upload-drop-area-styles-css.js';
+import { ExmgUploadDropAreaBase } from './exm-upload-drop-area-base.js';
+let ExmgUploadDropArea = class ExmgUploadDropArea extends ExmgUploadDropAreaBase {
+};
+ExmgUploadDropArea.styles = style;
+ExmgUploadDropArea = __decorate([
+    customElement('exm-upload-drop-area')
+], ExmgUploadDropArea);
+export { ExmgUploadDropArea };
+//# sourceMappingURL=exm-upload-drop-area.js.map

package/src/exm-upload-input.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import '@exmg/exm-collapsed';
+import { ExmgUpload } from './exm-upload.js';
+export declare class ExmgUploadInput extends LitElement {
+    opened: boolean;
+    closeDelay: number;
+    static styles: import("lit").CSSResult[];
+    getUploadElement(): ExmgUpload;
+    getInputElement(): HTMLInputElement;
+    protected firstUpdated(): void;
+    toggle(): void;
+    _uploadSuccess(): void;
+    handleClick(e: CustomEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-upload-input.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@exmg/exm-collapsed';
+import { style } from './styles/exm-upload-input-css.js';
+let ExmgUploadInput = class ExmgUploadInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+        this.closeDelay = 400;
+    }
+    getUploadElement() {
+        return this.querySelector('exm-upload');
+    }
+    getInputElement() {
+        return this.querySelector('[slot="input"]');
+    }
+    firstUpdated() {
+        const upload = this.getUploadElement();
+        if (upload) {
+            if (upload.multiple) {
+                console.warn('exm-upload-input: multiple is not supported, forcing to false');
+                upload.multiple = false;
+            }
+        }
+    }
+    toggle() {
+        this.opened = !this.opened;
+    }
+    _uploadSuccess() {
+        const upload = this.getUploadElement();
+        const input = this.getInputElement();
+        if (!input || !upload) {
+            return;
+        }
+        const response = upload.getValues()[0];
+        let value = '';
+        try {
+            const d = JSON.parse(response);
+            // @ts-ignore
+            value = d.url ? d.url : response;
+        }
+        catch (error) {
+            value = response;
+        }
+        input.value = value;
+        setTimeout(() => {
+            upload.reset();
+            this.opened = false;
+        }, this.closeDelay);
+    }
+    handleClick(e) {
+        e.preventDefault();
+        const el = e.target;
+        const slotValue = el.getAttribute('slot');
+        if (el.tagName.toLowerCase() === 'md-icon-button' && slotValue === 'trailing-icon') {
+            this.toggle();
+        }
+    }
+    render() {
+        return html `
+      <div class="input-wrapper">
+        <div class="input" aria-expanded=${this.opened} aria-controls="collapsed">
+          <slot name="input" @click=${this.handleClick}></slot>
+        </div>
+        <exm-collapsed id="collapsed" ?opened=${this.opened}>
+          <slot name="upload" @upload-success=${this._uploadSuccess}></slot>
+        </exm-collapsed>
+      </div>
+    `;
+    }
+};
+ExmgUploadInput.styles = [style];
+__decorate([
+    property({ type: Boolean })
+], ExmgUploadInput.prototype, "opened", void 0);
+__decorate([
+    property({ type: Number })
+], ExmgUploadInput.prototype, "closeDelay", void 0);
+ExmgUploadInput = __decorate([
+    customElement('exm-upload-input')
+], ExmgUploadInput);
+export { ExmgUploadInput };
+//# sourceMappingURL=exm-upload-input.js.map