changing an uncontrolled input of type file in React

Question

i created redux-form to upload form-data with file. but i stumped in how handle the file input, when i tried to select file from form browser console it throw this error

component is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled.......

fileupload.js

import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";
import Card from "@material-ui/core/Card";

class RegisterShop extends Component {
  state = {};

  renderField(field) {
    return (
      <div>
        <label>{field.label}</label>
        <input className="form-control" type={field.type} {...field.input} />
      </div>
    );
  }
  onSubmit(values) {
  let formData = new FormData();
    ////
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        <Card>
          <h1>Register Shop</h1>
          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <Field
              label="Shop Name"
              name="shopname"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Describe about your shop"
              name="description"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Email"
              name="email"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Contact No"
              name="mobileno"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Location"
              name="locatiion"
              type="text"
              component={this.renderField}
            />
            <Field
              label="Shop Logo"
              name="image"
              type="file"
              component="----------"  //I changed this many ways still get same error
            />
            <button type="submit" className="btn btn-primary">
              Login
            </button>
          </form>
          <br />
          <br />
        </Card>
      </div>
    );
  }
}

export default reduxForm({
  form: "registershop"
})(RegisterShop);

Answer 1

I think the problem is here.

<input className="form-control" type={field.type} {...field.input} />

First time, field.input is undefined, so fields is blank object , and input field will like this, which is "an uncontrolled input".

<input>undefined</input>

And after type something in field, the field.input will have value,so be controlled component. And maybe change to this:

  <Field
          label="Shop Logo"
          name="image"
          type="file"
          component={MyFile}
          dataAllowedFileExtensions="jpg png bmp"></Field>
 />

MyFile component:

class MyFile extends Component {
  render() {
    const { input,dataAllowedFileExtensions } = this.props
    const onInputChange = (e) => {
        e.preventDefault();
        const files = [...e.target.files];
        input.onChange(files);
    };
    return (
      <div>
        <input type="file"
               onChange={onInputChange}
               data-allowed-file-extensions={dataAllowedFileExtensions}               />
      </div>
    )
  }
}

Answer 2

Because it’s uncontrolled component, you probably want to leave it as:

<input type=“file”>

Then figure out how to process the input. From: React docs

In React, an input type="file" is always an uncontrolled component because its value can only be set by a user, and not programmatically. You should use the File API to interact with the files. The following example shows how to create a ref to the DOM node to access file(s) in a submit handler:

<input type="file" ref={this.fileInput} />