How can you extract a URL from uploaded files in the admin section?

Store Design

Topic summary

Core Issue:
Users need to extract URLs for files uploaded to Shopify’s admin Files section.

Primary Solution:
Use Liquid’s file_url filter:

{{ 'filename.jpg' | file_url }}

Dynamic Implementation Challenge:
One user wanted to dynamically change images via JavaScript dropdown selection. Since Liquid processes server-side and JavaScript runs client-side, direct Liquid-in-JS doesn’t work.

Workaround Provided:
Create a template string with Liquid, then use JavaScript’s .replace() method to swap values dynamically based on dropdown selection.

Bulk Export Method (200+ files):
For extracting multiple file URLs:

  • Install free GraphiQL App
  • Run bulk operation query to retrieve file data
  • Download resulting JSONL file containing URLs and filenames
  • Manual extraction from downloaded file required (copy/paste into Excel/Google Sheets)
  • Note: Default query retrieves first 200 images; modify query parameters for larger batches

Status:
Multiple working solutions provided for both single-file and bulk extraction scenarios.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hey

I’ve been searching around for some time now without any luck.
Is there any simple way to pull the link to a file that is uploaded to files in the admin section?

Something like {{ filename.jpg | file_url }}
Result: https://cdn.shopify.com/s/files/1/123456789/files/filename.jpg?15896234794137521981

2

Hey Malaco,

https://help.shopify.com/en/themes/liquid/filters/url-filters#file_url should do it. Is your example from above just an example or the exact code you are using. If that’s what you do then you have to change it to:

{{ 'filename.jpg' | file_url }}
3

Thanks Sergiu! You’re completely right.

A little sidequestion now would be if its possible to make it dynamic with javascripts?

What im trying to acompish with this code is to change image when it selects a new value from the dropdown.
I’ts important that it can read the value + .png since the value is used for other things that can’t have .png in it.

<img id="style-top" src="[https://cdn.shopify.com/s/files/1/1234/1234/files/image1.png](https://cdn.shopify.com/s/files/1/1234/1234/files/image1.png)" />

<div id="style-dropdowns-left">
  <div class="optionselect">
    <form>
      <select id="topSelect" onchange="ChangePic()">
        <option value="image1">image1</option>
        <option value="image2">image2</option>
      </select>
    </form>
  </div>
</div>

function ChangePic() {
  var x = document.getElementById("topSelect").value;
  document.getElementById("style-top").src = {{ "x".png | file_url }};
}
4

double post. please delete

5

Hey Malaco,

no, you can’t use liquid in javscript this way – all liquid processing is done server-side and javascript runs in client. But you can do it like this:

function ChangePic() {
  const template = "{{'image1.png' | file_url}}";
  var x = document.getElementById("topSelect").value;
  document.getElementById("style-top").src = template.replace( 'image1', x );
}
6

Confirmed Working Method - Just did this a few minutes ago and worked like a CHARM.

Since Shopify does not appear to want to help its customers whatsoever with the simplest of tasks like this export, we’re on our own folks! After hours of trying to figure this out, here is a FREE way to pull & download every single link:

  • Install GraphiQL App for free
  • Be sure to tick ‘Select All’ in case you want to modify this query for future use

If you need to pull/download MORE than 200 product links, stay here. Otherwise, skip to the bottom of this.

  • Open a query and copy/paste the red text below:

mutation {
bulkOperationRunQuery(
query: “”"
{
files (query:“created_at:‘$created_at’”) {
edges {
node {
… on MediaImage {
image {
id
url
}
}
}
}
}
}
“”"
) {
bulkOperation {
id
status
}
userErrors {
field
message
}
}
}

  • Depending on how many you need to pull, this could take a min, but it should be pretty fast. I had to pull ~25,000 and it completed in a minute or two (it’s very quick!!).
  • Next, run this query to actually DOWNLOAD the file:

query {
currentBulkOperation {
id
status
errorCode
createdAt
completedAt
objectCount
fileSize
url
partialDataUrl
}
}

  • If you see ‘Completed’ with the Status line, then you’re ready to download!
  • Copy the very long URL link you see a few lines below

    • keeks95_0-1684042265579.png

    • This is a JSONL file, which can easily be opened/copied in Notepad or as a TXT file and then into Excel/GoogleSheets

  • Once you successfully download the file, it will have both the file name and the corresponding URL.
    • You will need to do you own extraction of the link itself (i.e. use Excel to get the value before/after the “url:”
    • Be sure to mass-delate all of the '' so you have a working URL link

NOTE: If you want the altText, height & width of the images along with the Name/URL, just add them as extra lines below the other options you are pulling.

If you need to pull/download LESS than 200 product links, follow below

  • Open a query and copy/paste the blue text below:

{
files (first:200, query:“created_at:‘$created_at’”) {
edges {
node {
… on MediaImage {
image {
id
url
}
}
}
}
}
}

  • This will retrieve the first 200 images in your Files/Content section, so if you have more than 200 there, use the first set of instructions.
  • You will need to do the copy/pasting/extracting from there.

Hope this is able to help someone so you aren’t spending countless hours like I have on the most basic of tasks. Perhaps Shopify will listen to its customers in the future. Good luck :slightly_smiling_face:

2 Likes