Return image API URL instead of file API URL when applicable

[marktani]

Issue by sedubois Monday Apr 17, 2017 at 12:11 GMT Originally opened as https://github.com/graphcool/prisma/issues/173

---

Currently after uploading images to the File API, retrieving e.g. { allFiles { url } } will return a URL of the form https://files.graph.cool/XXX. However for images it might be more convenient to return the https://images.graph.cool/XXX version (so that the image size can be further manipulated by appending e.g /600x500 as documented).

[marktani]

Comment by lucfranken Wednesday May 03, 2017 at 10:34 GMT

---

Good point, we have a simple helper for that. We would not want to lose the url field but an additional imageUrl field would be a great addition.

We should not be doing this:

 _getPhotoUrl(url, width, height) {
    const imageSize = width + 'x' + height;
    return url.replace('https://files.graph.cool/', 'https://images.graph.cool/') + '/' + imageSize;
  }

The url should not be modified by clients. It should be supplied.

[marktani]

Comment by cyrus-za Thursday Aug 03, 2017 at 10:35 GMT

---

Going to copy paste my messages I sent on slack (before @marktani pointed me here).

https://www.graph.cool/docs/reference/file-handling/image-api-atiede8ata/

I just stumbled upon this. I've been using the file api out of the box for my images up until now, with the url property to display the images.

I now see that I can resize the images if I use this, but it's a manual process to now get the secret and link it to the image api url.

Are there any plans to change the url property to rather use this api in future for files that are images? Or if its not simple enough to calculate whether its a image or not, maybe just have an additional property called imageUrl?

What would also be amazing is if we could resize or crop upon save rather than storing a large image and then resizing it on the fly when downloading.

@nilan should I create a issue for this?

right now these are my 2 options to switch from file api to image api. Either get a secret or change url string.

<img src={`${IMAGE_API}/${image.secret}/x270`}/>
<img src={`${image.url.replace('files', 'images')}/x270`}/>

Both feel like a hack.