What is the best way to include a file upload?

[jcapogna]

Is there a best practice for including a file upload as part of a Formsy form?

The best idea I've come up with so far is to use FileReader to read the file contents into the input element's value. This is a bit annoying considering that a file upload is really simple with a basic HTML form.

[christianalfoni]

Hi @jcapogna,

That is an excellent question :-)

I have not tried this, though I believe there are some events you can use? I think onChange will trigger on a normal FileInput

var MyFileInput = React.createClass({
  onInputChange: function (event) {
    // Verify that file is correct via the event
    this.setValue(true);
    // Or if not valid
    this.setValue(false);
  },
  render: function () {
    return <input type="file" onChange={this.onInputChange}/>
  }
});

And then just validate with:

<MyFileInput validations="isTrue"/>

You think that would work?

[jcapogna]

That would work if I was submitting the HTML form directly. I am using the Formsy 'onSubmit' handler and then making an ajax call with the 'data' value passed to the onSubmit handler. The value you get from the file input is a fake path. For example, I selected "/home/jcapogna/foo.txt" and the value of the form element was "C:\fakepath\foo.txt"

[christianalfoni]

Hi again @jcapogna. I believe you should be able to just store the "files" property from the input, instead of its "value" property. Check out this article:

http://blog.teamtreehouse.com/uploading-files-ajax

[christianalfoni]

Closing this, hopefully it worked out :-)

[jcapogna]

Thanks @christianalfoni

This part of my project got pushed back and I still haven't gotten to it yet. Hopefully I'll be working in this again in the next month or so. I'll let you know if I run into any problems.

[christianalfoni]

Okay, cool, good luck! :-)

[colinmccann]

Can we re-open this plz? I have essentially the same issue and am also getting hung up on the C:/fakepath/xyz

Code snippet:

          <fieldset>
            {this.fields()}               // created elsewhere
            <FRC.Input ref="file" type="file" name="file" accept=".jpg,.gif,.jpeg,.png,.mp4,.m4v,.mov" />
          </fieldset>
          <input
            className = "btn btn-primary"
            type = "submit"
            defaultValue = "Submit"
            disabled = {!this.state.valid}
            {...this.props.submitButton}
          />

See attached. Note both the:
C:\fakepath\13112411_10206316238800722_777633898_o.jpg

and the possibly (but unlikely) related:
Warning: Failed propType: Invalid prop type of value file supplied to Input, expected one of ["color","date","datetime","datetime-local","email","hidden","month","number","password","range","search","tel","text","time","url","week"].

I'm not attaching the C:\fakepath - not even on a Windows machine. I would guess it buried somewhere in the formsy code?

[twisty]

@colinmccann In FRC, there is a File component. You should use that instead!

See release notes for 0.4.0 for a bit more detail.

The C:\fakepath is added by your browser.

[colinmccann]

Hot damn, that is perfect. Thanks!