CODEWITHSUNDEEP
javascriptreactjsaxiosfetch
Asif Biswas
Asif Biswas

Reputation: 155

Send object and list of image to server in Reactjs

I'm using Reactjs in frontend.

I've set the profilePicture to state with this code

    handleImageChange = (event) => {
        event.preventDefault();
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onloadend = function (e) {
            this.setState({
                profilePicture: e.target.result //don't know how it is working 
            });
        }.bind(this);
    }

and I can preview the image file:

<img src={this.state.profilePicture} alt="img"/>

I want to send these data to server:

data = {
    'profilePicture': anImageFile,//this.state.profilePicture
    'photos': [anotherImage, anotherImage2, anotherImage3],
    'personal_info': {
        'name': 'User Name',
        'anyList': [1,2,3]
    }
}

Can I do it using fetch?

Upvotes: 1

Views: 327

Answers (1)

MD NAWAZ SHORIF
MD NAWAZ SHORIF

Reputation: 11

You can simply do like this:

handleImageChange = (event) => {
        this.setState({profilePicture: event.target.files[0]});
    }

Render Func

<img src={URL.createObjectURL(this.state.profilePicture)} alt="img"/>

And send data object as it is

Upvotes: 1

Related Questions