Download CSV from an Admin Action

Extensions
1

I am trying to create an Admin Action, to aggregate data (total SKU count, etc) from selected orders and download a CSV. This is the same issue brought up on the old forum.

The issue seems to be that the blob URL is not passed through as an href to the link tag. It seems to work just fine with a standard URL.

const blob = new Blob([data], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
...

<Button download={true} href={url}>Export</Button>

Does anyone have any updates on this issue, or know if support for data URLs will be added in the future?

Any help to get this added would be greatly appreciated. Thanks so much!

2 Likes
2

Just a quick thought here but you might try this:

Totally unsure if that would be a usable solution in your case but it would be nice to know if it works for you.

3

@RobDukarski Thanks for the idea, but neither a Link or a Button seem to support a data URL as an href so this unfortunately doesn’t work.

4

Could you try something like this with the onClick event?

    const event = document.createEvent('MouseEvents'),
    const anchor = document.createElement('a');

    anchor.download = 'aggregate-data.csv';
    anchor.href = url;
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    anchor.dispatchEvent(event);

Instead of using the href…

Really unsure if the set up event allows custom JS to be ran like that but if it does then it might work. I use similar code when I want to download data from the DevTools console as JSON.

5

Admin UI Extensions (admin actions) don’t have access to the document object.

6

I figured that may be the case but did not find the documentation stating as such…

I know that is the case for customer account UI extensions and checkout UI extensions and documented.

That said, have you thought about storing the data on your end and surfacing an external URL to link there? Frankly, I am unsure if it could even link externally but if it can that may be an option.

7

I am trying to keep this as an extension-only app, so there’s no backend to surface an external URL.

8

Hey folks - connecting with the product team on this, will update here when I get more info.

2 Likes
9

@tberry funny you bring this up, I have a similar feature dependent on downloads from admin actions is actually on my backlog.

An alternative might be to send an email out of band with the CSV attachment directly to the staff member?

10

I’ve created this as an issue here => https://github.com/Shopify/ui-extensions/issues/2448

2 Likes
11

@Liam-Shopify Just wanted to follow up and see if you heard anything from the product team on this?

12

Hey @tberry We currently block data urls for security reasons at the moment. Seeing as this is in fair demand, we’ll take a look and see if we can open it up in the future.

Before then, I’d love to grab some time and talk about what you’re trying to build in depth. Maybe we can brainstorm some stopgap solution.

2 Likes
13

@Aaron_Springut Thanks for the quick reply! It would be great if this functionality could be added. I’d love to chat about any possible solutions, let me know the best way to connect.