Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Use with React.js (v0.14, ES2015, & JSX)
Filepicker lib must be loaded from script tag in HTML:
<script type="text/javascript" src="//"></script>
class FilepickerInput extends React.Component {
componentDidMount() {
const filepickerElement = this.refs.filepicker;
if (typeof filepicker !== 'undefined') {
// Single-page app integration:
filepickerElement.addEventListener('change', this.handleChangeFileUrl, false);
componentWillUnmount() {
this.refs.filepicker.removeEventListener('change', this.handleChangeFileUrl, false);
render() {
return <input
handleChangeFileUrl(e) {
console.log('Filepicker URL',;

This comment has been minimized.

Copy link

@spencer-brown spencer-brown commented Nov 2, 2015

Hello! Thanks for sharing this.

Should line 13 be filepickerElement.addEventListener('change',this.handleChangeFileUrl, false); ?


This comment has been minimized.

Copy link

@sptessier sptessier commented Nov 27, 2015

Indeed it should


This comment has been minimized.

Copy link

@styks1987 styks1987 commented Feb 4, 2016

You can also use
var filepicker = require('filepicker-js');
for something like webpack

Also, the event passed back has lots of good information.

    fpfile: Object
        client: "computer"
        filename: "img.jpg"
        id: 1
        isWriteable: true
        mimetype: "image/jpeg"
        size: 31322
        url: ""
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.