Guides

File Picker Web Widget

File Picker is a web widget for your users to upload files from their computer or pick files from their Cloud accounts and send it to your application.

Get started with File Picker

Start by including filespin.min.js just before the closing body tag in your HTML.

<script type="text/javascript"
src="<<JS_HOST>>/embed/dist/filespin.min.js"></script>

Then, initialize Picker for use with the UPLOAD_KEY associated with the FileSpin account.

📘

UPLOAD_KEY can be found in FileSpin Account Dashboard.
FileSpin.initPicker({
	uploadKey: "UPLOAD_KEY"
});

Example HTML

Here is a complete example that shows how to setup an "Upload Files"
button on a web page

<body>
<!-- a button for user to start file uploads-->
<button id="upload">Upload Files </button>

<!-- Insert this just before the closing body tag -->
<script type="text/javascript"
src="<<JS_HOST>>/embed/dist/filespin.min.js"></script>

<script>
  //initialize and open File Picker on button press
  document.getElementById('upload').addEventListener('click', function() {
    FileSpin.initPicker({
      uploadKey: "UPLOAD_KEY"
    });
  });
</script>
</body>

📘

Please visit the Developer Playground to try out and learn more about FileSpin File Picker

Picker Limitations

  • Cloud Uploads is limited by Cloud provider's API limitations
  • Picker does not support uploading entire cloud folders except for Dropbox
  • Dropbox uploads require additional setup (see Dropbox Support below)
  • Picker may not display more than 500 files (approx.) in a cloud folder
  • The order in which Cloud files are listed in Picker is not guaranteed to be by a file attribute (such as creation date)