Upload Files via API

Solved
James_Tull
New Member
1 0 2

Is there a way to upload files into the files section (not assets or products/images) via the api yet?  I found this post and a few others but they're all two years old so I am hoping. 
Thanks

Accepted Solution (1)

Accepted Solutions
ChahnaGupta
Shopify Staff
Shopify Staff
4 2 0

This is an accepted solution.

You can now interact with files using the new Files API. Find more information about it https://shopify.dev/changelog/file-api-is-now-availableThis Admin Graph API is available to start from the 07-2021 release candidate.

View solution in original post

Replies 14 (14)
Jason
Shopify Expert
10882 190 2178

Hey James,

There's currently no Files API for adding content to /admin/files section of the Admin.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Michaël_G_
Shopify Expert
73 0 52

That would definitely be a killer! Also opening this to the Shopify Embedded SDK would be awesome. Currently we have an app that requires file uploading but files are uploaded to S3 or whatever either service. Which is cool but does not come with all the nice filters Shopify provide on image to generate smaller copies of images.

HunkyBill
Shopify Expert
4764 54 551

Ask the developer of the App to add that. Since days long before Amazon even existed as a cloud service, ImageMagick has existed to create alternate versions of images. So there is really nothing new to that, and almost all examples of file uploaders come with image altering as their premise. 

Seems a no-brainer and hence if your App is just vanilla uploading, ask for other flavours. Who could say no to that?

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Michaël_G_
Shopify Expert
73 0 52

No need ot answer in such condescending ways (it's not the first time you're doing it, especially since you're often answering without getting the question and needs right)...

Using ImageMagick instead needs that you need additional infrastructure, while I currently just upload images directly to S3 (not even need to handle the file upload using a server).

Having the possibility to upload directly to Shopify Files has a ton of advantages. Users can use the traditional filters and do that kind of things: {{ 'my_image.jpg' | img_url: '400x', crop: 'center' }}.

Obviously you can do that server-side as well, but you would need to support all the features Shopify support (arbitrary sizes, crop, scale parameters...), which would mean handling your own infrastructure to that. That requires time, money... while Shopify could just open their files API or add it to app to upload directly to files.

So I'm returning your own question: who could say no to that?

HunkyBill
Shopify Expert
4764 54 551

First off, there is zero condenscending in my answer. Look up the english definition. You said you have an App that requires image manipulation. Your english poorly communicated the fact that this App was written by YOU.

So getting back to your question, stop shooting the messenger and instead read the answer provided, which in this case, is likely the correct one. Even a cursory (brief) review of uploading to S3 includes ways where your upload could signal extra processing (a filter) along with the data.

The OP asked about upload to /files... was told it is impossible. Now you chime in you have to upload to S3 but cannot stomach extra processing, and are miffed you cannot provide Liqud access to said images with filters. You really want to get into that? There are a couple of questions here. If you're directly and securely uploading to S3, you are in fact talking to your server first. So you have infrastructure in place, otherwise you'd have no key to S3. As for downloading images from S3, that is custom anyway, so building in filters remains your domain anyway...   

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Michaël_G_
Shopify Expert
73 0 52

I suggest you re-reading your answers (in general) in all threads in this forum :). This one as well.

Indeed, the app is written by me (so my broken English conveyed the right message then :)), and I'm indeed trying to find the best solutions for my users.

What I'm trying to explain is that you are providing solutions which are indeed valid (yes, uploading to S3 or whatever providers is valid, yes you can as well do post processing / pre processing / processing on the fly, yes you can automatically generate multiple sizes yourself).

But I think that most app that deals with file upload is to display them at some point somewhere in the storefront, in emails, in PDF... or whatever.

If you wanted to replicate what Shopify gives you for all images with the img_url filter, yes you could definitely do it with the way you've explained BUT as I told you it would introduce A LOT of complexities when this is already developped by Shopify which could just open this API.

Have a nice Sunday too !

HunkyBill
Shopify Expert
4764 54 551

You want the Shopify under-the-hood image processor at your disposal for images that are not inside Shopify? 

All to save yourself a bit of work? Right.. and I am the bad guy... 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Michaël_G_
Shopify Expert
73 0 52

Pleeeeease... It's not because I emitted a small criticism in your answers that you need to act this way :(. I never told you that you were a bad guy. You're actually often very helpful and I really appreciate that you take the time to answer in those threads. Just wanted to say something that I've felt through a lot of your answers when you give answer a bit too "bolded" without sometimes getting the full context. And attacking me on my English knowing I'm not native and that I'm trying my best is not the best defence imho. But well... let's close that!

First, it's not "a bit of work" to replicate all what Shopify is doing (but you're likely having much more experience than me on that).

As said (please try to understand that), there are huge advantage of using the files API is that people can use the EXACT same Liquid code to benefits from all the features Shopify has.

The question wether it belongs to Shopify is interesting. I'd say that if you're offering an app that would allow to add, let's say, additiona images to a blog post, I don't see how much different it is from the "featured image" Shopify has. You're extending the platform but at the end, the images belong to the store and are used strictly in the context of your store. But yeah, I agree that this could be abused from some people that would use Shopify as a free S3 to use the images strictly outside the scope of a Shopify store.

Actually, because the Shopify has a section "Files" where you can upload manually and without any limit all the assets you want, I could also simply replace my "Upload files" feature by just a URL where the merchant would have to upload first the image in the Files seciton, and copy-paste the URL.

JoshHighland
Shopify Expert
89 2 45

I agree, I would like to upload files directly into a store instead of hosting them myself on s3. 

This is an API that people have been asking about for years.

Thomas_Michalak
Excursionist
22 0 6

Same here, being able to upload to files through the API would be great. 

Trying to migrate a client's blog to shopify and I'm currently stuck because of this.

There was a "Wordpress Importer" App from Shopify that worked great but it has disappear from the store!  That's super fustrating as it was part of the reason why migrating to shopify seems possible.

Blogfeeder is a bit different and cannot import images into Files like "Wordpress Importer" did. 

I thought I had a work around with the Admin API, by first creating an article, then updating the featured image for each images in the article content, store those new shopify image sources and use it t orebuild the article content. Sadly, everytime you update the image when updating the article, the previous image gets delete from the shopify servers.   

Problem solver, strategist, user-centric creative designer and trusted team leader. My work is data-driven and outcome focused, blending Design Thinking with Lean methodology. I run Design Sprints in conjunction with user research and business insights to quickly validate hypotheses with users and generate buy-in from the business.
Patrick_Phelan
Shopify Partner
5 1 2

It is unfortunate that the Files doesn't have an upload API that people have been asking for for at least 4 years, and apparently existed at one point. Even this reply box has an image upload! 

However, because this post shows up at the top on Google and one of the experts has been inopportune, here's a sample solution for when you have copied the blog posts, but now the linked images don't work. You will need to put the images somewhere.  One could use the Shopify Settings Files upload to manually upload the files. Or get another hosting service for just images so the directory structure can stay the same and you can do bulk uploads. Amazon S3 is a good solution for that.

Either way, there's still the issue of changing all the img src links in years of blog posts. You could do that by hand, but here's a sample javascript to do that for you. (NOTE: never execute random scripts in your admin page's console without understanding what they do. You will need to edit this to fit your site, so it needs some Javascript knowledge. If you do hire a developer, this will at least save them some time.)

 

var blogid = '1234567';//copy this number off the url when you are looking at the admin "Edit blog" page
var replaceFrom = 'https://www.oldsite.com/wp-content/uploads/';
var replaceTo = 'https://cdn.shopify.com/s/files/1/1234/4321/files/';
var page = 1;
var looper = true;
while(looper) {
  $.ajax({
        async: false,
      url:'/admin/blogs/'+blogid+'/articles.json',
    data:{fields:'id,body_html', limit:50, page:page},
      dataType   : 'json',
      error: function () {looper=false;},
      success: function(data) {
        if (!data.articles || data.articles.length==0) {
            looper = false;
        }
      $.each(data.articles, function (i, art){
        var body_html = art.body_html.split(replaceFrom).join(replaceTo);

//any other edits to body_html here, for  example Shopify search links:

//body_html = body_html.replace(/\/catalogsearch\/result\/\?q=(.*?)\&.*?"/g, '/search?q=$1"');


        if (art.body_html != body_html) {
          $.ajax({
            method: 'PUT',
            async: false,
            url:'/admin/blogs/'+blogid+'/articles/'+art.id+'.json',
            data:{article:{body_html:body_html}},
            dataType   : 'json',
            error: function () {looper=false;}
          })
        }
      })
    }
  });
  page = page +1 ;
  if (page > 100) {//some reasonable max number
      looper = false;
  }
}

jakehow
Shopify Partner
3 0 0

For future searchers, if you need to automate this its possible to do via headless chrome.  It may trigger reCaptcha or be unreliable.

 

I put together a small example here: https://github.com/jakehow/shutils

 

There are also some GraphQL endpoints to manage product media now, if that is the issue you are trying to solve: https://help.shopify.com/en/api/guides/media

ChahnaGupta
Shopify Staff
Shopify Staff
4 2 0

This is an accepted solution.

You can now interact with files using the new Files API. Find more information about it https://shopify.dev/changelog/file-api-is-now-availableThis Admin Graph API is available to start from the 07-2021 release candidate.

CPrado
New Member
1 0 0

Good morning,

 

How do I interact with the File API?