skyflow-js 1.18.0 → 1.19.0

package/README.md

@@ -132,6 +132,7 @@ For `env` parameter, there are 2 accepted values in Skyflow.Env
 -  [**Event Listener on Collect Elements**](#event-listener-on-collect-elements)
 -  [**UI Error for Collect Eements**](#ui-error-for-collect-elements)
 - [**Set and Clear value for Collect Elements (DEV ENV ONLY)**](#set-and-clear-value-for-collect-elements-dev-env-only)
+- [**Using Skyflow File Element to upload a file**](#using-skyflow-file-element-to-upload-a-file)
 ## Inserting data into the vault
 
 To insert data into the vault from the browser, use the `insert(records, options?)` method of the Skyflow client. The `records` parameter takes a JSON object of the records to be inserted in the below format. The `options` parameter takes a dictionary of optional parameters for the insertion. See below: 
@@ -290,6 +291,8 @@ Finally, the `type` field takes a Skyflow ElementType. Each type applies the app
 - `CVV`
 - `INPUT_FIELD`
 - `PIN`
+- `FILE_INPUT`
+  
 
 The `INPUT_FIELD` type is a custom UI element without any built-in validations.  See the section on [validations](#validations) for more information on validations.
 
@@ -480,7 +483,9 @@ Skyflow-JS provides two types of validations on Collect Elements
 
 #### 1. Default Validations:
 Every Collect Element except of type `INPUT_FIELD` has a set of default validations listed below:
-- `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm), available card lengths for defined card types
+- `CARD_NUMBER`: Card number validation with checkSum algorithm(Luhn algorithm).
+Available card lengths for defined card types are [12, 13, 14, 15, 16, 17, 18, 19]. 
+A valid 16 digit card number will be in the format - `XXXX XXXX XXXX XXXX`
 - `CARD_HOLDER_NAME`: Name should be 2 or more symbols, valid characters should match pattern -  `^([a-zA-Z\\ \\,\\.\\-\\']{2,})$`
 - `CVV`: Card CVV can have 3-4 digits
 - `EXPIRATION_DATE`: Any date starting from current month. By default valid expiration date should be in short year format - `MM/YY`
@@ -1083,6 +1088,218 @@ cardNumber.setAltText("Card Number");
 //clear altText
 cardNumber.clearAltText(); 
 ```
+
+## Using Skyflow File Element to upload a file
+
+You can upload binary files to a vault using the Skyflow File Element. Use the following steps to securely upload a file.
+### Step 1: Create a container
+
+Create a container for the form elements using the container(Skyflow.ContainerType) method of the Skyflow client:
+
+```javascript
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT)
+```
+
+### Step 2: Create a File Element
+
+Skyflow Collect Elements are defined as follows: 
+
+```javascript
+const collectElement =  {
+   table: "string",             //the table this data belongs to
+   column: "string",            //the column into which this data should be inserted
+   skyflowID: "string",         // the skyflow_id of the record
+   type: Skyflow.ElementType.FILE_INPUT,   //Skyflow.ElementType enum
+   inputStyles: {},             //optional styles that should be applied to the form element
+   labelStyles: {},             //optional styles that will be applied to the label of the collect element
+   errorTextStyles:{},          //optional styles that will be applied to the errorText of the collect element
+}
+```
+The `table` and `column` fields indicate which table and column the Element corresponds to. 
+
+`skyflowID` indicates the record that stores the file.
+
+**Notes**: 
+- `skyflowID` is required while creating File element
+- Use period-delimited strings to specify columns nested inside JSON fields (e.g. `address.street.line1`).
+
+ ## Step 3: Mount elements to the DOM
+
+To specify where to render Elements on your page, create placeholder `<div>` elements with unique `id` tags. For instance, the form below has an empty div with a unique id as a placeholder for a Skyflow Element. 
+
+```html
+<form>
+  <div id="file"/>
+  <br/>
+  <button type="submit">Submit</button>
+</form>
+```
+
+Now, when the `mount(domElement)` method of the Element is called, the Element is inserted in the specified div. For instance, the call below inserts the Element into the div with the id "#file".  
+
+```javascript
+element.mount("#file")
+```
+Use the `unmount` method to reset a Collect Element to its initial state.
+
+```javascript
+element.unmount();
+```
+## Step 4: Collect data from elements
+
+When the file is ready to be uploaded, call the `uploadFiles()` method on the container object.
+
+```javascript
+container.uploadFiles()
+```
+### File upload limitations:
+
+- Only non-executable file are allowed to be uploaded.
+- Files must have a maximum size of 32 MB
+- File columns can't enable tokenization, redaction, or arrays.
+- Re-uploading a file overwrites previously uploaded data.
+- Partial uploads or resuming a previous upload isn't supported.
+
+### End-to-end file upload
+
+```javascript
+//Step 1
+const container = skyflowClient.container(Skyflow.ContainerType.COLLECT) 
+
+//Step 2
+const element = container.create({           
+  table: "pii_fields",
+  column: "file",
+  skyflowID:"431eaa6c-5c15-4513-aa15-29f50babe882",
+  inputstyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },
+  type: Skyflow.ElementType.FILE_INPUT
+})
+
+// Step 3
+element.mount("#file")  //assumes there is a div with id="#file" in the webpage
+
+// Step 4
+container.uploadFiles()
+```
+
+**Sample Response :**
+```javascript
+{
+    fileUploadResponse: [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+#### File upload with additional elements
+
+```javascript
+// Create collect Container
+
+const collectContainer = skyflow.container(Skyflow.ContainerType.COLLECT);
+
+
+// Create collect elements
+
+const cardNumberElement = collectContainer.create({
+  table: "newTable",
+  column: "card_number",
+  inputstyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },,
+  placeholder: "card number",
+  label: "Card Number",
+  type: Skyflow.ElementType.CARD_NUMBER,
+});
+
+const fileElement = collectContainer.create({
+  table: "newTable",
+  column: "file",
+  skyflowID: '431eaa6c-5c15-4513-aa15-29f50babe882',
+  inputstyles: {
+      base: {
+        color: "#1d1d1d",
+      },
+  },
+  labelStyles: {
+      base: {
+        fontSize: "12px",
+        fontWeight: "bold"
+      }
+  },
+  errorTextStyles: {
+      base: {
+        color: "#f44336"
+      }
+  },,
+  type: Skyflow.ElementType.FILE_INPUT,
+});
+
+// Mount the elements
+
+cardNumberElement.mount("#collectCardNumber");
+fileElement.mount("#collectFile");
+
+// Collect and upload methods
+
+container.collect(options={})
+container.uploadFiles()
+
+```
+**Sample Response for collect():**
+```javascript
+{
+  "records": [
+    {
+      "table": "newTable",
+      "fields": {
+        "card_number": "f3907186-e7e2-466f-91e5-48e12c2bcbc1",
+      }
+    }
+  ]
+}
+```
+**Sample Response for file uploadFiles() :**
+```javascript
+{
+    "fileUploadResponse": [
+        {
+            "skyflow_id": "431eaa6c-5c15-4513-aa15-29f50babe882"
+        }
+    ]
+}
+```
+
+
 ## Reporting a Vulnerability
 
 If you discover a potential security issue in this project, please reach out to us at security@skyflow.com. Please do not create public GitHub issues or Pull Requests, as malicious actors could potentially view them.