georgeOsdDev / react-fileupload-progress

React component of Input file and progress bar
http://georgeosddev.github.io/react-fileupload-progress
MIT License
103 stars 35 forks source link

How to use with text fields and other input controls? #28

Closed doppelgunner closed 6 years ago

doppelgunner commented 6 years ago

Example the upload field is not required and it still should submit the form, the problem is how to do that with the react-fileupload-progress. Im having problem calling the onSubmit of the FormRenderer if together with other input fields.

georgeOsdDev commented 6 years ago

Could you try like below. This form will contain myTextInput.

  customFormRenderer(onSubmit){
    return (
      <form id='customForm' style={{marginBottom: '15px'}}>
        <label style={styles.bslabel} htmlFor="exampleInputFile">File input</label>
        <input style={{display: 'block'}} type="file" name='file' id="exampleInputFile" />

        <input type="text" key='myTextInput' name='myTextInput'/>       

        <p style={styles.bsHelp}>This is custom form.</p>
        <button type="button" style={styles.bsButton} onClick={onSubmit}>Upload</button>
      </form>
    );
  }
adueck commented 6 years ago

When this form is submitted and the file is uploaded, where is the value for myTextInput available?

I can't find it and it seems that formGetter just returns and empty object in this part of the example.

  formGetter(){
    return new FormData(document.getElementById('customForm'));
  }