file upload from reactjs not working. POST call for file upload from reactjs not working

Question

Following is my code for file upload.

<form encType="multipart/form-data" action="">
    <input type="file" name="fileName" defaultValue="fileName"></input>
    <input type="button" value="upload" onClick={this.handleClick.bind(this)}></input>
</form>


handleClick(){
            let deliveryId = this.props.params.deliveryId;
            var data = new FormData();
            var imagedata = document.querySelector('input[type="file"]').files[0];
            data.append("data", imagedata);
            console.log('Data', data);

            fetch(apiBaseUrl, {
                mode: 'no-cors',
                method: "POST",
                body: JSON.stringify({
                    'item_file': data,
                    'delivery_id': deliveryId,
                    'description': 'test description'
                })
            }).then(function (res) {
                if (res.ok) {
                    alert("Perfect! ");
                } else if (res.status == 401) {
                    alert("Oops! ");
                }
            }, function (e) {
                alert("Error submitting form!");
            });
        }

Though, I can see the file details in 'imagedata', 'data' is coming empty. I am not able to figure out why 'data' is empty. That's why the backend call is failing.

Following is the request payload going to the server after submit:

{item_file: {}, delivery_id: "eeb9422e-9805-48eb-a8be-ad2e27f3f643", description: "test description"}

Elumalai Kaliyaperumal · Accepted Answer · 2017-11-06 19:52:06Z

2

You can use FormData itself to achieve file upload with extra parameters like deliveryId. And you can't stringify the file.

 handleClick() {
    let deliveryId = this.props.params.deliveryId;
    var imagedata = document.querySelector('input[type="file"]').files[0];

    var data = new FormData();
    data.append("item_file", imagedata);
    data.append('delivery_id', deliveryId);
    data.append('description', 'test description');

    fetch(apiBaseUrl, {
        mode: 'no-cors',
        method: "POST",
        body: data
    }).then(function (res) {
        if (res.ok) {
            alert("Perfect! ");
        } else if (res.status == 401) {
            alert("Oops! ");
        }
    }, function (e) {
        alert("Error submitting form!");
    });
}

edited Nov 6, 2017 at 19:52

answered Nov 6, 2017 at 19:17

Elumalai Kaliyaperumal

1,5301 gold badge13 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

file upload from reactjs not working. POST call for file upload from reactjs not working

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