@exmg/exm-upload 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-upload",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "dependencies": {
     "@exmg/exm-button": "^1.0.1",
     "@exmg/exm-collapsed": "^1.0.1",
@@ -49,5 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "72cea6089d6ed7f8ffe190fffeab57f2c36dbc02"
+  "gitHead": "c1af4ad8444da5406a6bb82f58ba4a67e09b948d"
 }

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

@@ -51,7 +51,7 @@ export declare class ExmUploadBase extends ExmgElement {
     /**
      * The upload response type
      */
-    serverType: 'xhr' | 'custom' | 'local';
+    serverType: 'xhr' | 'local' | 'form-data' | 'custom';
     /**
      * The CropperJS config see: https://github.com/fengyuanchen/cropperjs#options
      */

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

@@ -13,7 +13,7 @@ export declare class ExmUploadItemBase extends ExmgElement {
     /**
      * The upload response type
      */
-    serverType: 'xhr' | 'local' | 'custom';
+    serverType: 'xhr' | 'local' | 'form-data' | 'custom';
     /**
      * The upload response type
      */

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

@@ -26,9 +26,7 @@ export class ExmUploadItemBase extends ExmgElement {
             headers,
             responseType: this.responseType,
         };
-        if (this.customAdapterPath) {
-            payload.customAdapterPath = this.customAdapterPath || window.uploadDefaults.customAdapterPath;
-        }
+        payload.customAdapterPath = this.customAdapterPath || window.uploadDefaults.customAdapterPath;
         this.uploadService = await UploadService.create(this.serverType, payload);
         this.handleFileUpload();
     }

package/src/styles/exm-dialog-upload-css.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-export const style = css `:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}[slot=headline]{display:flex;flex-direction:row-reverse;align-items:center}[showing-fullscreen] [slot=headline]{flex-direction:row}.headline{flex:1;display:block;text-align:left}exm-upload,::slotted(exm-upload){width:460px}`;
+export const style = css `:host{border-start-start-radius:var(--md-dialog-container-shape-start-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start, var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));font-size:var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));line-height:var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));font-weight:var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));fill:currentColor;font-size:var(--md-dialog-icon-size, 24px);margin-top:24px;height:var(--md-dialog-icon-size, 24px);width:var(--md-dialog-icon-size, 24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));flex:1;font-weight:var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}[slot=headline]{display:flex;flex-direction:row-reverse;align-items:center}[showing-fullscreen] [slot=headline]{flex-direction:row}.headline{flex:1;display:block;text-align:left}exm-upload,::slotted(exm-upload){width:460px}`;
 export default style;
 //# sourceMappingURL=exm-dialog-upload-css.js.map

package/src/upload/adapters/form-data-adapter.d.ts

@@ -0,0 +1,7 @@
+import { UploadAdapter, UploadConfig } from '../types.js';
+declare class XHRJSONUploadAdapter implements UploadAdapter {
+    config: UploadConfig;
+    constructor(config: UploadConfig);
+    upload(file: File, progressCallback: (progress: number) => void): Promise<string>;
+}
+export { XHRJSONUploadAdapter as UploadAdapter };

package/src/upload/adapters/form-data-adapter.js

@@ -0,0 +1,46 @@
+class XHRJSONUploadAdapter {
+    constructor(config) {
+        this.config = config;
+    }
+    async upload(file, progressCallback) {
+        const onProgress = (event) => {
+            if (event.lengthComputable) {
+                const percentage = (event.loaded / event.total) * 100;
+                progressCallback(Math.round(percentage));
+            }
+        };
+        const xhr = new XMLHttpRequest();
+        xhr.upload.addEventListener('progress', onProgress);
+        const formData = new FormData();
+        formData.set('file', file);
+        formData.set('filename', file.name);
+        return new Promise((resolve, reject) => {
+            const { uploadUrl } = this.config;
+            if (!uploadUrl)
+                reject(new Error(`Upload url not found`));
+            xhr.responseType = 'json';
+            xhr.open('POST', uploadUrl, true);
+            for (const key in this.config.headers || {}) {
+                if (Object.prototype.hasOwnProperty.call(this.config.headers, key)) {
+                    xhr.setRequestHeader(key, this.config.headers[key]);
+                }
+            }
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === XMLHttpRequest.DONE) {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve(xhr.response);
+                    }
+                    else {
+                        reject(new Error(`Upload failed with status ${xhr.status}`));
+                    }
+                }
+            };
+            xhr.onerror = () => {
+                reject(new Error('Upload failed due to network error'));
+            };
+            xhr.send(formData);
+        });
+    }
+}
+export { XHRJSONUploadAdapter as UploadAdapter };
+//# sourceMappingURL=form-data-adapter.js.map

package/src/upload/service.d.ts

@@ -4,6 +4,6 @@ declare class UploadService {
     constructor(adapter: UploadAdapter);
     upload(file: File, progressCallback: (progress: number) => void): Promise<string>;
     abort(): void;
-    static create(destination: 'xhr' | 'local' | 'custom', config?: UploadConfig): Promise<UploadService>;
+    static create(destination: 'xhr' | 'local' | 'form-data' | 'custom', config?: UploadConfig): Promise<UploadService>;
 }
 export { UploadService };

package/src/upload/service.js

@@ -29,6 +29,9 @@ class UploadService {
             case 'xhr':
                 adapter = await instantiateClass('./adapters/xhr-adapter.js', config);
                 break;
+            case 'form-data':
+                adapter = await instantiateClass('./adapters/form-data-adapter.js', config);
+                break;
             case 'custom':
                 adapter = await instantiateClass(config === null || config === void 0 ? void 0 : config.customAdapterPath, config);
                 break;