I want to upload an image to S3, but I need it to be converted first. How can I use Filestack to achieve this?

If you only need the converted file, you can try this workflow:
  1. Use the pick method to get the original image
  2. Use the convert or transform method to transform the image (in v3 you will need to store the url generated by transform).
  3. Remove the original image
Here is what the code for this might look like using the v3 library:
Pick with nested conversion function and remove for cleanup of original file
var client = filestack.init("AJxHNUUcQHG6ZC0aksrb1z", { policy: "eyJleHBpcnkiOjE2ODgxMzkwNTIsImNhbGwiOlsic3RvcmUiLCJyZW1vdmUiXX0=", signature: "d42db977580f14653f98b19d41a2c5cc3dcc7cd6db6f0de4cd85db3ee8babe3a" }) var log = function(result) { console.log(JSON.stringify(result)) } client.pick({ accept: 'image/*' }).then((result) => { var storedurl = result.filesUploaded[0].url console.log(storedurl) var handle = storedurl.substr(storedurl.lastIndexOf("/") + 1) console.log(handle) var transformedUrl = client.transform(handle, { resize: { width: 200, height: 200 } }); console.log(JSON.stringify(transformedUrl)) console.log("storing converted image") client.storeURL(transformedUrl).then(log) console.log('removing original file') client.remove(handle) console.log('file removed successfully: ' + storedurl) })

You could also use the v3 picker and Filestack's processing engine urls to convert and save files:

Pick with nested conversion function and remove for cleanup of original file
var client = filestack.init("AJxHNUUcQHG6ZC0aksrb1z", { policy: "eyJleHBpcnkiOjE2ODgxMzkwNTIsImNhbGwiOlsic3RvcmUiLCJyZW1vdmUiXX0=", signature: "d42db977580f14653f98b19d41a2c5cc3dcc7cd6db6f0de4cd85db3ee8babe3a" }); var log = function(result) { console.log(JSON.stringify(result)) } client.pick({ onFileUploadFinished: function(file) { client.storeURL('https://process.filestackapi.com/resize=height:200,width:200/'+ file.handle).then(log) console.log('removing original file') client.remove(file.handle) console.log('file removed successfully: '+ file.url) } });
Here is what the code for this might look like using the v2 library:
Pick with nested conversion function and remove for cleanup of original file
filepicker.pick({ mimetypes: ['image/*'], services: ["COMPUTER","GOOGLE_DRIVE","FACEBOOK"] }, function(pickedBlob) { // convert a file filepicker.convert( pickedBlob, // conversion options { width: 200, height: 200 }, // store options { location: 'S3' }, function(convertedBlob) { // Converted file url console.log("Converted file url: ", convertedBlob.url); // File is stored under your S3 console.log("File is stored at the following key in S3: ", convertedBlob.key); result.src = convertedBlob.url; // If you no longer need the original file - remove it filepicker.remove( pickedBlob, { policy: 'eyJleHBpcnkiOjE2ODgxMzkwNTJ9', signature: '5f66059fcacd65298ea55f66bf005f73688534632f20e77c5b1f0ac69d1c0286' }, function() { console.log("Removed"); } ); }, function(FPError) { console.log(FPError.toString()); } ); }, function(FPError) { console.log(FPError.toString()); } );

Another alternative (if the source image has a URL) would be to use our REST Transformation API to convert the image and then store the result in one action.

For example:

Store CURL Request with External URL
>>> curl -X POST -g "https://process.filestackapi.com/AuSv4FudVRheqTxmY0NDgz/store=container:filestack-web-demo,location:S3,region:us-east-1,path:\"my/custom/path/\",filename:custom_flower_crop.jpg/crop=dim:[301,269,1226,1100]/monochrome/https://d1wtqaffaaj63z.cloudfront.net/images/P5305990_resized.jpg"

The response you receive will be like the standard JSON blob Filestack returns after using the filepicker.store() method.

returned JSON blob:

{"container":"filestack-web-demo","filename":"custom_flower_crop.jpg","height":1100,"key":"my/custom/path/zRlaKRWwQAmaMSGo3nfR_custom_flower_crop.jpg",
"size":215693,"type":"image/jpeg","url":"https://cdn.filestackcontent.com/lv3P2Q4QN2aluHLGhgAV","width":1226}
        

Stored, cropped and desaturated image:

https://cdn.filestackcontent.com/lv3P2Q4QN2aluHLGhgAV
image transformed with the crop and monochrome tasks and stored as a new image