{"id":10889,"library":"filepicker-js","title":"Filepicker.js Client Library","description":"The `filepicker-js` package is the JavaScript client library for the original Filepicker.io service, which was acquired and rebranded as Filestack in 2015. The library's latest version, 2.4.18, was published over 10 years ago, indicating it is no longer actively maintained under this name. Modern development and new features are now exclusively available through the `filestack-js` SDK. This library primarily provides methods for file picking, storing, reading, writing, and basic image transformations, facilitating direct integration of file upload capabilities from various sources into web applications. It supports traditional browser script tag inclusion, exposing `window.filepicker`, and CommonJS `require()` for compatibility with older bundlers like Browserify. Its primary differentiator was simplifying file ingestion from diverse sources into web applications.","status":"deprecated","version":"2.4.18","language":"javascript","source_language":"en","source_url":"https://github.com/filepicker/filepicker-js","tags":["javascript","filepicker","file","upload","processing","store","widget"],"install":[{"cmd":"npm install filepicker-js","lang":"bash","label":"npm"},{"cmd":"yarn add filepicker-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add filepicker-js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily exposes 'filepicker' as a global object when loaded via a script tag. It does not provide ES Module exports. This global object contains all public methods.","wrong":"import filepicker from 'filepicker-js';","symbol":"filepicker","correct":"\n\n"},{"note":"For environments using CommonJS (e.g., Node.js or older bundlers like Browserify), the library can be imported using 'require()'. It does not support ES Module `import` syntax.","wrong":"import * as filepicker from 'filepicker-js';","symbol":"filepicker","correct":"const filepicker = require('filepicker-js');"},{"note":"The `pick` method, along with others like `setKey`, `pickMultiple`, `store`, etc., are accessed directly from the `filepicker` object, whether it's the global `window.filepicker` or the CommonJS import.","wrong":"filepicker.pick(...); // Without explicit window. or require()","symbol":"pick","correct":"window.filepicker.pick(...); // After script tag load\n// OR\nconst filepicker = require('filepicker-js'); filepicker.pick(...); // With CommonJS"}],"quickstart":{"code":"\n\n Filepicker.js Quickstart\n\n\n

Upload a File with Filepicker.js

\n \n\n \n \n\n","lang":"javascript","description":"This quickstart demonstrates how to integrate `filepicker-js` into an HTML page, set the API key, and initiate a file selection and upload process using the `pick` method, displaying the uploaded file's URL."},"warnings":[{"fix":"Migrate your integration to the `filestack-js` library (available via `npm install filestack-js`) and update your API key and usage patterns according to Filestack's current documentation.","message":"The `filepicker-js` package is deprecated. The underlying service, Filepicker.io, was rebranded to Filestack in 2015. Active development, maintenance, and new features are now exclusively available through the `filestack-js` SDK. Users should plan to migrate to `filestack-js` for continued support and access to modern capabilities.","severity":"breaking","affected_versions":">=2.x"},{"fix":"When using in modern environments, ensure proper bundling (e.g., Webpack or Rollup with CJS plugins) or consider using `filestack-js` which offers better ES Module support. If using `` tag is correctly placed in your HTML, preferably in the `` or before your application code, and that there are no network issues preventing its load. For non-blocking loading, use the provided asynchronous script snippet.","cause":"The `filepicker.js` script was not loaded successfully via a `