Xhr status of response is showing zero instead of 200

Question

I am posting a form of type file and I am handling that POST request in spring-boot controller by returning JSON data. I checked that request with postman its working fine, But when I am using onreadystatechange method in react it is giving xhr status =0

onSubmitForm(){
    console.log("entered");
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/images', true);
    //xhr.responseType = 'text';

    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

    var data = new FormData();
    var imageFile = document.querySelector('input[type="file"]').files[0];
    console.log( imageFile);

    data.append("imageFile", imageFile);


    xhr.onreadystatechange = function () {
        if(xhr.readyState === XMLHttpRequest.DONE ){
            alert(xhr.status);
            if(xhr.status === 200){
                alert('hi there');
                }
        }
    }
    xhr.send( data );

}

render() {
    return (
        <div>
            <form encType="multipart/form-data" action="">
                File to upload:
                    <input type="file" name="imageFile" accept="image/*" />
                    <input type="submit"  value="Upload" onClick={  this.onSubmitForm.bind(this) } />
            </form>
        </div>
    )
}

I am receiving the correct data in controller, But I am not getting JSON from POST request ??

controller

@PostMapping("/images")
public  @ResponseBody JSONModel addContent( @RequestParam("imageFile") MultipartFile file,  
        imageApp content ) {

    String encodedfile = null ;
    double fileSize = file.getSize();

    try {
            byte[] bytes=file.getBytes();
            System.out.println(fileSize/(1024*1024));
            encodedfile = Base64.getMimeEncoder().encodeToString(bytes);
    } catch (FileNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    content.setDate(LocalDateTime.now());

    content.setLocation(UUID.randomUUID().toString() );
    content.setId(UUID.randomUUID().toString() );
    content.setContent(encodedfile);
    return service.addContent(content);
    }

service

public @ResponseBody JSONModel addContent(imageApp content) {
    return new JSONModel(1, respository.save(content).getLocation());
}

Can you please check https://stackoverflow.com/questions/872206/http-status-code-0-what-does-this-mean-for-fetch-or-xmlhttprequest Is it hitting your controller? — Amit K Bist, Oct 10 '17 at 18:15
what are you returning from the controller? paste your controller code as well — Amit K Bist, Oct 10 '17 at 18:22
I am returning JSON of class type JSONModel (which has members id, content) — harish chava, Oct 10 '17 at 18:29

score 0 · Accepted Answer · answered Oct 14 '17 at 02:52

Make <input type="submit" to type="button", keeping type="submit" tells the browser that page/form has to be submitted and it causing conflicting behavior which we need to prevent. So either change the type="button" or you can prevent the default behavior by taking the event in your handler and calling e.preventDefault();

Xhr status of response is showing zero instead of 200

1 Answers1