@aquera/nile-elements 0.1.37 → 0.1.38-beta-1.0

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -0,0 +1,163 @@
+import { DragHandler } from "./drag-drop.util";
+import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
+import { NileFileUpload } from "../nile-file-upload";
+
+// write a function to check for duplicatse in the files name it as areDuplicates
+export const areDuplicates = (files: File[], uploadedFiles: File[]): boolean => {
+  return files.some(file =>
+    uploadedFiles.some(existing =>
+      file.name === existing.name &&
+      file.size === existing.size &&
+      file.lastModified === existing.lastModified
+    )
+  );
+};
+
+// set up the drag handler
+export const setUpDragHandler = (
+  nileFileUpload: NileFileUpload,
+  dragHandler: DragHandler
+): void => {
+  dragHandler.onStateChange((newState: FileUploadState) => {
+    nileFileUpload.state = newState;
+  });
+
+  dragHandler.onFileDrop((files: File[]) => {
+    let { allowMultiple, uploadedFiles, errorMessage, requestUpdate } = nileFileUpload;
+
+    if (!allowMultiple) {
+      const total = uploadedFiles.length + files.length;
+      if (total > 1) {
+        errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+        requestUpdate();
+        return;
+      }
+    }
+
+    let newFiles = files;
+
+    if (!nileFileUpload.allowDuplicates) {
+      newFiles = files.filter(file =>
+        !nileFileUpload.uploadedFiles.some(
+          uploaded =>
+            uploaded.name === file.name &&
+            uploaded.size === file.size &&
+            uploaded.type === file.type
+        )
+      );
+
+      if (newFiles.length === 0) {
+        nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+        nileFileUpload.requestUpdate();
+        return;
+      }
+    }
+
+    nileFileUpload.uploadedFiles = [...nileFileUpload.uploadedFiles, ...newFiles];
+    nileFileUpload.requestUpdate();
+  });
+
+  dragHandler.setErrorMessage((errorMessage: string) => {
+    nileFileUpload.errorMessage = errorMessage;
+  });
+};
+
+
+// global listenrers
+export const addGlobalListeners = (dragHandler: DragHandler): void => {
+  document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
+  document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
+}
+
+// for hover & dragging functionality
+export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {
+  nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));
+  nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));
+  nileFileUpload.addEventListener('dragenter', (e) => dragHandler.dragEnter(e));
+  nileFileUpload.addEventListener('dragleave', (e) => dragHandler.dragLeave(e));
+  nileFileUpload.addEventListener('dragover', (e) => dragHandler.dragOver(e));
+  nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  
+
+  cancelFileUpload(nileFileUpload, uploadRequests);
+}
+
+export function handleHoverIn(
+  setState: (state: FileUploadState) => void,
+  currentState: FileUploadState
+): void {
+  if (currentState === FileUploadState.DEFAULT) {
+    setState(FileUploadState.HOVER);
+  }
+}
+
+export function handleHoverOut(
+  setState: (state: FileUploadState) => void,
+  currentState: FileUploadState
+): void {
+  if (currentState === FileUploadState.HOVER) {
+    setState(FileUploadState.DEFAULT);
+  }
+}
+
+export function uploadFiles(nileFileUpload: NileFileUpload) {
+  const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;
+  if (!fileUploadUrl || !uploadedFiles?.length) return;
+
+  for (const file of uploadedFiles) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const xhr = new XMLHttpRequest();
+    uploadRequests.set(file, xhr);
+
+    xhr.upload.onprogress = (e) => {
+      const percent = Math.floor((e.loaded / e.total) * 100);
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {
+        detail: { file, progress: percent }
+      }));
+    };
+
+    xhr.onload = () => {
+      uploadRequests.delete(file);
+      if (xhr.status === 201) {
+        // Remove the successfully uploaded file
+        nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(f => f !== file);
+
+        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
+          detail: { file, response: xhr.response }
+        }));
+      } else {
+        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {
+          detail: { file, status: xhr.status, response: xhr.response }
+        }));
+      }
+    };
+
+    xhr.onerror = () => {
+      uploadRequests.delete(file);
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {
+        detail: { file, status: xhr.status, response: xhr.response }
+      }));
+    };
+
+    xhr.open('POST', fileUploadUrl);
+    xhr.send(formData);
+  }
+}
+
+export const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => {
+  document.addEventListener(FileUploadEvent.NILE_CANCEL_UPLOAD, (e: CustomEvent) => {
+    const fileToCancel = e.detail.file;
+    const xhr = uploadRequests.get(fileToCancel);
+
+    if (xhr) {
+      xhr.abort();
+    }
+    uploadRequests.delete(fileToCancel);
+    nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(file => file !== fileToCancel);
+
+    nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_CANCELLED, {
+      detail: { file: fileToCancel }
+    }));
+  });
+};

package/vscode-html-custom-data.json

@@ -1393,6 +1393,149 @@
         }
       ]
     },
+    {
+      "name": "nile-file-preview",
+      "description": "Nile preview component.\n\nAttributes:\n\n  * `errorMessage` {`string`} - \n\n  * `inputFile` {`File`} - \n\n  * `fileUrl` {`string`} - \n\n  * `uploadStatus` {`number`} - \n\n  * `allowedTypes` {`string[]`} - \n\n  * `state` {`FilePreviewState`} - \n\n  * `variant` {`FilePreviewVariant`} - \n\n  * `inputFileName` {`string`} - \n\nProperties:\n\n  * `errorMessage` {`string`} - \n\n  * `inputFile` {`File`} - \n\n  * `fileUrl` {`string`} - \n\n  * `uploadStatus` {`number`} - \n\n  * `allowedTypes` {`string[]`} - \n\n  * `state` {`FilePreviewState`} - \n\n  * `variant` {`FilePreviewVariant`} - \n\n  * `inputFileName` {`string`} - \n\n  * `inputFileHtml` {`UncompiledTemplateResult<ResultType> | null`} - \n\n  * `originalUrl` {`string`} - \n\n  * `dummyFile` {`File`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "errorMessage",
+          "description": "`errorMessage` {`string`} - \n\nProperty: errorMessage\n\nDefault: "
+        },
+        {
+          "name": "inputFile",
+          "description": "`inputFile` {`File`} - \n\nProperty: inputFile"
+        },
+        {
+          "name": "fileUrl",
+          "description": "`fileUrl` {`string`} - \n\nProperty: fileUrl\n\nDefault: "
+        },
+        {
+          "name": "uploadStatus",
+          "description": "`uploadStatus` {`number`} - \n\nProperty: uploadStatus\n\nDefault: 0"
+        },
+        {
+          "name": "allowedTypes",
+          "description": "`allowedTypes` {`string[]`} - \n\nProperty: allowedTypes\n\nDefault: "
+        },
+        {
+          "name": "state",
+          "description": "`state` {`FilePreviewState`} - \n\nProperty: state\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "uploading"
+            },
+            {
+              "name": "preview"
+            },
+            {
+              "name": "no-preview"
+            },
+            {
+              "name": "error"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`FilePreviewVariant`} - \n\nProperty: variant\n\nDefault: horizontal",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "inputFileName",
+          "description": "`inputFileName` {`string`} - \n\nProperty: inputFileName\n\nDefault: "
+        }
+      ]
+    },
+    {
+      "name": "nile-file-upload",
+      "description": "Nile file-upload component.\n\nAttributes:\n\n  * `size` {`number`} - \n\n  * `error` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `allowMultiple` {`boolean`} - \n\n  * `allowDuplicates` {`boolean`} - \n\n  * `uploadedFiles` {`File[]`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `state` {`FileUploadState`} - \n\n  * `variant` {`FileUploadVariant`} - \n\n  * `fileUploadUrl` {`string`} - \n\n  * `autoUpload` {`boolean`} - \n\nProperties:\n\n  * `size` {`number`} - \n\n  * `error` {`boolean`} - \n\n  * `errorMessage` {`string`} - \n\n  * `allowMultiple` {`boolean`} - \n\n  * `allowDuplicates` {`boolean`} - \n\n  * `uploadedFiles` {`File[]`} - \n\n  * `title` {`string`} - \n\n  * `subtitle` {`string`} - \n\n  * `state` {`FileUploadState`} - \n\n  * `variant` {`FileUploadVariant`} - \n\n  * `fileUploadUrl` {`string`} - \n\n  * `autoUpload` {`boolean`} - \n\n  * `input` {`HTMLInputElement`} - \n\n  * `uploadRequests` {`Map<File, XMLHttpRequest>`} - \n\n  * `dragHandler` - \n\n  * `setState` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "`size` {`number`} - \n\nProperty: size\n\nDefault: 0"
+        },
+        {
+          "name": "error",
+          "description": "`error` {`boolean`} - \n\nProperty: error\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "errorMessage",
+          "description": "`errorMessage` {`string`} - \n\nProperty: errorMessage\n\nDefault: "
+        },
+        {
+          "name": "allowMultiple",
+          "description": "`allowMultiple` {`boolean`} - \n\nProperty: allowMultiple\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "allowDuplicates",
+          "description": "`allowDuplicates` {`boolean`} - \n\nProperty: allowDuplicates\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "uploadedFiles",
+          "description": "`uploadedFiles` {`File[]`} - \n\nProperty: uploadedFiles\n\nDefault: "
+        },
+        {
+          "name": "title",
+          "description": "`title` {`string`} - \n\nProperty: title\n\nDefault: Drag and drop to upload"
+        },
+        {
+          "name": "subtitle",
+          "description": "`subtitle` {`string`} - \n\nProperty: subtitle\n\nDefault: PNG, JPG or SVG (upto 1MB) | 1:1 ratio"
+        },
+        {
+          "name": "state",
+          "description": "`state` {`FileUploadState`} - \n\nProperty: state\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "hover"
+            },
+            {
+              "name": "drag"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`FileUploadVariant`} - \n\nProperty: variant\n\nDefault: horizontal",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "fileUploadUrl",
+          "description": "`fileUploadUrl` {`string`} - \n\nProperty: fileUploadUrl\n\nDefault: "
+        },
+        {
+          "name": "autoUpload",
+          "description": "`autoUpload` {`boolean`} - \n\nProperty: autoUpload\n\nDefault: true",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "nile-filter-chip",
       "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ value: string; viewMoreCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `value` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",