Hi Team,
I am using “gridjs-spreadsheet”: “^25.9.0”, version earlier I used “gridjs-spreadsheet”: “^24.6.2” here the images are loading correctly , after upgrade the images are not loading properly
Hi Team,
I am using “gridjs-spreadsheet”: “^25.9.0”, version earlier I used “gridjs-spreadsheet”: “^24.6.2” here the images are loading correctly , after upgrade the images are not loading properly
It appears you are encountering issues with image loading after upgrading from version 24.6.2 to 25.9.0 of the “gridjs-spreadsheet” package. This may be related to changes in image handling in the newer version.
To troubleshoot this issue, please consider the following steps:
Check Release Notes: Review the release notes for version 25.9.0 to identify any breaking changes or updates concerning image handling.
Image Path: Verify that the paths to the images are still valid and accessible. Upgrades can sometimes alter how paths are resolved.
Code Review: If you have custom code for loading images, ensure that it is compatible with the new version. Look for any deprecated methods or properties that may have been removed or altered.
Testing: Create a minimal example that reproduces the issue, if possible. This can help determine whether the problem is due to the upgrade or specific to your implementation.
If the issue persists, consider reaching out to the support forums for “gridjs-spreadsheet” with specific details about the problem, including any error messages or relevant code snippets.
For further assistance, please refer to the official documentation and community forums associated with the “gridjs-spreadsheet” package for additional insights or solutions related to your issue.
Could you please share your template Excel file (please zip the file prior attaching) where the images in it are not loading properly with Aspose.Cells.GridJs 25.9.0. Also, share some screenshots to exhibit the images loading problems. We will check your issue soon.
We are able to see the file demo site .
Can you please suggest a stable version of gridjs-spreadsheet
?
as per my understand v24.6.2 is the stable version , can you please correct me if I am wrong.
@sarathepiq
The latest release version is always the stable version. Can you provide the sample file?
Images, icons and formulae 1.zip (1.5 MB)
package : gridjs-spreadsheet": “^25.9.0”,
Below is my code
const fileDownloadUrl = ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/Download?document_id=${documentId}&projectId=${projectId}&StormedAccessToken=${token}
;
const oleDownloadUrl = “/GridJs2/Ole”;
const imageurl = ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/ImageUrl
;
const imageuploadurl1 = “/GridJs2/AddImage”;
const imageuploadurl2 = “/GridJs2/AddImageByURL”;
const imagecopyurl = “/GridJs2/CopyImage”;
const lazyLoadingUrl = ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/LoadSheet?StormedAccessToken=${token}
;
const loadNormalContext = (data: GridData) => {
const option = {
updateMode: “server”,
updateUrl: ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/UpdateCell?projectId=${projectId}&stormedAccessToken=${token}
,
showToolbar: true,
mode: “read”,
showContextmenu: false,
local: “en”,
loadingGif: “/static/content/img/updating.gif”,
};
loadWithOption(data, option);
};
const loadWithOption = (jsondata: GridData, option: any) => {
const {
uniqueid,
data: sheets,
filename,
showtabs,
actname,
actrow,
actcol,
} = jsondata;
const xs : any = new Spreadsheet("#loadPrizmCells", option);
xs.loadData(sheets);
setXSpreadsheet(xs);
xs.change(() => {
handleChangeRedaction();
})
xs.setUniqueId(uniqueid);
xs.setFileName(filename);
xs.setImageInfo(
imageurl,
imageuploadurl1,
imageuploadurl2,
imagecopyurl
);
xs.setFileDownloadInfo(fileDownloadUrl);
xs.setOleDownloadInfo(oleDownloadUrl);
xs.setLazyLoadingUrl(lazyLoadingUrl);
xs.setOpenFileUrl("/list");
if (!showtabs) xs.bottombar.hide();
let activeSheetName = actname;
if (xs.bottombar.dataNames.indexOf(activeSheetName) >= 0) {
xs.setActiveSheetByName(activeSheetName).setActiveCell(actrow, actcol);
} else {
activeSheetName = xs.bottombar.dataNames[0];
xs.setActiveSheetByName(activeSheetName).setActiveCell(0, 0);
}
};
Do we need to make any API changes? We are using java as a Api layer.
Thanks for the sample Excel file and code snippet.
We will evaluate your issue thoroughly using your template file and code snippet. We have opened the following new ticket(s) in our internal issue tracking system and will either provide devised code snippet or deliver their fixes according to the terms mentioned in Free Support Policies.
Issue ID(s): CELLSGRIDJS-1923
You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.
@sarathepiq
I just run the java demo here.
It is OK.
<dependency>
<groupId>com.aspose</groupId>
<artifactId>aspose-cells</artifactId>
<version>25.9</version>
</dependency>
<dependency>
<groupId>com.aspose</groupId>
<artifactId>aspose-cells</artifactId>
<version>25.9</version>
<classifier>gridjs</classifier>
</dependency>
in the html file check whether it uses the latest client v25.9 version.
<!--for release reference,https://unpkg.com/gridjs-spreadsheet/ prefix will always get the latest version-->
<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script>
Is below client side script is fine or am i need to made any configuration chnages?
Below is my code
const fileDownloadUrl = ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/Download?document_id=${documentId}&projectId=${projectId}&StormedAccessToken=${token}
;
const oleDownloadUrl = “/GridJs2/Ole”;
const imageurl = ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/ImageUrl
;
const imageuploadurl1 = “/GridJs2/AddImage”;
const imageuploadurl2 = “/GridJs2/AddImageByURL”;
const imagecopyurl = “/GridJs2/CopyImage”;
const lazyLoadingUrl = ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/LoadSheet?StormedAccessToken=${token}
;
const loadNormalContext = (data: GridData) => {
const option = {
updateMode: “server”,
updateUrl: ${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/UpdateCell?projectId=${projectId}&stormedAccessToken=${token}
,
showToolbar: true,
mode: “read”,
showContextmenu: false,
local: “en”,
loadingGif: “/static/content/img/updating.gif”,
};
loadWithOption(data, option);
};
const loadWithOption = (jsondata: GridData, option: any) => {
const {
uniqueid,
data: sheets,
filename,
showtabs,
actname,
actrow,
actcol,
} = jsondata;
const xs : any = new Spreadsheet("#loadPrizmCells", option);
xs.loadData(sheets);
setXSpreadsheet(xs);
xs.change(() => {
handleChangeRedaction();
})
xs.setUniqueId(uniqueid);
xs.setFileName(filename);
xs.setImageInfo(
imageurl,
imageuploadurl1,
imageuploadurl2,
imagecopyurl
);
xs.setFileDownloadInfo(fileDownloadUrl);
xs.setOleDownloadInfo(oleDownloadUrl);
xs.setLazyLoadingUrl(lazyLoadingUrl);
xs.setOpenFileUrl("/list");
if (!showtabs) xs.bottombar.hide();
let activeSheetName = actname;
if (xs.bottombar.dataNames.indexOf(activeSheetName) >= 0) {
xs.setActiveSheetByName(activeSheetName).setActiveCell(actrow, actcol);
} else {
activeSheetName = xs.bottombar.dataNames[0];
xs.setActiveSheetByName(activeSheetName).setActiveCell(0, 0);
}
};
@sarathepiq
It seems ok.
can you track the network connections and the console output in browser inspection window.
can you provide a sample project?
@sarathepiq
I notice you use the access token ,
so I guess in the serverside controller action for get image files it requires the token verify.
you may set the token in loadoption:
const option = {
updateMode: "server",
updateUrl: `${window.__ENV__.REACT_APP_BASE_URL_CELL_API}/UpdateCell?projectId=${projectId}&stormedAccessToken=${token}` ,
showToolbar: true,
mode:"read",
showContextmenu: false,
local: "en",
loadingGif: "/static/content/img/updating.gif",
token:`${token}`
};
loadWithOption(data, option);
};
or you can call:
xs.refreshToken( `${token} `)
you can search “token” in the document here:
For simple verification, you can disable token authentication on the server side and check if the images load works .