Solved

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

atiqueziad
Visitor
1 0 5

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
            }
          }
        }
      }
    }`,
  });

 

Accepted Solution (1)
dataggo
Shopify Partner
3 1 3

This is an accepted solution.

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
}
 

 

View solution in original post

Replies 9 (9)

mariobarreiro
Visitor
2 0 1

Hi! 

 

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

 

Best,
Mario

Bogdan_Hiriscau
Shopify Partner
3 0 0

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

mariobarreiro
Visitor
2 0 1

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

rgutzmer
Tourist
4 0 8

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
          }
        }
      }
    }
  }
}
prabhakark
Shopify Partner
1 0 1

...........

NSEImports
Excursionist
33 0 10

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

Doing many things all day everyday

thomashs
Shopify Staff
1 0 2

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
          }
        }
      }
    }
  }
}

 

To learn more visit the Shopify Help Center or the Community Blog.

twen7y0ne
Shopify Partner
4 0 0

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

dataggo
Shopify Partner
3 1 3

This is an accepted solution.

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
}