reactjs formik file upload

Question

I want to upload images in reactjs I am using Formik following https://codesandbox.io/s/lkkjpr5r7?file=/index.js:1808-1812

my code is:

               <Field
                className="attribute_input"
                name={this.props.fieldname}
                type="file"
                placeholder={
                    this.props.title
                }
                onChange={this.handleChange}
                   
                />

and handlechange has the folloing implementations:

handleChange(event) {
        const reader = new FileReader();
        reader.onload = () => {
            if (reader.readyState === 2) {
                this.setState({file: reader.result})
            }
        } 
        reader.readAsDataURL(event.target.files[0]);
        console.log(this.props.fieldname);
        this.props.sfv("image1", event.currentTarget.files[0]);
    }

Facing error:

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Hassan Ali Shahzad · Accepted Answer · 2021-03-15 16:32:44Z

1

The issue was <Field tag. Formik did not provide native file tag so we need to use <input tag instead of its basic field tag. In demo they are also using this but I missed this thing. Tag should be as following:

        <input
        className="attribute_input"
        name={this.props.fieldname}
        type="file"
        onChange={this.handleChange}
        />

answered Mar 15, 2021 at 16:32

Hassan Ali Shahzad

2,7521 gold badge32 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

reactjs formik file upload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related