Files and Images

Last Edit: Nov 13 2020

This API endpoint allows you to upload files and to process your images (eg. create image thumbnails).

Upload

Image and files have separate API endpoints (e.g. images can be resized, whereas files cannot). Once the upload is completed the URL of the file/image is returned and is ready for use.

The returned URL is served via CDN and can be requested by anyone. In order to avoid resource enumeration attacks, a unique signature is added. Manipulating the returned URL will likely result in HTTP errors.


// uploading an image from the browser (input is a <input type="file"> form field)
client.images.upload(input.files[0]);

// uploading an image from React Native (imageURI is the URI of the file)
client.images.upload(imageURI);

// uploading a file from the browser (input is a <input type="file"> form field)
client.files.upload(input.files[0]);

// uploading a file from React Native (fileURI is the URI of the file)
client.files.upload(fileURI);
                    
Upload size is limited to 10MB, any attempt to upload a larger file will return an HTTP 413 error. Please contact support if you need to upload larger files.

Delete

Files and images can be deleted using their URL.


// deleting an image using the url returned by the APIs
client.images.delete(imageURL);

// deleting a file using the url returned by the APIs
client.files.delete(fileURL);
                    
The file/image will still be available on the CDN until their cache is expired.

Image Processing

Once an image is uploaded, it is possible to create variants of the same in different sizes. The image to manipulate is selected using its URL. A new URL is then returned by the API.

Parameters

Name Type Description Default Optional
resize string the strategy used to adapt the image the new dimensions clip
crop string the cropping mode center
w number the final width of the processed image -
h number the final height of the processed image. -

Resize

The resize parameter determines how the new image dimensions are applied. The default value for this parameter is "clip".

Allowed values:

  • clip fits the image within the width and height boundaries without cropping or changing the aspect ratio.

  • crop applies the new dimensions and keeps the aspect ratio by cropping the parts of the image outside of the new boundaries. You can use the crop parameter to control how the cropping is done.

  • scale applies the new dimensions to the image. This method does not respect the aspect ratio and can create distorted images.

  • fill same as "clip" but the resulting image will have the exact dimensions requested and filled with a solid background color.

Crop

When resizing the image with a crop you can specify the cropping direction. By default, images are cropped started from their center. You combine directions in order to pick corners. Eg. "top,left" will use the top left corner as cropping position.

Allowed values:

  • top, bottom, left, right, center


// create a 50x50 thumbnail and crop from center
client.images.process(imageURL, { h:50, w:50, resize:'crop' });

// create a 50x50 thumbnail using clipping (keeps aspect ratio)
client.images.process(imageURL, { h:50, w:50, resize:'clip' });