1

My code working fine for post the data but when i call success toast in onreadystatechange its not working , i don't know what i miss and also lwc track variable not working in this function.

senddatawithxa() {

    console.log(progressBar);
    var xhr = new XMLHttpRequest();
    var url = "https://zinoui.com/demo/progress-bar/upload.php";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    //xhr.setRequestHeader("Accept", "application/json");
    //xhr.setRequestHeader("token", "xxxxxxxxxxxxxxxxxxxxxxx");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            showToast('File Uploaded', this.file.name + '- Uploaded Successfully!!!', 'success');
            showLoadingSpinner = false;
            fileName = '';
            isTrue = false;
            var json = JSON.parse(xhr.responseText);
            console.log(json);

        }
    };
    var data = JSON.stringify({
        'image': encodeURIComponent(this.fileContents),
        'filename': this.fileName,
        'filetype': this.filetype,
        'patientId': this.recordId
    }
    );
    xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            var ratio = Math.floor((e.loaded / e.total) * 100) + '%';
            console.log(ratio);

        }
    }
    xhr.upload.onloadstart = function (e) {
        //progress = 0;
        console.log(e);
    }
    xhr.upload.onloadend = function (e) {
        //console.log(e);
        progress = 100;

    }
    xhr.send(data);
}
2
  • Why XMLHttpRequest in 2020? Why not fetch? May 4, 2020 at 11:24
  • i need progress bar for uploading image May 4, 2020 at 12:25

1 Answer 1

2

Nothing's working because you're using the wrong this. When you use a normal function, this changes depending on what's calling the function. In this case, the XMLHttpRequest object. As such, you lose access to anything not directly in its closure, including class variables. To fix this, either bind() to the class, or just use an "arrow function":

xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
        this.showToast('File Uploaded', this.file.name + '- Uploaded Successfully!!!', 'success');
        // ... omitted ... //
    }
};

...

xhr.upload.onprogress = e => {
  if(e.lengthComputable) {
    // ... omitted ... //
  }
};

Also, note that to access class-level variables and methods, you must use this.

xhr.upload.onloadstart = e => {
    this.progress = 0;
    console.log(e);
};
3
  • Thanks you so much. May 4, 2020 at 17:05
  • how can i know about this , is there any documentation May 4, 2020 at 17:15
  • @RijwanMohammed You might be looking for this (no pun intended, honest).
    – sfdcfox
    May 4, 2020 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.