CODEWITHSUNDEEP
javascriptreact-reduxredux-formreact-redux-form
svnvav
svnvav

Reputation: 337

react-redux upload file errors

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);

Upvotes: 3

Views: 3933

Answers (1)

Perspective
Perspective

Reputation: 632

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

Upvotes: 5

Related Questions