i am shopify app develop fresher my requirement is for file upload using a custom app.

I will share my code file upload using Remix. I have some issues with file upload. when I am debugging Google the Shopify file app is requirement 3 steps.

1. Uploaded
2. Processing
3. Ready

My code shows Only 1 step “uploaded” But I need the second and third steps for processing and ready. last week also debugging but I have no idea this. I will share my code and screenshot. so please let me know.

I will share my code for file upload for Shopify app-related.

export const action = async ({ request }: ActionFunctionArgs) => {
const { admin } = await authenticate.admin(request);

const requestBody = await request.text();

const formData = new URLSearchParams(requestBody);
const name = formData.get("filename");
const type = formData.get("filetype");
const size = formData.get("filesize");
const files = [
 {
  name: name,
  type: type,
  size: size,
 },
];
const prepareFiles = (files: { name: string | null; type: string | null; size: string | null; }[]) =>
files.map((file) => ({
    filename: file.name,
    mimeType: "text/json",
    resource: "FILE",
    httpMethod: "POST",
}));


const preparedFiles = prepareFiles(files);

const uploadFileResponse = await admin.graphql(
`#graphql
mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
  stagedUploadsCreate(input: $input) {
    __typename

    stagedTargets {
      resourceUrl
      url
      __typename
      parameters {
        name
        value
        __typename
      }
    }
    userErrors {
      field
      message
    }
  __typename
  }
  }
 `,
   { variables: { input: preparedFiles } },
 );

 const uplodeFileJson = await uploadFileResponse.json();

 const resourceurl = 
 uplodeFileJson.data.stagedUploadsCreate.stagedTargets[0].resourceUrl; 

  const fileCreateResponse = await admin.graphql(
    `#graphql
    mutation fileCreate($files: [FileCreateInput!]!) {
        fileCreate(files: $files ) {
            files {
                alt
                createdAt
                fileStatus
                id
                __typename 
                fileErrors {
                    code
                    details
                    message
                }
                
                preview {
                    image {
                    url
                    }
                    status
                    __typename
                }
              ... on GenericFile {
              id
              }
              ... on Video {
              id
              }
            }
            userErrors {
                code
                field
                message
            }
            __typename
            
        }
      }`,

    {
        variables: {
            files: {
                alt: "Image",
                contentType: "FILE",
                original source: resourceurl,
                
            },
        },
    },
   );

const fileCreateJson = await fileCreateResponse.json();

return ({
  stagedUpload: uplodeFileJson,  
    fileCreate: fileCreateJson,
    resourceurl: resourceurl
});
};