Recipes - Pick & Crop Profile Pictures with the Filestack v2 library

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.

Profile Picker Sample Code

Pick with client-side resize and manual user crop to get exact image dimensions
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(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()); } );
Example Image Will Be Shown Here

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.

Automatically Resize and Crop Image sample code

Pick with nested convert function to automatically resize, crop and align to faces
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, { policy: 'eyJleHBpcnkiOjE2ODgxMzkwNTJ9', signature: '5f66059fcacd65298ea55f66bf005f73688534632f20e77c5b1f0ac69d1c0286' }, function() { console.log("Removed Original File"); } ); }, function(FPError) { console.log(FPError.toString()); } ); }, function(FPError) { console.log(FPError.toString()); } );
Example Image Will Be Shown Here

Recipes - Generate Zips

Pick files, add them to a zip archive, and then Save the zip file to your computer or cloud drives.

By combining our javascript API with the functions of our processing engine, we can achieve interesting functionality. In this example we first pick one or more files. We pass the returned file handles into the zip processing engine task in order to add all of the picked files into a zip archive. Finally we pass that processing engine URL into the exportFile method so that the user can save the newly created zip file into a cloud drive or save it to their local machine.

Generate and export Zip from picked files

Pick multiple files and then add Filestack handles to array. Build processing engine zip url and feed it to exportFile for download
var baseZipAddr = "" filepicker.pickMultiple({ maxFiles: 3 }, function(Blobs) { var addrToCall = baseZipAddr + parseZipUrlList(Blobs) filepicker.exportFile(addrToCall, {suggestedFilename: ''}, function(result) { console.log(JSON.stringify(result)); }) } ); var parseZipUrlList = function(Blobs) { var result = [], idx) { var handle = itm.url.substr(itm.url.lastIndexOf('/') + 1) result.push(handle) }) var stringRes = "[" stringRes += result.join(",") return stringRes += "]" }