Exporting Images from the Settings > Files Library

Highlighted
Shopify Partner
50 1 5

Hi friends, we're migrating our website from one Shopify store to a developer sandbox and have successfully migrated the theme and products.

 

Unfortunately, NONE of the images (social icons, logos, lifestyle photos) came over, and there doesn't appear to be any way to download our images.

 

Is there a way to export our image library? Or do we need to literally go through each photo, one by one, and download them?

 

Thank you!

(Also, if the latter is the answer...SHOPIFY PLEASE FIX THIS)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
841 54 139

Hi, @BirdieGolden 

 

Elle here from Shopify. 

Currently, this feature does not exist in our platform. Our developers are aware of the requests for this feature and we do hope we can bring this to life soon!

 

I was able to find a GitHub where a developer external to Shopify details a couple of different ways to fetch these files using Javascript here.

 

Hope this helps!

 

Cheers,
Elle

 

 

 

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
3 0 5

This is ridiculous. I can't believe that you cannot let the store owner download their assets. What's wrong with you people?

Highlighted
Tourist
4 0 3

Is there a roadmap of features and expected release dates? This has to be on of the biggest flaws in shopify, along with the inability to create decent looking content pages without creating an exponential number of custom templates.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
841 54 139

Hi, all

Thank you for expressing your concerns. Our developers are aware of this request and we hope to offer a solution in the future. At this time, there is no roadmap I can share; however, please keep your eyes on our changelog for product updates. 

If you are able to provide more context as to why this feature is imperative to running your business on Shopify, I will share this directly with our developers. 

Also, if you are looking for a workaround, there are solutions provided in this thread here. 

 

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
4 0 3

Thanks - I adapted another script to open all the files in new tabs from the Settings > Files section and I used that tab extension, worked perfectly fine except for the three hours i wasted finding that solution buried in the forums.

The business case is for customers who operate a DEV > UAT > LIVE deployment process. Managing those media assets added through the theme customizer is a pain, migrating across to a different store requires the following;

Source: Export Theme
Source: Export Products (if required)
Source: Manually Export Images

All it needs is a 'download option' from the Settings > Files Dashboard; and if you're there - extending it to show more than 50 images would be handy.

---

Extension: https://chrome.google.com/webstore/detail/tab-save/lkngoeaeclaebmpkgapchgjdbaekacki/related

Script:

function fetchPageAssets(){
  var downloader = $("<a id='download-file' href='' download='' target='_blank'></a>")
  $(".ui-title-bar").append(downloader)
  var assets = $("#assets-table .next-input--readonly")
  assets.each(function(index, input) {
    $('#download-file').attr('href', input.value);
    $('#download-file')[0].click();
    if (index + 1 == assets.length) {
      var lastItem = $(input).parents("tr[bind-class]").attr('bind-class').substring(25,36)
      $.ajax({
        url: "/admin/settings/files?direction=next&last_id="+lastItem+"&last_value="+ lastItem+"&limit=100&order=id+desc",
      }).done(function(data) {
        var mutationObserver = new MutationObserver(function(mutations, observer) {
          mutations.forEach(function(mutation) {
            if (mutation.target.id && mutation.target.id == "assets-table") {
              fetchPageAssets()
              observer.disconnect()
            }
          })
        });
        mutationObserver.observe(document, {
          childList: true,
          subtree: true
        });
        var newDoc = document.open("text/html", "replace");
        newDoc.write(data);
        newDoc.close();
      })
    }
  })
}
fetchPageAssets()
Highlighted
Tourist
4 0 3

Update: Adding ?limit=250 query parameter to the admin/settings/files URL allows you to use the above script for a larger number of images without having to paginate.

Highlighted
Shopify Staff
Shopify Staff
841 54 139

Thank you so much for sharing, @Stuart_H_AU !

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Expert
150 0 30

I ran that script in Javascript console on the Files page, but it only opened the first image in a new tab and then gave me a GET error.

I would love some help getting this to work so we don't have to pay an app every time we want to see a preview in a dev store!

0 Likes
Highlighted
Tourist
4 0 3

Hey, you could try a different approach and use the following script to create a HTML file containing all the images from the files section. Once complete, you open the HTML file in your browser, it will fetch all the images and just 'save as'.

 

function fetchPageAssets() {

    var assets = $('.next-input').map(function(key, val) { return val.value; }).get()
    assets.forEach(function (value) {
        if (value != "") {
            files.push('<img src="' + value + '">')
        }
    })
}

function downloadListFile() {
    var downloader = $("<a id='download-file' href='' download='shopify-files.html'></a>")
    $(".ui-title-bar").append(downloader)
    var data = 'data&colon;application/octet-stream;base64,' + window.btoa(files.join('\n'));
    $('#download-file').attr('href', data);
    $('#download-file')[0].click();
}
var files = []
files.push('<html>\n<body>')
fetchPageAssets()
files.push('</body>\n</html>\n')
downloadListFile()

 

0 Likes