SK-2571 sample and readme changes for zip file by skyflow-bharti · Pull Request #674 · skyflowapi/skyflow-js

skyflow-bharti · 2026-02-19T13:21:37Z

No description provided.

github-actions · 2026-02-19T13:21:51Z

✅ Gitleaks Findings: No secrets detected. Safe to proceed!

github-actions · 2026-02-19T13:22:13Z

Semgrep Findings: Issues with Error level severity are found (Error is Highest severity in Semgrep), Please resolve the issues before merging.

Copilot

Pull request overview

This PR adds support for rendering and interacting with ZIP files using Composable Reveal Elements in the Skyflow JavaScript SDK. It introduces a new sample HTML file demonstrating ZIP file rendering functionality and comprehensive documentation explaining the feature.

Changes:

Added a new sample file (render-zip-file.html) demonstrating how to render ZIP files with navigation and download capabilities
Added comprehensive documentation in README.md explaining ZIP file rendering feature, including API usage, styling options, and code examples
Introduced new styling options specific to ZIP rendering: zipNavStyles, zipNavListItemStyles, and zipPanelStyles

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 14 comments.

File	Description
samples/using-script-tag/render-zip-file.html	New sample file demonstrating ZIP file rendering with composable reveal elements, including file navigation and download functionality
README.md	Added documentation section for ZIP file rendering feature with step-by-step guide, styling options, response format, and complete example

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-20T06:33:30Z

README.md

+After you create and mount the element, call the renderFile() method on the element as shown below:
+```javascript
+  const options = {
+          zipRender: true, // Enable zip file rendering, Default is false


Inconsistency in capitalization: "zip" vs "ZIP". Line 4456 uses lowercase "zip" in the comment "Enable zip file rendering" while most other places in the documentation use uppercase "ZIP" (e.g., line 4448, 4532, 4577). Maintain consistent capitalization throughout the documentation, preferably using "ZIP" as it's an acronym.

Suggested change

zipRender: true, // Enable zip file rendering, Default is false

zipRender: true, // Enable ZIP file rendering, Default is false

Copilot · 2026-02-20T06:33:30Z

README.md

+### Step 3: Enable ZIP rendering in options
+After you create and mount the element, call the renderFile() method on the element as shown below:
+```javascript
+  const options = {
+          zipRender: true, // Enable zip file rendering, Default is false
+  };
+
+  const renderZipFileElement = revealContainer.create(renderZipFileInput, options);
+
+  renderZipFileElement
+    .renderFile()
+    .then(data => {
+      // Handle success
+    })
+    .catch(err => {
+      // Handle error
+  });
+```


Step 3 heading is misleading. The heading says "Enable ZIP rendering in options" but the code example shows both creating the element with options AND calling renderFile(). This should either be split into two steps (Step 3: Create element with options, Step 4: Render the file) or the heading should be updated to "Create and render the ZIP file element".

Copilot · 2026-02-20T06:33:30Z

samples/using-script-tag/render-zip-file.html

+            skyflowID: "<SKYFLOW_ID>", //  zip
+            column: "<COLUMN_NAME>",
+            table: "<TABLE_NAME>",
+            altText: "Driving License",


The altText value "Driving License" seems inconsistent with the purpose of rendering ZIP files. Consider using a more generic placeholder like "Loading ZIP file..." or "ZIP File" to better match the context of this sample.

Suggested change

altText: "Driving License",

altText: "ZIP File",

Copilot · 2026-02-20T06:33:31Z

README.md

+    cursor: 'pointer',
+    borderBottom: '1px solid #eee',
+  },
+  focus:{


Missing space after colon in "focus:{". Should be "focus: {" for consistency with the code style used throughout the documentation.

Suggested change

focus:{

focus: {

Copilot · 2026-02-20T06:33:31Z

README.md

+  .catch((err) => {
+    console.error("Failed to fetch skyflow_id:", err);
+  });


Broken code structure: There is an orphaned .catch() block without a matching promise chain. Lines 4594-4596 show a catch block that appears to be intended to close a fetch promise, but there's no opening fetch or promise chain in the example. This will cause a syntax error if copied as-is.

Suggested change

.catch((err) => {

console.error("Failed to fetch skyflow_id:", err);

});

Copilot · 2026-02-20T06:33:32Z

samples/using-script-tag/render-zip-file.html

+
+    const revealContainerOptions = {
+				layout: [1],
+				styles: {
+					base: {
+					}
+				},
+				errorTextStyles: {
+					base: {
+						color: 'red',
+						fontFamily: '"Roboto", sans-serif'
+					},
+					global: {
+						'@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+					}
+				}
+    }
+


Inconsistent indentation with tabs instead of spaces. Lines 57-70 use tabs for indentation while the rest of the file uses spaces. This should be consistent with the codebase convention of using 2 spaces per indentation level.

Suggested change

const revealContainerOptions = {

layout: [1],

styles: {

base: {

}

},

errorTextStyles: {

base: {

color: 'red',

fontFamily: '"Roboto", sans-serif'

},

global: {

'@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',

}

}

}

const revealContainerOptions = {

layout: [1],

styles: {

base: {

}

},

errorTextStyles: {

base: {

color: 'red',

fontFamily: '"Roboto", sans-serif'

},

global: {

'@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',

}

}

}

Copilot · 2026-02-20T06:33:32Z

samples/using-script-tag/render-zip-file.html

+				}
+    }
+
+    const revealContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, revealContainerOptions);;


Double semicolons at the end of the statement. Remove one semicolon to maintain consistency with the rest of the codebase.

Suggested change

const revealContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, revealContainerOptions);;

const revealContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, revealContainerOptions);

Copilot · 2026-02-20T06:33:32Z

samples/using-script-tag/render-zip-file.html

+    const renderStyleOptions = {
+        inputStyles: {            // styled for overall container where zip file is rendered
+          base: {
+           borderRadius: "3px",
+            border: '2px solid #eae8ee',
+            height: "400px",
+            width: "100%",
+            overflow: 'auto',
+          },
+        },
+        zipNavStyles: {    // styles for zip navigation panel
+          base: {
+            borderRight: '4px solid #eae8ee',
+          },
+          focus: {
+           // boxShadow: 'red',
+           // borderColor: 'red',
+          },
+        },
+        zipNavListItemStyles: {  // styles for file name list items on zip nav
+          base: {
+            margin: '0px',
+            border: 'none',
+            borderRadius: '0px',
+            backgroundColor: 'none',
+           // height: '10px',
+          //  width: '500px',
+           // borderRadius: '4px',
+           // backgroundColor: '#f5f5f5',
+           // font: '16px Arial, sans-serif',
+          //  color: '#1d1d1d',
+          //  padding: '10px',
+          //  margin: '5px',
+          },
+          focus: {               // styles for file name list item on focus
+           border: 'none',
+           backgroundColor: '#d0f0c0', //light green on focus
+          },
+        },
+        zipPanelStyles: {    // styles for right panel where file content is rendered
+          base: {
+           // backgroundColor: '#ffffff',
+          //  border: '10px solid #eae8ee',
+           // overflow: 'none',
+           // padding: '16px',
+          }
+        }


Significant amount of commented-out code should be removed. Lines 89-90, 99-106, and 115-118 contain commented-out style properties. If these are meant as examples, they should be documented in the README or removed entirely to keep the sample clean and focused.

Copilot · 2026-02-20T06:33:33Z

README.md

+**Enable Zip Render** - 
+```javascript
+const options = {
+  zipRender: true  // Enable ZIP file rendering, defaults to false
+};
+```


Duplicate section: "Enable Zip Render" is documented both here (lines 4445-4450) and again in Step 3 (lines 4455-4457). This creates confusion as the same options object is shown twice with slight variations in comments ("defaults to false" vs "Default is false"). Consider removing this duplicate section or consolidating it into Step 3.

Suggested change

**Enable Zip Render** -

```javascript

const options = {

zipRender: true // Enable ZIP file rendering, defaults to false

};

```

Copilot · 2026-02-20T06:33:33Z

README.md

+    // Render ZIP file with zipRender option enabled
+    const renderButton = document.getElementById("renderButton");
+    if (renderButton) {
+      renderButton.addEventListener("click", () => {
+        fileElement
+          .renderFile({ zipRender: true })  // Enable ZIP file rendering


Inconsistency in API usage: The renderFile() method is called with a zipRender option parameter on line 4577, but earlier in Step 3 (line 4462), renderFile() is called without parameters. The zipRender option should be set when creating the element (as shown in line 4459), not when calling renderFile(). This inconsistency could confuse users about the correct API usage.

Suggested change

// Render ZIP file with zipRender option enabled

const renderButton = document.getElementById("renderButton");

if (renderButton) {

renderButton.addEventListener("click", () => {

fileElement

.renderFile({ zipRender: true }) // Enable ZIP file rendering

// Render ZIP file (zipRender should be configured when creating the element)

const renderButton = document.getElementById("renderButton");

if (renderButton) {

renderButton.addEventListener("click", () => {

fileElement

.renderFile()

skyflow-bharti added 2 commits February 19, 2026 18:48

SK-2571 add sample and readme changes for zip file

4fa25a1

SK-2571 add sample and readme changes for zip file

5dda2e4

saileshwar-skyflow approved these changes Feb 20, 2026

View reviewed changes

saileshwar-skyflow requested a review from Copilot February 20, 2026 06:29

Copilot started reviewing on behalf of saileshwar-skyflow February 20, 2026 06:29 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

aadarsh-st approved these changes Feb 20, 2026

View reviewed changes

	zipRender: true, // Enable zip file rendering, Default is false
	zipRender: true, // Enable ZIP file rendering, Default is false

	.catch((err) => {
	console.error("Failed to fetch skyflow_id:", err);
	});

	const revealContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, revealContainerOptions);;
	const revealContainer = skyflowClient.container(Skyflow.ContainerType.COMPOSE_REVEAL, revealContainerOptions);

Comments

Conversation

skyflow-bharti commented Feb 19, 2026

Uh oh!

github-actions bot commented Feb 19, 2026

Uh oh!

github-actions bot commented Feb 19, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants