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

[baberuth22]

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

Is there a write files permission?

[Luke_K · Accepted solution]

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!

[baberuth22]

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

[Luke_K]

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 🙂 Hope that helps!

[lekhang25122]

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

[Dev-Waheed]

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

[Avi_Ben_Zaken]

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

[baberuth22]

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

[Qadeer2]

can you help me in reading files using graphQL