Error with StagedUploadInput

Retired Boards Appdev Graphql Basics And Troubleshooting
,
1

When trying to upload a file via the files API, I get an error:

Error uploading file: Variable $input of type [StagedUploadInput!]! was provided invalid value

I am using the Remix Template from the Shopify cli (the recommended one).

I have checked the docs thoroughly, and it seems like there might have been some undocumented change or something.

I see no error with the input variable. I am able to make other GraphQL requests just fine; I only get an error with this particular mutation type (stagedUploadsCreate , which has the StagedUploadInput! type argument).

Here is the code:

const mutation = `
      mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
        stagedUploadsCreate(input: $input) {
          stagedTargets {
            parameters {
              name
              value
            }
            resourceUrl
            url
          }
        }
      }
    `;

  const variables = {
    input: [
      {
        filename: "3_soft.jpg",
        mimeType: "image/jpeg",
        resource: "IMAGE",
        httpMethod: "POST",
      },
    ],
  };

  console.log(variables);

  const response = await admin.graphql(mutation, variables);

The variables log correctly logs right before the error:

{                                                                                                                                                                                                                                                                                                                                             
   input: [                                                                                                                                                                                                                                                                                                                                    
     {                                                                                                                                                                                                                                                                                                                                         
       filename: '3_soft.jpg',                                                                                                                                                                                                                                                                                                                 
       mimeType: 'image/jpeg',                                                                                                                                                                                                                                                                                                                 
       resource: 'FILE',                                                                                                                                                                                                                                                                                                                       
       httpMethod: 'POST'                                                                                                                                                                                                                                                                                                                      
     }                                                                                                                                                                                                                                                                                                                                         
   ]
 }

How can I successfully complete the stagedUploadsCreate mutation?

2

Hi 11arshaan,

This does seem unusual - one thing I spotted was that your variables log has the resource field as ‘FILE’, but you’ve set the variables where the resource field is ‘IMAGE’ - so it’s possible this difference is related to the error you’re seeing. If you change the resource field to ‘FILE’ is the error still happening?

3

Yes, I originally had it as ‘FILE’ for audio/mp3 files and audio/wav files.
Then I tried with jpg and png files using the accurate ‘IMAGE’ value for
the file type field, the result was the same error. In the code I copied, I
must have forgot to change it back to ‘IMAGE’ after trying different
combos, but I can confirm that the results are the same regardless of file
type and actual file content.

4

Hey @11arshaan ,

Just taking a look here and testing with your exact mutation and variables it worked for me (in postman) so it doesn’t seem to be an issue with the mutation itself.

I would check to see if you can replicate this in any other environment like the GraphiQL explorer app, or in an API client. That can help narrow down the issue to the CLI or Remix template. If it works for you in other environments (as it did for me) then look over the remix documentation to see if there’s anything that you’ve missed in your setup:

We also have public repository where you can create an issue: https://github.com/Shopify/shopify-app-template-remix

Hope that helps with the next steps!

  • Kyle G.