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