Guides

JavaScript API

Picker provides a rich set of APIs so you can control how the Picker works to suit your web application needs.

initPicker API

This API is the starting point for Picker. Use this to initialize the Picker. It uses sensible default options which can be overridden.

//Initialize the Picker. Replace UPLOAD_KEY with the correct key

FileSpin.initPicker({
  uploadKey: "UPLOAD_KEY",
});

📘

If Picker is already initialized, calling initPicker() again will re-initialize it with the new parameters.

initPicker API with callback on ready event

FileSpin.initPicker(settings, function() {}) API can be used to safely take actions only when the Picker is ready. You can pass a callback function as the second argument which will be called when the Picker is ready.

//Initialize the Picker with `display` set to `false`
//When Picker is ready, display an alert using the callback function.

FileSpin.initPicker(
  {
    uploadKey: "UPLOAD_KEY",
    display: false,
  },
  function () {
    //this function is called when picker is initialized and ready
    alert("Picker ready!");
    FileSpin.showPicker();
  }
);

showPicker API

Use this API to programmatically show the File Picker dialog. Using this in conjunction with hidePicker() API and display parameter ofinitPicker() API, you can realize advanced user interactions.

//Show Picker API
FileSpin.showPicker();

hidePicker API

Use this API to programmatically hide the File Picker dialog.

//Hide Picker API
FileSpin.hidePicker();

resetPicker API

If you need to return the user to file selection after an upload, use this API. Reset will not alter the Picker's initialization state. It is purely a UI reset.

//Reset Picker API
FileSpin.resetPicker();

minimizePicker API

Use this API to programmatically minimize Picker modal and place it at bottom-right of user window.

//Minimize Picker Modal
FileSpin.minimizePicker();

maximizePicker API

Use this API to programmatically maximize a minimized Picker modal.

//Maximize Picker Modal
FileSpin.maximizePicker();

Delete API to delete uploaded files

Use this API to delete uploaded files in one upload session.

This API takes three parameters:-

  1. Upload ID, a unique ID that is returned when you open the Upload dialog with FileSpin.initPicker() API
  2. A list of Asset IDs - note that Asset ID is returned in the complete upload event
  3. A callback function as a third parameter to handle API call success or error

📘

Note that the uploadID will expire an hour after the upload completes. Note that deleted files will remain in the account in deleted state until they are purged.

Example code to delete a file that was uploaded

//Initialize Picker and get an uploadID
var uploadID = FileSpin.initPicker({
  uploadKey: "UPLOAD_KEY",
});

//setup Asset IDs list payload by listening to 'complete' event
//note that we are attempting to delete all the uploaded files here
// normally, this will not be the case
var file_ids;
FileSpin.on("complete", function (data) {
  file_ids = data.files.map(function (item) {
    return item.id;
  });
});

//trigger delete with a delete button click and call the 'delete' API
document.getElementById("delete-button").onclick = function (e) {
  FileSpin.delete(uploadID, file_ids, function (err, response) {
    if (err) {
      // delete failed
      // err will be "UPDATE_UNAUTHORIZED" or "UPDATE_FAILED"
    } else {
      // delete succeeded
    }
  });
  return false;
};