Exporting Images from the Settings > Files Library

garyrgilbert
Excursionist
40 3 10

Anyone who has arrived here this latest script works.

 

function fetchPageAssets() {
let images = document.querySelectorAll('img[src*=files]');
images.forEach(function(image) {
files.push('<a href="' + image.src.replace(/_60x60/, "") + '"><img src="' + image.src.replace(/_60x60/, "") + '">');
});
}

function downloadListFile() {
let button = document.createElement("a");
let data = 'data&colon;application/octet-stream;base64,' + window.btoa(files.join('\n'));
button.id = "download-file";
button.href = data;
button.download = "shopify-files.html";
document.querySelector("body").append(button);
button.click();
}

var files = []
files.push('\n')
fetchPageAssets()
files.push('\n\n')
downloadListFile()

 I did not create this, and therefore can not promise that it will work for you

0 Likes
jillianashley
New Member
6 0 0

can you show me where in the script section I add this?

0 Likes
jillianashley
New Member
6 0 0
0 Likes
garyrgilbert
Excursionist
40 3 10

Hi Sorry, didn't get the notification

 

You can just add the script directly in the developer tools console.. First thing you need to do is go to the files page in your shopify admin

admin/settings/files

 

then open the browser developer tools (ctrl + shift + i in chrome) switch to the console tab, paste the code in and hit enter... a file will automatically end up in your downloads directory, open this file in your browser (you should see all the images now displayed).. the last step is to use the browser "save page as" feature to save the complete webpage.. that will automatically download all files and place them in a separate directory and voila...

Its a little complicated but since shopify doesnt provide that feature yet we don't have much choice.

 

Cheers

Gary

jillianashley
New Member
6 0 0

Thank you for responding! I am wondering if Shopify blocked users from doing that, because I see these messages

jillianashley_0-1622727030682.png

jillianashley_1-1622727134622.png

@garyrgilbert 

 

0 Likes
garyrgilbert
Excursionist
40 3 10

Ok Try this one.. I just tested it.

 

 

function fetchPageAssets() {
let images = document.querySelectorAll('img[src*=files]');
images.forEach(function(image) {
files.push('<img src="' + image.src.replace(/_60x60/, "") + '">');
});
}

function downloadListFile() {
let button = document.createElement("a");
let data = 'data&colon;application/octet-stream;base64,' + window.btoa(files.join('\n'));
button.id = "download-file";
button.href = data;
button.download = "shopify-files.html";
document.querySelector("body").append(button);
button.click();
}
var files = []
files.push('\n')
fetchPageAssets()
files.push('\n\n')
downloadListFile()

 

 

 

 

jillianashley
New Member
6 0 0
0 Likes
garyrgilbert
Excursionist
40 3 10

Sorry,

 

The add snippet function of the forum is changing a line of code...

this line

let data = 'data&colon;application/octet-stream;base64,' + window.btoa(files.join('\n'));

 should be

 

garyrgilbert_0-1622728985970.png

 

its escaping the colon and adding the HTML entity.. 

 

brentay
Shopify Partner
8 0 2

@garyrgilbert 

Thank you so much for sharing this and identifying why it wasn't working! This is amazing.

0 Likes
CynthiaESJ
Tourist
4 0 0

Hi @garyrgilbert and @brentay

I tried Gary's script, fixed the colon issue, but I get an error when running in my Chrome console. I'm in my Shopify Admin on my settings/files page (as you can see in screenshot). Pasted the fixed code in, hit return and get "Uncaught SyntaxError: Invalid or unexpected token" error. I attached a screenshot for you to see. I re-tried a few times, but same error.

This would be so fantastic to have working! I hope you can tell me what is wrong on my end. 

 

Screen Shot 2021-06-05 at 11.48.48 AM.png

Thanks so much!

Cynthia

 

 

0 Likes