feat: tus support (#369)

Signed-off-by: Prati28 <sankhepratiksha3@gmail.com> Signed-off-by: Pratiksha Sankhe <sankhepratiksha3@gmail.com> Co-authored-by: Anurag Gupta <me@anuragxd.com>
elixir-cloud-aai · Oct 22, 2024 · c868d4b · c868d4b
1 parent e561bff
commit c868d4b
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 19 deletions.
diff --git a/apps/documentation/pages/docs/design/components/form.mdx b/apps/documentation/pages/docs/design/components/form.mdx
@@ -94,7 +94,9 @@ This property is used to render the fields in the form. Fields can be passed as
 | arrayOptions.defaultInstances | `false`  | `null`  | `number`                                                                                                                            | Sets a default number of instances for fields of type `array` Only applies to fields of type `array`                                                                                                                      |
 | arrayOptions.max              | `false`  | `null`  | `number`                                                                                                                            | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array`                                                                                                                      |
 | arrayOptions.min              | `false`  | `null`  | `number`                                                                                                                            | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min                    |
-| groupOptions.collapsible      | `false`  | `null`  | `number`                                                                                                                            | Determines if a field of type `group` will be collapsible                                                                                                                                                                 |
+| groupOptions.collapsible      | `false`  | `null`  | `number`   
+| fileOptions.protocol          | `false`  | `native`| `string`                                                                                                                            | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min                    |
+| fileOptions.tusOptions        | `false`  | `null`  | `Object ({ endpoint: string })`                                                                                                                            | Determines if a field of type `group` will be collapsible                                                                                                                                                                 |
 
 ## Events
 
@@ -255,6 +257,17 @@ const fields: Fields[] = [
       tooltip: 'Your ID document',
     },
   },
+  {
+    key: "id2",
+    label: "ID",
+    type: "file",
+    fileOptions: {
+      protocol: "tus",
+      tusOptions: {
+        endpoint: "https://tusd.tusdemo.net/files/",
+      },
+    }
+  },
 ];
 ``
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ecc-utils-design/demo/form/index.html b/packages/ecc-utils-design/demo/form/index.html
@@ -134,6 +134,17 @@
             tooltip: "Your ID document",
           },
         },
+        {
+          key: "id2",
+          label: "ID",
+          type: "file",
+          fileOptions: {
+            protocol: "tus",
+            tusOptions: {
+              endpoint: "https://tusd.tusdemo.net/files/",
+            },
+          },
+        },
         {
           key: "gender",
           label: "Gender",

diff --git a/packages/ecc-utils-design/package.json b/packages/ecc-utils-design/package.json
@@ -66,6 +66,7 @@
     "typescript": "*"
   },
   "dependencies": {
+    "@anurag_gupta/tus-js-client": "^4.2.10",
     "@shoelace-style/shoelace": "^2.8.0",
     "ace-builds": "^1.35.0",
     "lit": "^2.8.0",

diff --git a/packages/ecc-utils-design/src/components/form/form.styles.ts b/packages/ecc-utils-design/src/components/form/form.styles.ts
@@ -167,6 +167,21 @@ const styles = css`
     box-shadow: 0 0 0 var(--ecc-focus-ring-width)
       var(--ecc-input-focus-ring-color);
   }
+  .progress-bar-container {
+    width: 100%;
+    height: 20px;
+    background-color: #e0e0e0;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+  .progress-bar {
+    height: 100%;
+    background-color: #76c7c0;
+    transition: width 0.2s ease;
+  }
+  .upload-percentage {
+    text-align: center;
+  }
   /* Submit Button */
   .submit-button {
     margin-top: var(--ecc-spacing-large);