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 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 commented Nov 27, 2015

Indeed it should


This comment has been minimized.

Copy link

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.