File API - Get the file url after it's being uploaded successfully

Retired Boards Appdev Graphql Basics And Troubleshooting
1

I have been using the Files API (in one of the App that I have been working on) to upload the images from user’s local machine. I was able to upload the image successfully (in files) with stagedUploadsCreate mutation and fileCreate mutation. But I am not able to retrieve the url of the file.

See the below response from the fileCreate mutation:

I tried to retrieve the url of the file from preview property of the File instance (returns by the fileCreate mutation), but I always receive the image property of the preview object null. I know it’s because the fileStatus is still “UPLOADED” and I may have to wait till the fileStatus become “READY”.

My question is, how do I wait for the fileStatus to be “READY” before I get the response from fileCreate mutation ? Or is there any other way to get the file url after it’s being uploaded successfully in the files ?

To make a workaround, I tried with writing a separate graphql query to read that specific file (queried with filename and createdAt), but I found out, sometimes it doesn’t work when the file take a bit time to get uploaded successfully.

I searched for events too for this purpose, but couldn’t find any.

"fileCreate": {
    "userErrors": [],
    "files": [
      {
        "createdAt": "2021-10-20T15:24:16Z",
        "fileStatus": "UPLOADED",
        "fileErrors": [],
        "id": "gid://shopify/MediaImage/23117738246329",
        "image": null,
        "preview": {
          "status": "UPLOADED",
          "image": null
       }
     }
   ]
 }

FYI, the fileCreate mutation query that I wrote:

const fileCreated = await client.query({
    data: `mutation {
      fileCreate(
        files: {
          originalSource: "${resourceUrl}"
        }
      ) {
        userErrors {
          field
          message
        }
        files {
          createdAt
          fileStatus
          fileErrors {
            code
            message
            details
          }
          ... on MediaImage {
              id
              image {
                  originalSrc
              }
          }
          preview {
            status
            image {
              originalSrc
            }
          }
        }
      }
    }`,
  });
5 Likes
2

Hi!

Did you find the way to get the file url? I’m exactly at the same point.

Best,
Mario

1 Like
3

Facing the same issue. Did you, by any chance, managed to find a solution for this?

4

Hi Bogdan,

No answer from Shopify and not a clue of how to do it.

Finally I did it my self uploading images to AWS S3, where that is not an issue.

Best,

Mario

5

I was able to get the file ID and url by following up the fileCreate mutation with this query, setting the $created_at variable from data in the fileCreate reply :

{
  files (first: 1, query:"created_at:'$created_at'") {
    edges {
      node {
        ... on MediaImage {
          image {
            id
            url
            altText
            height
            width
          }
        }
      }
    }
  }
}
7 Likes
6

…

1 Like
7

Coming in quite late on this context. Since I recently bumped in this issue, I’ll capture my findings. You can try to use the GraphQL query below, and replace $your-file-id with the id of the resource you got from fileCreate mutation.

{
  files (first: 1, query:"id:$your-file-id") {
    edges {
      node {
        ... on MediaImage {
          image {
            id
            url
            altText
            height
            width
          }
        }
      }
    }
  }
}
3 Likes
8

FileCreate mutation doesn’t return any id, or maybe I’m wrong, I don’t know

9

How can we get the id of the ressource from the fileCreate query ?

I do not get it when I try

files {
  fileStatus
  alt
  createdAt
  ... on GenericFile {
    id
  }
}

EDIT: I found it

files {
    fileStatus
    alt
    createdAt
    ... on GenericFile {
      id
    }
    ... on MediaImage {
      id
    }
    ... on Video {
      id
    }
   
3 Likes
10

Thanks for this, why Shopify don’t supply it on the upload is a mystery.

11

i got the same error. if you have any solution then tell me.