Is it possible to zip multiple images from a url? I've seen two posts about a a bug in the zip download.
Hey @nroeder!
There's a thread here that outlines how to zip multiple files together in Retool. If you run into any issues going through it let me know and we can investigate further!
the images are from a url, I replaced the body with the link, but the file is blank.
var zip = new JSZip();
var img = zip.folder("images");
img.file(1, "https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/home-improvement/wp-content/uploads/2022/07/download-23.jpg", {base64: false});
zip.generateAsync({type:"base64"}).then(function (base64) {
utils.downloadFile({base64Binary: base64}, "images", "zip")
}, function (err) {
utils.showNotification({title: "Error", description: err, notificationType: "Error"})
});
I think JSZip expects raw data here instead of a URL. You can grab that using a separate REST API query that you trigger with additional scope. This seems to work for me, can you try the same and let me know how that goes?
REST Query:
JS Query:
const zip = new JSZip();
const img = zip.folder("images");
const imgData = await api.trigger({additionalScope: {imageUrl: "https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/home-improvement/wp-content/uploads/2022/07/download-23.jpg"}});
img.file(1, imgData.base64Binary, {base64: true});
zip.generateAsync({type:"base64"}).then(function (base64) {
utils.downloadFile({base64Binary: base64}, "images", "zip")
}, function (err) {
utils.showNotification({title: "Error", description: err, notificationType: "Error"})
});
2 Likes
you are amazing! thank you so much.
so the restQuery actually solved a more difficult problem I was working on in uploading photos from a url directly to a user's one drive account.
If I wanted to pass an array of images from urls in how would I do that with the Rest query. When i put an array in I get "only absolute URLS are supported"
I was able to get the zip to work with mulitple files not sure how to translate this to onedrive api
const zip = new JSZip();
const img = zip.folder("images");
var myStringArray= getPhotos.data.FullUrl;
var arrayLength = myStringArray.length;
for (var i=0; i <arrayLength; i++) {
const imgData = await api.trigger({additionalScope: {imageUrl: getPhotos.data.FullUrl[i] }});
img.file(getPhotos.data.FileName[i], imgData.base64Binary, {base64: true});
}
zip.generateAsync({type:"base64"}).then(function (base64) {
utils.downloadFile({base64Binary: base64}, "images", "zip")
}, function (err) {
utils.showNotification({title: "Error", description: err, notificationType: "Error"})
});
Are you trying to zip multiple files and then upload them to onedrive or upload each one separately?
If it's the latter you might try triggering the query multiple times as you are with api.trigger in the example, we have more extensive docs on how to do so here. Does that seem like it could work?
I was able to do it with
var myStringArray= getPhotos.data.FullUrl;
var arrayLength = myStringArray.length;
//async function go() {
for (var i=0; i <arrayLength; i++) {
getBinaryImageUrlOneDrive.trigger({
additionalScope :{
imageURL: getPhotos.data.FullUrl[i]
}
}),
downloadPhotosOneDrive.trigger({
additionalScope: {
imageName: getPhotos.data.PhotoId[i]+'.jpg',
imageCustomer: tableCustomer.selectedRow.data.Customer
}
});
}
1 Like