Getting Started

Filestack Architecture

File Upload

File Export (Save To)

Responsive Images

Image Transformations

Document Transformations

Video Transcoding

Audio Transcoding





Filestack Viewer


Supported Cloud Drives

Filestack Recipes

Filestack Integrations

Filestack SDKs

Register for an API key

Pick & Crop Profile Pictures with Filestack

Here is an example of how the Javascript API Pick function can be used to create an easy profile picture selector. Using the picker option parameters, we limit the files that can be picked to images, and because we are using the COMPUTER service to pick local files, we are able to use the client side resizing parameter imageDim to automatically resize the selected images to 450x450 pixels. Finally we add in the cropDim, cropForce, and cropRatio parameters enabled by the CONVERT service in order to make sure that the resulting image is 400x400.

Sample Code
filepicker.pick( { services: ['COMPUTER','CONVERT'], conversions: ['crop', 'rotate', 'filter'], mimetype: 'image/*', container: 'modal', imageDim: [450,450], cropDim: [400,400], cropRatio: [1/1], cropForce: true }, function(Blob){ console.log(replaceHtmlChars(JSON.stringify(Blob))); var img = document.createElement("img"); img.src = Blob.url; var tag = document.getElementById("crop_profile_results"); tag.innerHTML = ''; tag.appendChild(img); }, function(FPError){ console.log(FPError.toString()); } );


Run code example

Here is a widget version using the same settings:

<input type="filepicker" name="myName" data-fp-mimetype="image/*" data-fp-container="modal" data-fp-services="COMPUTER,CONVERT" data-fp-image-dim="450,450" data-fp-crop-dim="400,400" data-fp-crop-force="true" data-fp-crop-ratio="1/1"/>

Face Detect and Auto-Crop Javascript API Version:

Here is a Javascript API version that uses Filestack's Face Detection feature to crop and align the image while at the same time resizing it.

Sample Code
filepicker.pick( { services: ['COMPUTER','FACEBOOK','INSTAGRAM','BOX','DROPBOX','CLOUDDRIVE','GOOGLE_DRIVE', 'FLICKR','INSTAGRAM','SKYDRIVE','IMAGE_SEARCH','URL','WEBCAM','PICASA'], container: 'modal', mimetype: 'image/*', }, function(pickedBlob){ console.log("Conversion in progress...") filepicker.convert( pickedBlob, { width: 400, height: 400, fit: 'crop', align: 'faces' }, { location: 'S3' }, function(convertedBlob){ console.log("Converted file url: ", convertedBlob.url); console.log("File is stored under your S3: ", convertedBlob.key); var img2 = document.createElement("img"); img2.src = convertedBlob.url; var tag = document.getElementById("face_profile_results"); tag.innerHTML = ''; tag.appendChild(img2); filepicker.remove( pickedBlob, function(){ console.log("Removed"); } ); }, function(FPError){ console.log(FPError.toString()); } ); }, function(FPError){ console.log(FPError.toString()); } );


Run code example