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

Root · Accepted Answer · 2018-11-04 05:01:17Z

2

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

edited Nov 4, 2018 at 5:01

answered Nov 4, 2018 at 3:17

Root

2,3611 gold badge13 silver badges14 bronze badges

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

2 Comments

Dulanga Heshan Over a year ago

text field are working fine problem is when i select the file to upload

Root Over a year ago

@DulangaHeshan sorry about the misunderstandings,I have changed my answer.

salah-1 · Accepted Answer · 2018-11-04 03:45:34Z

0

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

answered Nov 4, 2018 at 3:45

salah-1

1,40913 silver badges16 bronze badges

2 Comments

salah-1 Over a year ago

Post the complete React code including function calls and render method-I can’t see what you changed

Dulanga Heshan Over a year ago

sry i'm not understand dou you want to see reduxForm file

Collectives™ on Stack Overflow

changing an uncontrolled input of type file in React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related