Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Full process for uploading files to the Files API

Celso_White
Shopify Partner
23 0 23

I spent hours trying to figure out the full flow of uploading files to the files api. Download file contents > Create a staged target > Upload the file to the staged target > Upload file to Shopify. This solution is node js specific but may be helpful for other languages. Although Shopify has the base documentation in place, its missing a comprehensive breakdown of the steps to take and parameters to set. Hope this helps someone looking to upload files to the api.

 

See here for the gist.

 

 

 

/*------------------------
Libraries
------------------------*/
const axios = require("axios");
const fs = require("fs");
const FormData = require("form-data");

/*------------------------
Download the file.
Good article on how to download a file and send with form data - https://maximorlov.com/send-a-file-with-axios-in-nodejs/
------------------------*/
const file = await fs.readFile("./your-image.jpg"); // This can be named whatever you'd like. You'll end up specifying the name when you upload the file to a staged target.
const fileSize = fs.statSync("./your-image.jpg").size; // Important to get the file size for future steps.

/*------------------------
Create staged upload.
---
Shopify sets up temporary file targets in aws s3 buckets so we can host file data (images, videos, etc).
If you already have a public url for your image file then you can skip this step and pass the url directly to the create file endpoint.
But in many cases you'll want to first stage the upload on s3. Cases include generating a specific name for your image, uploading the image from a private server, etc.
------------------------*/
// Query
const stagedUploadsQuery = `mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    stagedTargets {
      resourceUrl
      url
      parameters {
        name
        value
      }
    }
    userErrors {
      field
      message
    }
  }
}`;

// Variables
const stagedUploadsVariables = {
  input: {
    filename: "example.jpg",
    httpMethod: "POST",
    mimeType: "image/jpeg",
    resource: "FILE", // Important to set this as FILE and not IMAGE. Or else when you try and create the file via Shopify's api there will be an error.
  },
};

// Result
const stagedUploadsQueryResult = await axios.post(
  `${your_shopify_admin_url}/graphql.json`,
  {
    query: stagedUploadsQuery,
    variables: stagedUploadsVariables,
  },
  {
    headers: {
      "X-Shopify-Access-Token": `${your_shopify_admin_token}`,
    },
  }
);

// Save the target info.
const target =
  stagedUploadsQueryResult.data.data.stagedUploadsCreate.stagedTargets[0];
const params = target.parameters; // Parameters contain all the sensitive info we'll need to interact with the aws bucket.
const url = target.url; // This is the url you'll use to post data to aws. It's a generic s3 url that when combined with the params sends your data to the right place.
const resourceUrl = target.resourceUrl; // This is the specific url that will contain your image data after you've uploaded the file to the aws staged target.

/*------------------------
Post to temp target.
---
A temp target is a url hosted on Shopify's AWS servers.
------------------------*/
// Generate a form, add the necessary params and append the file.
// Must use the FormData library to create form data via the server.
const form = new FormData();

// Add each of the params we received from Shopify to the form. this will ensure our ajax request has the proper permissions and s3 location data.
params.forEach(({ name, value }) => {
  form.append(name, value);
});

// Add the file to the form.
form.append("file", file);

// Post the file data to shopify's aws s3 bucket. After posting, we'll be able to use the resource url to create the file in Shopify.
await axios.post(url, form, {
  headers: {
    ...form.getHeaders(), // Pass the headers generated by FormData library. It'll contain content-type: multipart/form-data. It's necessary to specify this when posting to aws.
    "Content-Length": fileSize + 5000, // AWS requires content length to be included in the headers. This may not be automatically passed so you'll need to specify. And ... add 5000 to ensure the upload works. Or else there will be an error saying the data isn't formatted properly.
  },
});

/*------------------------
Create the file.
Now that the file is prepared and accessible on the staged target, use the resource url from aws to create the file.
------------------------*/
// Query
const createFileQuery = `mutation fileCreate($files: [FileCreateInput!]!) {
  fileCreate(files: $files) {
    files {
      alt
    }
    userErrors {
      field
      message
    }
  }
}`;

// Variables
const createFileVariables = {
  files: {
    alt: "alt-tag",
    contentType: "IMAGE",
    originalSource: resourceUrl, // Pass the resource url we generated above as the original source. Shopify will do the work of parsing that url and adding it to files.
  },
};

// Finally post the file to shopify. It should appear in Settings > Files.
const createFileQueryResult = await axios.post(
  `${your_shopify_admin_url}/graphql.json`,
  {
    query: createFileQuery,
    variables: createFileVariables,
  },
  {
    headers: {
      "X-Shopify-Access-Token": `${your_shopify_admin_token}`,
    },
  }
);

 

 

 

Replies 13 (13)

PaulNewton
Shopify Partner
6274 572 1310

Good stuff @Celso_White  

If I get time I'll slap it in a glitch.me app and pop through it.

 

Though Shopify has the base documentation in place, its missing a comprehensive breakdown of the steps to take and parameters to set.

Each dev doc page should have a feedback box either in sidebar or at bottom of the page;  for the relevant docs your talking about I'd suggest shamelessly linking to this post with a complaint about the lack of specificity that could be enhanced based on your codes comments about the process.

 

Or if you go through the partner dashboard support file an issues/feature-request/bug-report with partner support.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


BrianDHogg
Visitor
2 0 0

Hey Celso, 

 

Thanks for this! I'm having what I guess is a slight issue, which is that I'm getting an error when trying to post the file contents to S3:

 

Invalid Argument: 

Only AWS4-HMAC-SHA256 is supported

 

I'm trying to sort out if this is a configuration or implementation issue on my end, so if you're able to shine any light on this, it would be greatly appreciated. 

 

Cheers!

BrianDHogg
Visitor
2 0 0

Actually, never mind! I was having an issue with file-saving and had set the parameters from the pre-signing to be JSON.stringified and forgot to flip it back.

 

Cheers!

Celso_White
Shopify Partner
23 0 23

Hi @BrianDHogg glad you were able to figure it out. Yes, all parameters need to be posted to AWS exactly as you receive them from stagedUploadsCreate. Shopify will provide the exact authentication parameters you need in the response.

For anyone else getting this error make sure to add the AWS parameters to the formData as indicated here.

MerchFaceMark
Visitor
1 0 0

Switching to Axios (from just fetch) was a big help to me (in addition to all the rest).  Thanks!

den232
Shopify Partner
169 8 47

This is brilliant!  Thanks so much.  jb

peepers-rick
Shopify Partner
6 0 5

Wow, I was so close to getting this but kept running into random little issues that were driving me crazy. You got me across the finish line. Amazing post, thanks a ton!

Viglucci
Shopify Partner
3 0 1

I had a similar issue in my app, which turned out to be the missing headers.

 

const headers = {
...formData.getHeaders()
};

 Thanks for sharing your gist, helped me solve my issue. 

Celso_White
Shopify Partner
23 0 23

Hey just a heads up it appears that Shopify is now using google for the staged targets. Before creating your headers, check to see which staged target url Shopify returns. If they return a google url then don't include the Content-Length header. If they return an aws url then include the Content-Length header. Check out the gist for updated code.

den232
Shopify Partner
169 8 47
Thanks so much! What would be an example of the staged target URLs in
both cases? Cheers jb
Celso_White
Shopify Partner
23 0 23

No problem! See below for the targets I'm getting in my app:

Celso_White
Shopify Partner
23 0 23

Hi all, just a note that the above code is no longer working if your file is above 2MB. That's specifically caused by the Staged Uploads part of the code. At this stage I'm going to create my own staged file upload system with Google Cloud Storage so I have more control over that process.

 

If you don't plan on uploading files over 2MB or the issue is randomly fixed then you should be good to use the code above.

peepers-rick
Shopify Partner
6 0 5

Hi @Celso_White ,

I've found your work here very helpful and wanted to let you know that I'm consistently having success with files > 2 mb if I change this line: 

form.append("file", file);

to this

form.append("file", file, "somefilename.someextension")

 

After scouring across the internet for a few frustrating hours, I stumbled upon this to help me find this solution: https://issuetracker.google.com/issues/225060183