Send Image file along with other data to Java backend using React.JS

Question

I want to send an uploaded image file along with data entered by the user to the backend which is implemented on JAVA.

`const payload = {
        id: null,
        name : Name,
        email : Email

        };
        //data.append("myjsonkey", );

        await fetch('http://localhost:8080/student/insertStudent', {
            method: 'POST',
            body: JSON.stringify(payload),
            headers : {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
            }
        })`

Using this implementation I was able to send data to backend using POST request. I now want to attach an image file in the payload to be recieved at the backend. The Code written for the image uploading is

`fileChangedHandler = (event) => {
    this.setState({selectedFile: event.target.files[0]})
    }

    uploadHandler = () => { 
    console.log(this.state.selectedFile)
    }
render() {
        return (
            <div>
                <input type="file" onChange={this.fileChangedHandler}/>
                <button onClick={this.uploadHandler}>Upload!</button>
            </div>
        );
    }`

Any help will be highly appreciated.

This is javascript. I want to send data from react.js to java backend as I mentioned clearly — ZubairHasan
– ZubairHasan, Commented Oct 27, 2018 at 13:20
You aren't showing us the backend code so there is no need to tag java. — SamHoque
– SamHoque, Commented Oct 27, 2018 at 13:22
To send an uploaded file from html form using javascript to java backend, you need to use multipart in the form tag, I have just said that in case if you sending data from a form. though you have not mentioned about form though. — Rashedul.Rubel
– Rashedul.Rubel, Commented Oct 27, 2018 at 15:05

Ahsan Sohail · Accepted Answer · 2018-10-29 15:55:29Z

3

You can send data using formData... here is the sample code for api request in react.

uploadHandler = () => { 
   const formData = new FormData();
   formData.append('file', this.state.selectedFile);
   axios.post('http://localhost:8080/student/image',
   formData
);
}

Java controller

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/student/")
public class StudentController {

@RequestMapping(value = "image" ,method = RequestMethod.POST, consumes = "multipart/form-data")
    @ResponseStatus(HttpStatus.CREATED)
    public void image(
            @RequestParam("file") MultipartFile file ){
            // CODE HERE

    }
}

answered Oct 29, 2018 at 15:55

Ahsan Sohail

6706 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Send Image file along with other data to Java backend using React.JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related