react-redux upload file errors

Question

I try to implement file uploading on react-redux using redux-form, but there are a warning and an exception in the console:

Warning: ConnectedField is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

bundle.js:37467 Uncaught DOMException: Failed to set the 'value' property on 
'HTMLInputElement': This input element accepts a filename, which may only be 
programmatically set to the empty string.
        at Object.updateWrapper (http://localhost:8080/dist/bundle.js:37467:20)
        at ReactDOMComponent.updateComponent (http://localhost:8080/dist/bundle.js:36891:23)
        at ReactDOMComponent.receiveComponent (http://localhost:8080/dist/bundle.js:36846:10)
        at Object.receiveComponent (http://localhost:8080/dist/bundle.js:6247:22)
        at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8080/dist/bundle.js:35859:23)
        at ReactCompositeComponentWrapper._performComponentUpdate (http://localhost:8080/dist/bundle.js:35829:10)
        at ReactCompositeComponentWrapper.updateComponent (http://localhost:8080/dist/bundle.js:35750:12)
        at ReactCompositeComponentWrapper.receiveComponent (http://localhost:8080/dist/bundle.js:35652:10)
        at Object.receiveComponent (http://localhost:8080/dist/bundle.js:6247:22)
        at ReactCompositeComponentWrapper._updateRenderedComponent (http://localhost:8080/dist/bundle.js:35859:23)

Here is a code of my component:

import React,{Component} from 'react';
import {Field, reduxForm} from 'redux-form';

class UploadFileForm extends Component {

  onFormSubmit(data) {
    console.log(data);
  };

  render() {
    return (
      <form role="form" onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
        <div className="form-group">
          {/*<input name="file" type="file" className="file file-loading" data-allowed-file-extensions='[".owl"]'/>*/}
          <Field name="owl-file" component="input" type="file" ref="owl-file-ref"/>
          <label className="choose-file-info"></label>
        </div>
        <button type="submit" className="btn btn-primary">Upload</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'upload'
})(UploadFileForm);

I understand the second issue (DOMException), but don't uderstand a warning. — svnvav
– svnvav, Commented May 18, 2017 at 6:46

Perspective · Accepted Answer · 2017-06-08 18:46:12Z

5

The following worked for me;

const UploadFile = ({ input: {value: omitValue, ...inputProps }, meta: omitMeta, ...props }) => (
  <input type='file' {...inputProps} {...props} />
);

Then I use it like so;

<Field component={UploadFile} name='file' accept='.jpg' />

The solution was found in: https://github.com/erikras/redux-form/issues/1989

answered Jun 8, 2017 at 18:46

Perspective

6325 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nano Over a year ago

What is exactly omitValue?

Collectives™ on Stack Overflow

react-redux upload file errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related