Download a file using admin block extension

Extensions
1

I’m Developing an order admin ui block extension and I want to have an admin block extension with a button to download a file stored in the store’s files (the file is hosted on the Shopify CDN).

              <Button variant="primary" download="image.png" to="https://cdn.shopify.com/s/files/1/0916/8722/3587/files/123-2.png?v=1737458814">
                Download
              </Button>

It opens the image in the browser and it’s being downloaded.

It’s not a blob URL as @tberry tried to download and I tested it with multiple links - none of it works.

Is the “download” attribute on the button works?

"@shopify/ui-extensions": "2025.1.0",
"@shopify/ui-extensions-react": "2025.1.0",
2

Hi @Tamir_Kaduri

It looks like you’ve run into a bit of an edge case with the download feature on the Button. If you’re serving the file yourself, you can explicitly set the Content-Disposition': 'attachment' header on the response, but when you’re using a file from the store’s files, the request is cross-origin and that header is not set explicitly. The solution is to use the attachment query param to force the link to download.

Just add it to your URL like this: https://cdn.shopify.com/s/files/1/0916/8722/3587/files/123-2.png?v=1737458814&attachment.

I’ll add a note to the Button docs to make things easier for folks who run into this in the future!

2 Likes
3

Hi @Elana ,
Thank you, it worked!
But, I uploaded a PNG file and it downloaded a WEBP file.
I understand the convertion for better performace but I really do need the original PNG image. I saw in a community thread that you can pass a format query param but that doesn’t seem to work (even without the attachment param).
Is still still supported? Is there a way for me to get the image back in the original PNG format?
I tried to pass a filename with a png extension to the “download” prop but it didn’t work (and actually doesn’t seem to even change the filename itself regardless of the format)

4

Hi @Tamir_Kaduri ,

Sorry for the delayed response! It doesn’t look like we support the format param any longer, but I am able to download in the original format, both manually from the files section and with a url in the block extension. Is this the method you’re using?

        <Button
          to="https://cdn.shopify.com/s/files/.../image.png?v=...&attachment"
        >
            Download
        </Button>
5

Hi @Elana,
Thank you very much for responding!
Yes, I am using this exact method.

  <Button to={"https://cdn.shopify.com/s/files/1/0916/8722/3587/files/cutout_fba1869c-8d62-4b84-86f4-cbde43f48270.png?v=1738842061&attachment"}>Download</Button>;

If I add a download property, the file still downloads as webp and with the original name, not the one I passed in

<Button download="test.png" to={"https://cdn.shopify.com/s/files/1/0916/8722/3587/files/cutout_fba1869c-8d62-4b84-86f4-cbde43f48270.png?v=1738842061&attachment"}>Download</Button>;
6

Hi @Tamir_Kaduri

It looks like you may need to contact support directly on this as we’re unable to replicate what you’re experiencing, and our internal team can dig into the specific store where this is happening.

7

Quick update: I’ve been in touch with support over the past couple of months, and we’ve finally confirmed that this isn’t possible within Shopify. The original format can’t be retrieved due to the default Accept header. While it’s technically possible to override this header by making an AJAX request to the link, the response is a blob (data link), which isn’t supported in Admin Block extensions.

1 Like