Unable to upload a file using reactjs

Question

I'm new to the reactjs, my objective is to upload a file in the form (form which contacts no.of data i.e., name, email, phone number, etc..), I couldn't able to figure it out how to upload the file. i mean in which format do i need to upload the file. In Backend, we're using iform file similar to this link "File upload with ASP.Net Core 2.0 Web API and React.js" and swagger looks in this way:

Here is the code:


 <Form.Field>
                <label>File upload </label>
                <Button as="label" htmlFor="file" type="button" animated="fade">
                  <Button.Content visible>
                    <Icon name="file" />
                  </Button.Content>
                  <Button.Content hidden>Choose a File</Button.Content>
                </Button>
                <input
                  type="file"
                  id="file"
                  hidden
                  onChange={this.props.FileCheck}
                />
                <Form.Input
                  fluid
                  label="File Chosen: "
                  placeholder="Use the above bar to browse your file system"
                  readOnly
                  value={this.state.fileName}
                />
</Form.Field>

Here is the sample one i just created for upload file only "https://codesandbox.io/s/red-feather-77v26".

i'm getting in this way:

When i click on submit it is showing unsupported media file. can anyone help me in this?

Can you try removing headers: { "Content-Type": "application/json" } just don't assign anything because normally axios itself would recognize it.. And also for file upload the content type is multipart/form-data .. — Maniraj Murugan
– Maniraj Murugan, Commented Apr 18, 2020 at 10:59
Also you should send the formData as data to the request.. — Maniraj Murugan
– Maniraj Murugan, Commented Apr 18, 2020 at 11:01
@ManirajMurugan - How to send formData as request? moreover i have multiple input fields in Display.js like my mentioned in my query (eg: name, email, phonenumber, zipcode.....etc.,) Could you please help me in that? — Sanjana
– Sanjana, Commented Apr 18, 2020 at 15:09
You need to append everything (all input values) into formData which you already created .. Pass the appended data into request.. Please look into this link for better understanding codesandbox.io/s/kkpq42r413 .. As you are using local api call it is harder to give exact solution and hence I am using comment section.. In general, you need to pass the formData for uploading file to backend in that api call you also can append other input values.. Also as like I said in first comment you should remove/change the Content-Type .. — Maniraj Murugan
– Maniraj Murugan, Commented Apr 18, 2020 at 15:42

Khabir · Accepted Answer · 2020-04-18 17:11:40Z

0

I have rewrite FileUpload Component and Display Component as below. Please check it. It should work.

FileUpload Component

import React from "react";
import {Grid, Label, Button, Icon, Form} from "semantic-ui-react";

export default class FIleUpload extends React.Component {
    constructor(props) {
        super(props);
    };

    fileUpload = (e) => {
        this.props.setFile(e.target.files[0], e.target.files[0].name);
    };

    render() {
        return (
            <Grid>
                <Grid.Row>
                    <Label className="FileLab">File Upload</Label>
                    <Button as="label" htmlFor="file" type="button" animated="fade">
                        <Button.Content visible>Choose a File</Button.Content>
                        <Button.Content hidden>
                            <Icon name="file"/>
                        </Button.Content>
                    </Button>
                    <input type="file" id="file" hidden onChange={this.fileUpload}/>

                    <Form.Input
                        className="myfileName"
                        label="file name"
                        placeholder="Use the above bar to browse your file system"
                        readOnly
                        value={this.props.fileName}
                    />
                </Grid.Row>
            </Grid>
        );
    }
}

Display Component

import React from "react";
import {render} from "react-dom";
import {Form, Button} from "semantic-ui-react";
import axios from "axios";
import FIleUpload from "./FIleUpload";

export default class Display extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            file: null,
            fileName: ""
        };
    }

    setFile = (file, name) => {
        this.setState({
            file: file,
            fileName: name
        });
    };

    handleSubmit = event => {
        event.preventDefault();
        const formData = new FormData();
        formData.append("file", this.state.file);
        const data = {
            file: this.state.file,
            fileName: this.state.fileName
        };
        axios
            .post(`/api/FormDetails`, data, {
                headers: {"Content-Type": "multipart/form-data"}
            })
            .then(res => {
                console.log(res);
            });
    };

    render() {
        return (
            <div>
                <Form>
                    <FIleUpload setFile={this.setFile}/>
                    <br/>
                    <Form.Group align="center">
                        <Form.Field fluid control={Button} onClick={this.handleSubmit}>
                            {" "}
                            SUBMIT{" "}
                        </Form.Field>
                    </Form.Group>
                </Form>
            </div>
        );
    }
}

edited Apr 18, 2020 at 17:11

answered Apr 18, 2020 at 11:01

Khabir

5,8781 gold badge26 silver badges38 bronze badges

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

7 Comments

Sanjana Over a year ago

Still i'm getting unsupported media file (415 error)

Khabir Over a year ago

My bad, I have some typo in Display Component in the line headers: {"Content-Type": "multipart/form-data"}. Can you please try again

Sanjana Over a year ago

Still i'm getting the same error and i've updated in my query to show what is appearing in console while submitting the data

Khabir Over a year ago

When I run your code, I was getting error and that's why I updated your code and put it here as answer but your code in not updated in sandbox according to my answer. can you please update that. Moreover, what is the error that you are getting

Sanjana Over a year ago

i've updated my code in sandbox and i'm getting error as POST localhost:3000/api/FormDetails 415 (unsupported media type)

|

Collectives™ on Stack Overflow

Unable to upload a file using reactjs

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related