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.