Skip to content

SK-2958 added support for oversized images in render file in REVEAL c… #706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skyflow-bharti wants to merge 3 commits into
base: main
Choose a base branch
from
Open

SK-2958 added support for oversized images in render file in REVEAL c… #706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01f12a7
SK-2958 added support for oversized images in render file in REVEAL c…
skyflow-bharti Jul 6, 2026
00468c8
SK-2958 fix tests
skyflow-bharti Jul 6, 2026
e0d36c6
SK-2958 add readme and sample for overflow
skyflow-bharti Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3683,6 +3683,21 @@ errorTextStyles: {
}
```

#### Overflow support for rendered images
By default, an image rendered by a File Element scales responsively to fit its `width`/`height`. If you'd rather show the image at its full/natural size inside a fixed-size, scrollable container, set `overflow` (e.g. `'auto'` or `'scroll'`) alongside `width`/`height` in `inputStyles.base`:

```javascript
inputStyles: {
base: {
height: '250px',
width: '400px',
overflow: 'auto', // renders the image at full size and makes the container scrollable
},
}
```

`overflow` is optional — if you don't set it, rendering behaves exactly as before. This only affects image renders (`<img>`); it has no effect on non-image files rendered via `<embed>` (e.g. PDFs).

### Step 3: Mount Elements to the DOM
Elements used for rendering files are mounted to the DOM the same way as Elements used for collecting data. Refer to Step 3 of the [section above](https://github.com/skyflowapi/skyflow-js#step-3-mount-elements-to-the-dom).

Expand Down Expand Up @@ -4303,6 +4318,10 @@ errorTextStyles: {
}
}
```

#### Overflow support for rendered images
Composable File Elements support the same `overflow` style property as regular File Elements. Refer to the [Overflow support for rendered images](https://github.com/skyflowapi/skyflow-js#overflow-support-for-rendered-images) section above.

### Step 3: Mount Container to the DOM
Mount Elements for file rendering to the DOM the same way as Elements used for revealing data. Refer to Step 3 of the [section above](#step-3-mount-container-to-the-dom).

Expand Down Expand Up @@ -4351,7 +4370,9 @@ fetch("<BACKEND_URL>")
altText: "This is an altText",
});
// Step 3.
fileElement.mount("#renderFile"); // Assumes there is a placeholder div with id=renderFile on the page
// Note: for composable File Elements, `.mount()` is called on the container,
// not on the element returned by `.create()`.
container.mount("#renderFile"); // Assumes there is a placeholder div with id=renderFile on the page

const renderButton = document.getElementById("renderFiles"); // button to call render file

Expand Down
175 changes: 175 additions & 0 deletions samples/using-script-tag/composable-file-render-overflow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skyflow Elements - Composable File Render Overflow</title>
<script src="https://js.skyflow.com/v2/index.js"></script>
<style>
body {
display: flex;
flex-direction: column;
}
.render-view {
margin-top: 48px;
}
</style>
</head>
<body>
<h3>Composable Render File Elements - Overflow</h3>

<!-- Note: each composable File Element is mounted via its own container's
`.mount()` — the element returned by `.create()` has no `.mount()` of
its own, unlike the plain (non-composable) REVEAL container's elements. -->

<h4>With overflow (image shown at full size, container scrolls)</h4>
<div id="renderFileElementOverflow" class="render-view"></div>

<h4>Without overflow (default responsive sizing, unchanged for existing customers)</h4>
<div id="renderFileElementNoOverflow" class="render-view"></div>

<button id="renderFiles" style="height: 30px; width: 200px">
Render Files
</button>
<pre id="renderFileResponse"></pre>

<script>
try {
const config = {
vaultID: "<VAULT_ID>",
vaultURL: "<VAULT_URL>",
getBearerToken: () => {
return new Promise((resolve, reject) => {
const Http = new XMLHttpRequest();

Http.onreadystatechange = () => {
if (Http.readyState === 4 && Http.status === 200) {
const response = JSON.parse(Http.responseText);
resolve(response.accessToken);
}
};
const url = "<TOKEN_END_POINT_URL>";
Http.open("GET", url);
Http.send();
});
},
options: {
logLevel: Skyflow.LogLevel.ERROR,
env: Skyflow.Env.PROD,
},
};
const skyflowClient = Skyflow.init(config);

// `overflow` renders the image at its full/natural size and makes the
// fixed-size container scrollable, instead of scaling the image to fit.
const renderStyleOptionsWithOverflow = {
inputStyles: {
base: {
border: "2px solid #eae8ee",
padding: "10px",
borderRadius: "10px",
marginTop: "2px",
height: "250px",
width: "400px",
overflow: "auto",
},
},
errorTextStyles: {
base: {
color: "#f44336",
},
},
};

// Same height/width, `overflow` omitted — default responsive sizing,
// exactly as before this feature existed.
const renderStyleOptionsNoOverflow = {
inputStyles: {
base: {
border: "2px solid #eae8ee",
padding: "10px",
borderRadius: "10px",
marginTop: "2px",
height: "250px",
width: "400px",
},
},
errorTextStyles: {
base: {
color: "#f44336",
},
},
};

// REPLACE with your custom implementation to fetch skyflow_id from backend service.

// Sample implementation
fetch("<BACKEND_URL>")
.then((response) => {
// on successful fetch skyflow_id
const skyflowID = response.skyflow_id;

// step 1: one composable container per File Element.
const renderContainerOverflow = skyflowClient.container(
Skyflow.ContainerType.COMPOSE_REVEAL
);
const renderFileElementOverflow = renderContainerOverflow.create({
...renderStyleOptionsWithOverflow,
skyflowID: skyflowID,
column: "<COLUMN_NAME1>",
table: "<TABLE1>",
altText: "Driving License",
});

const renderContainerNoOverflow = skyflowClient.container(
Skyflow.ContainerType.COMPOSE_REVEAL
);
const renderFileElementNoOverflow = renderContainerNoOverflow.create({
...renderStyleOptionsNoOverflow,
skyflowID: skyflowID,
column: "<COLUMN_NAME1>",
table: "<TABLE1>",
altText: "Driving License",
});

// step 2: mount the container (not the element).
renderContainerOverflow.mount("#renderFileElementOverflow");
renderContainerNoOverflow.mount("#renderFileElementNoOverflow");

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

if (renderButton) {
renderButton.addEventListener("click", () => {
// step 3: call render file
renderFileElementOverflow
.renderFile()
.then((res) => {
document.getElementById("renderFileResponse").innerHTML =
JSON.stringify(res, null, 2);
})
.catch((err) => {
console.log("With overflow error", err);
});

renderFileElementNoOverflow
.renderFile()
.then((res) => {
console.log("Without overflow response", res);
})
.catch((err) => {
console.log("Without overflow error", err);
});
});
}
})
.catch((err) => {
// failed to fetch skyflow_id
console.log(err);
});
} catch (err) {
console.log(err);
}
</script>
</body>
</html>
163 changes: 163 additions & 0 deletions samples/using-script-tag/file-render-overflow.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://js.skyflow.com/v2/index.js"></script>
<title>File render elements - Overflow</title>
<style>
body {
display: flex;
flex-direction: column;
}
.empty-div {
width: 100%;
}
.render-view {
margin-top: 48px;
}
</style>
</head>
<body>
<h3>Render File Elements - Overflow</h3>

<h4>With overflow (image shown at full size, container scrolls)</h4>
<div id="renderFileElementOverflow" class="empty-div"></div>

<h4>Without overflow (default responsive sizing, unchanged for existing customers)</h4>
<div id="renderFileElementNoOverflow" class="empty-div"></div>

<button id="renderFiles" style="height: 30px; width: 200px">
Render Files
</button>
<script>
try {
const skyflow = Skyflow.init({
vaultID: "<VAULT_ID>",
vaultURL: "<VAULT_URL>",
getBearerToken: () => {
return new Promise((resolve, reject) => {
const Http = new XMLHttpRequest();

Http.onreadystatechange = () => {
if (Http.readyState === 4 && Http.status === 200) {
const response = JSON.parse(Http.responseText);
resolve(response.accessToken);
}
};
const url = "<TOKEN_END_POINT_URL>";
Http.open("GET", url);
Http.send();
});
},
});

// `overflow` renders the image at its full/natural size and makes the
// fixed-size container scrollable, instead of scaling the image to fit.
const renderStyleOptionsWithOverflow = {
inputStyles: {
base: {
border: "2px solid #eae8ee",
padding: "10px",
borderRadius: "10px",
marginTop: "2px",
height: "250px",
width: "400px",
overflow: "auto",
},
},
errorTextStyles: {
base: {
color: "#f44336",
},
},
};

// Same height/width, `overflow` omitted — default responsive sizing,
// exactly as before this feature existed.
const renderStyleOptionsNoOverflow = {
inputStyles: {
base: {
border: "2px solid #eae8ee",
padding: "10px",
borderRadius: "10px",
marginTop: "2px",
height: "250px",
width: "400px",
},
},
errorTextStyles: {
base: {
color: "#f44336",
},
},
};

// create container
const renderContainer = skyflow.container(Skyflow.ContainerType.REVEAL);

// REPLACE with your custom implementation to fetch skyflow_id from backend service.

// Sample implementation
fetch("<BACKEND_URL>")
.then((response) => {
// on successful fetch skyflow_id
const skyflowID = response.skyflow_id;

// step 1: create elements, pass fetched skyflow id and other details here
const renderFileElementOverflow = renderContainer.create({
...renderStyleOptionsWithOverflow,
skyflowID: skyflowID,
column: "<COLUMN_NAME1>",
table: "<TABLE1>",
altText: "Driving License",
});

const renderFileElementNoOverflow = renderContainer.create({
...renderStyleOptionsNoOverflow,
skyflowID: skyflowID,
column: "<COLUMN_NAME1>",
table: "<TABLE1>",
altText: "Driving License",
});

// step 2: mount the elements
renderFileElementOverflow.mount("#renderFileElementOverflow");
renderFileElementNoOverflow.mount("#renderFileElementNoOverflow");

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

if (renderButton) {
renderButton.addEventListener("click", () => {
// step 3: call render file
renderFileElementOverflow
.renderFile()
.then((res) => {
console.log("With overflow response", res);
})
.catch((err) => {
console.log("With overflow error", err);
});

renderFileElementNoOverflow
.renderFile()
.then((res) => {
console.log("Without overflow response", res);
})
.catch((err) => {
console.log("Without overflow error", err);
});
});
}
})
.catch((err) => {
// failed to fetch skyflow_id
console.log(err);
});
} catch (err) {
console.log(err);
}
</script>
</body>
</html>
Loading
Loading