Prisma1: Return image API URL instead of file API URL when applicable

Created on 17 Apr 2017 · 3Comments · Source: prisma/prisma1

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).

Source

sedubois

👍2

Most helpful comment

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.

lucfranken on 3 May 2017

👍4

All 3 comments

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.

lucfranken on 3 May 2017

👍4

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.