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

atiqueziad
New Member
1 0 2

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

 

Replies 0 (0)