multiple file input (upload)

Is there a way to get access to the raw file array i.e. let fileSelected = this.files[0]; from a file input

 <input type="file" id="simplefile" />

Or even is there a way to get access to event.currentTarget for an onChange event?

I tried using .observe for the on change but I can only get the filename as a value.

[foxhound87]

This setup is working using onChange tested on chrome:

SimpleFile.jsx

import React from 'react';
import { observer } from 'mobx-react';
import _ from 'lodash';

const onDrop = (field) => (e) => {
  const files = _.map(e.target.files); // workaround to get all files
  field.state.extra({ [field.name]: files }); // set files into extra state
  console.log('files', field.state.extra()); // get files from extra state
};

export default observer(({
  field, multiple = false,
}) => (
  <input
    multiple={multiple}
    {...field.bind({
      value: '',
      type: 'file',
      onChange: onDrop(field),
    })}
  />
));

component usage:

<SimpleFile field={form.$('myFile')} multiple />

form.state.extra() can be called everywhere to set or get additional custom form data. You can use this behavior in the meantime I implement a better solution.

[foxhound87]

Implemented:

• onDrop(e) Event Handler.
• onDrop Field Hook.
• file Field Prop.

Also some new example are added to the demo repo:

• Simple File Input
• DropZone