CODEWITHSUNDEEP
javascript
geoff swartz
geoff swartz

Reputation: 5965

cannot access element within function in javascript custom object

When I run this code it generates the appropriate file upload ui and adds the event listener to the upload button. However the first line in the upload function throws an error - Cannot read property 'style' of undefined - for this.missingFile. What am I doing wrong here?

function FileUploader(props) {
    var div = document.querySelector(props.element);

    var uid = generateGuid();

    var templateHtml = "<p><div id=\"dvMissingFile-" + uid + "\" class=\"missing-file\"> Please choose a file.</div><input type=\"file\" id=\"flUploadedFile-" + uid + "\" name=\"flUploadedFile-" + uid + "\"/></p><div class=\"dvProgressBar\" id=\"progress-" + uid + "\"><div></div></div>";
    div.innerHTML = templateHtml;

    this.uploadButton = document.querySelector(props.uploadButton);
    this.fileInput = document.querySelector("#flUploadedFile-" + uid);
    this.missingFile = document.querySelector("#dvMissingFile-" + uid);
    this.progress = document.querySelector("#progress-" + uid);
    this.url = props.postUrl;

    this.upload = function() {
        this.missingFile.style.display = "none";

        if (this.fileInput.files.length === 0) {
            this.missingFile.style.display = "";
        }
        else {
            var file = this.fileInput.files[0];
            var xhr = new XMLHttpRequest();
            var pbar = document.querySelector("#progress-" + uid + ">div");
            if (xhr.upload) {

                // do upload
            }
        }
    }

    this.uploadButton.addEventListener("click", this.upload);
}

Usage example

<div id="dvUploader"></div>
<button type="button" id="btnUpload" class="btn btn-primary">Upload</button>
<script>
var uploader = new FileUploader({
                    element: "#dvUploader",
                    uploadButton: "#btnUpload",
                    postUrl: "myposturl"
});
</script>

Upvotes: 1

Views: 45

Answers (1)

Artyom Shegeda
Artyom Shegeda

Reputation: 313

One small update to your code can help:

    this.upload = function() {
// ...
    }.bind(this);

Upvotes: 1

Related Questions