Filestack Architecture Overview

Filestack is a flexible upload API hosted in the cloud. We fascilitate the uploading, transformation, and distribution of end-user content. File assets can be any file type: images, office documents, audio files, videos, pdfs, photoshop files, illustrator files and countless other file types are fully supported.

After assets have been uploaded into our system either through our file uploader or through our rest api, You can run them through our transformation engine for processing. For example, if you want to compress files or crop and resize them, you can.

Filestack Handles, URL based manipulation, and Content Delivery

For every file uploaded into Filestack, a unique handle is generated. The handle can be used in a number of ways. For example, when an image is uploaded it gets a unique handle assigned to it: https://cdn.filestackcontent.com/yWT8jxqvSmKnHGLpN8DG

You can use this handle reference to modify and convert the source file on the fly by using that handle in the appropriate URL: https://process.filestackapi.com/resize=width:200/yWT8jxqvSmKnHGLpN8DG

Filestack Content Delivery

Filestack API Architecture

Filestack Transformation Architecture

Filestack Blobs - What are they?

As you may have seen through the documentation, we refer to the content that our API calls return as "Blobs". These are standard JSON objects that contain information about the file. There are no methods attached directly to Blobs, and the properties of a Blob object are as follows:

Here is a sample Filestack blob object. We will discuss each field below.

[
   {
      "url":"https://cdn.filestackcontent.com/EsdzIZTNRdqkjzTHfhF8",
      "filename":"SNC00453.jpg",
      "mimetype":"image/jpeg",
      "size":209363,
      "cropped":{
         "originalImageSize":[
            2560,
            1920
         ],
         "cropArea":{
            "position":[
               334,
               672
            ],
            "size":[
               1120,
               1344
            ]
         }
      },
      "rotated":{
         "value":90,
         "direction":"CCW"
      },
      "converted":true,
      "id":1,
      "key":"rn2Gf4c4T26BBbk92b7F_SNC00453.jpg",
      "container":"mione",
      "client":"computer",
      "isWriteable":true
   }
]
        
Blob.url

The most critical part of the file, the url points to where the file is stored and acts as a sort of "file path". The url is what is used when making the underlying GET and POST calls to Filestack when you do a filepicker.read or filepicker.write call.

Blob.id

The Blob id is an integer. It can be useful to parse this when the picker is in multiple mode and the blob contains multiple files.

Blob.filename

The name of the file, if available.

Blob.mimetype

The mimetype of the file, if available.

Blob.size

The size of the file in bytes, if available. We will attach this directly to the Blob when we have it, otherwise you can always get the size by calling filepicker.stat

Blob.key

If the file was stored in one of the file stores you specified or configured (S3, Rackspace, Azure, etc.), this parameter will tell you where in the file store this file was put.

Blob.container

If the file was stored in one of the file stores you specified or configured (S3, Rackspace, Azure, etc.), this parameter will tell what container the file was place in.

Blob.client

The service the file was selected from. This could be "Computer", "Facebook", "Dropbox" or many other services.

Blob.isWriteable

This flag specifies whether the underlying file is writeable. In most cases this will be true, but if a user uploads a photo from facebook, for instance, the original file cannot be written to. In these cases, you should use the filepicker.exportFile call as a way to give the user the ability to save their content.

Blob.path

The path of the Blob indicates its position in the hierarchy of files uploaded when {folders:true} is set. In situations where the file was not uploaded as part of or along with a folder, path will not be defined.

CropUI specific blob elements:

Blob.converted

If the uploaded file was opened in the cropUI and the save button was clicked, this field will be present and equal to true. If the image was opened in the cropUI but skip was selected, or the image was not opened in the cropUI at all, then this field will not be present in the blob.

Blob.cropped

If the uploaded file was opened in the cropUI and the save button was clicked, this object will be present in the blob. It contains the original size of the image that was cropped and the details of the crop that was performed on the image.

Blob.cropped.originalImageSize

The original size of the image that went through the cropUI.

Blob.cropped.cropArea

This object contains the position of the crop area and the size of the crop area used for the crop.

Blob.cropped.cropArea.position

The position in the original image where the crop was performed.

Blob.cropped.cropArea.size

This size of the crop area used to perform the crop on the original image.