Files and Images New

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

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.

1
2
3
4
5
6
7
8
9
10
11
// 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);

The Stream CDN URL returned during the upload contains a signature that validates the access to the file it points to. Links can only be accessed with a signature, which also protects against enumeration attacks.

A single Stream CDN URL expires after 14 days, after which its signature will stop working and the link won't be valid anymore. You can check when a link will expire by comparing the current time with the Unix timestamp in the Expires parameter of the link's query:

If a link is expired, you can refresh it with a single call, which will return a new, fresh link:

1
const newLink = client.images.refreshLink(link);

Files and images can be deleted using their URL.

1
2
3
4
5
// 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);

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.

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.

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

1
2
3
4
5
// 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' });