Multiple issues in firefox but works properly in chrome with no single issue

Question

I am having multiple issues with firefox but not in chrome.

1) issue in TypeError: response.body is null.

2) while uploading for images i get TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

The code where issue is shown are

for number 1 issue (I have used superagent for this)

  search( query='Ganesh Chowk' ){
    let url = "/api/v1/rental/?place__startswith="+encodeURIComponent(query);
    Request.get(url).then((response) => {
    if (response) {
        this.setState({
            place:response.body.objects,
        });
    } else {
        this.setState({
            place: [],
        });
    }
});

for 2nd issue

  let image = [];
 class RenderPhotos extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            files: []
        };
    }

    onDrop(files) {
      console.log('Received files: ', files);
      this.setState({
          files: files
      });

    image = new FormData(files);
    $.each(files,function(i,file){
      image.append('image',file);
    });

    } 

Why this code is working on chrome and not in firefox? What should be changed for this code to work in all browser?

Answer 1

Regarding Error 2: If a parameter is passed to the FormData constructor it must be a HTML <Form> element which does not seem to be the case in your code. So simply drop the param:

image = new FormData();

Update:

Regarding error 1: As you found out yourself the request needs an accept header application/json. Due to differences of Chrome and Firefox default accept headers, the server seems to return a json payload for Chrome and not for Firefox. Anyway the explicit header resolves that issue.