Upload a picture from Embedded App (GraphQL, Rest, Zeit, Koa, React, Apollo)

[IRONMANROMEO]

I have used "Liquid" so far to change the product DB. With many difficulties I managed to create an application that generates previews and associates them with variants. All this from Liquid / Javascript / XMLHttpRequest. I had no problems with CORS because Liquid is on the same network as Shopify.

Now I'm creating an Embedded App via React / NextJs / Zeit / Apollo / GraphQL. Even here it was not easy to access the "metafields" via GraphQL / Admin, but I succeeded.

Now I have a problem: I have to upload the previews, but this time I have to do it from the "Embedded App". Here I have 2 roads:

- use GraphQL to load the image, but I don't find a "mutation" able to accept a binary file to load, but only "URL" or "signed url", which means that I have to upload the image elsewhere and then use the link to upload the image from here. Did I get it right?

- use REST, but here I have authentication problems because I am using shopify / koa-shopify-auth which handles everything on the server and makes Apollo GraphQL send authenticated requests to the server. If I go directly I get the CORS problem (obviously). In order to activate a control, I have to activate on the server side (in this case Zeit) an "endpoint" that acts as a "proxy" for the files I send in streaming. Did I get it right?

Either way, it's not a simple thing.

Can't provide a tutorial to help those trying to make applications for Shopify? I'm wasting my days and I'm rather tired of looking in the documentation for information that often doesn't explain how to do things.

I'm groping in the dark.

Request help.

Help!

Thank you.

Romeo

[Shayne]

This is the perfect time to use GraphQL, mutations are much cheaper on your call limit than REST POSTs.

Currently the GraphQL endpoint only accepts a url. We'll look into the existing usage of the REST endpoint, and may be able to add the Base64 option to GraphQL as well.

In the meantime, if you're looking for more tutorials on GraphQL and React, you can check out the tutorial here : https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react

[IRONMANROMEO]

My "embedded app is based on tutorial you suggested me. I didn't change a thing in this scenario, but NextJS, SSR, Koa, Zeit, serverless app all they come with a lot documentation to study and learn from scratch. It's very complex, GraphQL mutations too are sometimes weird (like params to add a new meta fields). 

I'll start a new post about this argument.

Thank you so much Shayne.

Romeo

[Shayne]

Hey Romeo,

After asking around a little bit, I found something that we launched this year at Unite that should help you : https://help.shopify.com/en/api/guides/media#product-media-types

You can upload media directly using the mutations listed in the doc, hopefully this helps!

[IRONMANROMEO]

Hi, 

thank you for your reply. 

• use GraphQL to load the image, but I don't find a "mutation" able to accept a binary file to load, but only "URL" or "signed url", which means that I have to upload the image elsewhere and then use the link to upload the image from here. Did I get it right?

Can you confirm no binary upload from graphQL at the moment?

Romeo

[IRONMANROMEO]

Thank you so much Shayne: I should have been able to do the trick following your link.

Now I should have upload from my Embedded App. 

Recap:

1) via GraphQL take "a ticket" for the POST (or PUT) upload;

2) make POST (or PUT) with binary data (no CORS issues) --- NOT VERIFIED

3) via GraphQL associate the temporary URL (via productMediaCreate mutation)

My image is in the product repository.

My secondary request is: put an image in FILES repository since I don't want it to be visible on user store.

Can you ask if there is a way to upload an image in "files" section? 

I'm searching for a "fileMediaCreate" mutation without success.

Thank's

Romeo

[meerajwadhwa]

Hi, I am following the steps mentioned. 

"2) make POST (or PUT) with binary data (no CORS issues) --- NOT VERIFIED"

Second steps failed i believe because embedded apps loaded inside Iframe (which has different url than store admin).

```

Access to fetch at 'https://shopify.s3.amazonaws.com/' from origin 'https://meerajwadhwa-a7f20b70.localhost.run' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

```

Anyone found a workaround to fix this issue? If anyone can share working example, will be helpful.