New Files API can read files, but can it write files?

Retired Boards Appdev Graphql Basics And Troubleshooting
1

I’m reading files using graphQL, but can I POST and write files as well?

Is there a write files permission?

2

Hey @baberuth22

Indeed, there is a write_files permission in the GraphQL Admin API - the documentation for the fileCreate fileDelete and fileUpdate mutations can be found here. Hope that helps - thanks!

3

@Luke_K Thanks! Can file create accept an attachment like assets create?

4

Hey @baberuth22

So for files create, you can add Media like Images for example, first you’d have to action the stageduploadscreate mutation(docs).

You’d receive a “resourceUrl” returned in response from the stagedUploadsCreateMutation.

Then you’d pass that**“resourceUrl”** into the originalSource input mentioned in the FileCreate docs(here) and the files should be uploaded to the Files page in the Shopify Admin. Ensure your app has write files permissions too :slightly_smiling_face: Hope that helps!

1 Like
5

I use Graphql API: stagedUploadsCreate, then I send request to Url: https://shopify.s3.amazonaws.com.
But response Location url: Access Denied
I then send a request to the Graphql API: fileCreate and the image is not uploaded successfully.
When I submit a public image url from google I don’t get the returned image url in: files → preview → image → originalSrc.

Here is my PHP code:

use PHPShopify\ShopifySDK;
        $file = $_FILES['upload'];
        $filename = $file['name'];
        $mimeType = $file['type'];
        $filesize = (string) $file['size'];
        $query = '
        mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
            stagedUploadsCreate(input: $input) {
                stagedTargets {
                    url
                    resourceUrl
                    parameters {
                        name
                        value
                    }
                }
                userErrors {
                    field
                    message
                }
            }
        }
        ';
        $variables = [
            'input' => [
                'fileSize' => $filesize,
                'filename' => $filename,
                'httpMethod' => 'POST',
                'mimeType' => $mimeType,
                'resource' => 'FILE'
                ]
        ];

        $config = [
            'ShopUrl' => 'onepiece-test.myshopify.com',
            'AccessToken' => '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',
        ];
        $shopify = ShopifySDK::config($config);

        $response = $shopify->GraphQL->post($query, null, null, $variables);

        $client = new \GuzzleHttp\Client();
        $url = $response['data']['stagedUploadsCreate']['stagedTargets'][0]['url'];
        $resourceUrl = $response['data']['stagedUploadsCreate']['stagedTargets'][0]['resourceUrl'];
        $parameters = $response['data']['stagedUploadsCreate']['stagedTargets'][0]['parameters'];

        $formData = [];
        foreach ($parameters as $parameter) {
            $formData[] = [
                'name' => $parameter['name'],
                'contents' => $parameter['value']
            ];
        }

        $formData[] = [
            'name' => 'file',
            'contents' => $file['tmp_name']
        ];

        try {
            $response = $client->request('POST', $url, [
                'headers' => [
                    'Accept'     => 'application/json',
                ],
                'multipart' => $formData
            ]);

            $xml = simplexml_load_string($response->getBody()->getContents());
            $convertJson = json_encode($xml);
            $convertArray = json_decode($convertJson, true);
            $imageUrl = urldecode($convertArray['Location']);
            // $imageUrl = $url . '/' . $imageKey['value'];
            // $imageUrl = 'https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg';
            // dd($imageUrl);
            $query = '
            mutation fileCreate($files: [FileCreateInput!]!) {
                fileCreate(files: $files) {
                    files {
                        alt
                        createdAt
                        fileErrors {
                            code
                            details
                            message
                        }
                        fileStatus
                        preview {
                            image {
                                altText
                                height
                                id
                                originalSrc
                                transformedSrc
                                width
                            }
                            status
                        }
                    }
                    userErrors {
                        code
                        field
                        message
                    }
                }
            }
            ';
            $variables = [
                'files' => [
                    [
                        'originalSource' => $resourceUrl,
                    ]
                ]
            ];
            $response = $shopify->GraphQL->post($query, null, null, $variables);
            dd($response);

        } catch (RequestException $e) {
            throw $e;
        }

Can you help me. Thanks

6

Hey,

Did anyone succeed to upload a JSON file through the new file API??

As I understood, there are three steps for uploading files via Shopify app using the DropZone.

The first part of creating the link is working fine with:

stagedUploadsCreate(
input:{
resource: FILE
filename: “test.json”
mimeType: “JSON”
httpMethod: POST
}

Second part of actually upload the file data:

const response = await fetch(url, {
method: ‘POST’,
body: formData,
})

Here I’m getting 201 response, is that ok?

  1. bodyUsed: false
  2. ok: true
  3. redirected: false
  4. status: 201
  5. statusText: “Created”
  6. type: “cors”
  7. url: “https://shopify.s3.amazonaws.com/”

Third part of adding the file into the shop setting→files page

fileCreate(files: [ { originalSource: “${resourceUrl}” }])
{
files {
alt
createdAt
fileErrors {
code
details
message
}
fileStatus
}

Here I’m getting 200 response with no errors and response.ok = true.
Still can’t see the file in the file page.
Any suggestion?
10x

7

I ended up uploading the image to a temporary directory on my own server first, then I use that file path as the URL.

8

can you help me in reading files using graphQL

1 Like
9

Hi brother Hope You Will be Fine,

Could You Find Any Solution To The Problem I am also Getting The Same issue.

Please Reply Me If You Can Thanks in Advance