Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I'm making this web application, that needs some very simple javascript/HTML5 related features integrated (hereby an upload feature). However, I'm not sure about whether I've overdone it, as it's the first time I'm writing javascript without just throwing it all into the same file, with no namespace.

For example I'm not sure whether it's worth it to create "alias" for functions, in order to prevent typing mistakes (ex. FileInputs: $("#fileInputs")), or if it's just plain useless.

The code:

App.js

var NORTH = {
    App: {
        Utilities: {},
        Tools: {]
    },
    Views: {}
};

Uploads.js

NORTH.Views.Uploads = {
        Index: {
            Progress: {
                totalBytes: 0,
                percentComplete: 0,
                bytesUploaded: 0,
                prevBytesUploaded: 0
            },

            FileInputs: $("#fileInputs"),
            FileToUploadInput: $("#fileFake"),
            UploadButton: $("#upload"),

            FileInfo: $("#fileInfo"),
            FileSize: $("#fileSize"),
            PasswordInput: $("#password"),

            UploadProgress: $("#uploadProgress"),
            TransferRate: $("#transferRate"),
            TimeRemaining: $("#timeRemaining"),

            UploadStatus: $("#uploadStatus"),

            DownloadInfo: $("#downloadInfo"),
            DownloadLink: $("#downloadLink"),
            DdownloadPasswordWrapper: $("#downloadPasswordWrapper"),
            DownloadPassword: $("#downloadPassword"),

            loadEvents: function () {
                var _this = this;

                $("#fileFake").bind("click", function () {
                    $("#file").trigger("click");
                });

                $("#file").bind("change", function () {
                    var file = this.files[0];

                    _this.DownloadInfo.hide();

                    _this.FileInfo.hide();

                    _this.FileSize.html(file.size);
                    _this.PasswordInput.val("");

                    _this.FileInfo.show();
                });

                $("#upload").bind("click", function () {
                    _this.FileInfo.hide();

                    _this.FileToUploadInput
                        .attr("disabled", true);

                    _this.UploadButton
                        .removeClass("enabled")
                        .addClass("disabled")
                        .attr("disabled", true);

                    _this.UploadProgress.show();
                    _this.upload(_this.PasswordInput.val());
                });
            },

            init: function() {
                this.loadEvents();
            },

            enableAndResetFileInputs: function () {
                var defaultValue = this.FileToUploadInput.data("defaultValue");

                this.FileToUploadInput.val(defaultValue);
                this.FileToUploadInput.attr("disabled", false);

                this.UploadButton
                    .removeClass("disabled")
                    .addClass("enabled")
                    .attr("disabled", false);
            },

            upload: function (password) {
                var xhr = new XMLHttpRequest();

                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.addEventListener("error", uploadFailed, false);
                xhr.addEventListener("abort", uploadCanceled, false);

                xhr.open("POST", window.location.origin + "/?pwd=" + password);
                xhr.send(formData);
            },

            uploadProgress: function (evt) {
                if (evt.lengthComputable) {
                    this.percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    this.bytesUploaded = evt.loaded;
                    this.totalBytes = evt.total;
                }
            },

            uploadComplete: function (evt) {
                this.UploadProgress.hide();
                this.enableAndResetFileInputs();

                if (evt.target.status != 200) {
                    var error  = this.UploadButton.data("httpCodeError");
                    this.UploadStatus(error);

                    return false;
                }

                var json = jQuery.parseJSON(evt.target.responseText);

                if (json.ErrorCode != null) {
                    var error = json.ErrorCode == 1 ? "fileTooBigError" : "fileTooBigLimitError";
                    this.UploadStatus.html(error);

                    return false;
                }

                var path = window.location.origin + "/files" + json.Directory;

                this.DownloadLink.val(path);

                if (json.Password.length != 0) {
                    this.DownloadPassword.val(json.Password);
                    this.DownloadPasswordWrapper.show();
                }

                var success = this.UploadButton.data("success");
                this.UploadStatus.html(success);

                // TODO: Call GetUsage for refresh
            },

            uploadFailed: function (evt) {
                this.enableAndResetFileInputs();

                if (evt.target.responseText != "") {
                    this.UploadStatus.html(evt.target.responseText);
                    return false;
                }

                var error = this.UploadButton.data("failed");
                alert(error);
            },

            uploadCanceled: function (evt) {
                this.enableAndResetFileInputs();

                var message = this.UploadButton.data("canceled");
                alert(message);
            },

            updateProgress: function () {
                var uploaded = this.Progress.bytesUploaded;
                var diff = uploaded - this.Progress.prevBytesUploaded;

                if (diff == 0)
                    return;

                prevBytesUploaded = uploaded;
                diff = diff * 2;

                var bytesRemaining = this.Progress.totalBytes - prevBytesUploaded;
                var secondsRemaining = bytesRemaining / diff;

                var time = NORTH.App.Utilities.secondsToTime(Math.round(secondsRemaining));
                var speed = (Math.round(diff * 100 / (1024 * 1024)) / 100).toString() + ' MB/s';

                this.TransferRate.html(speed);
                this.TimeRemaining.html(timeH + ":" + timeM + ":" + timeS);
            },
        }
    };
share|improve this question

1 Answer 1

  1. I think it will be better if all selectors will be in options for init method and all of that fields like FileInputs will be initialized also in init, so I can put Upload.js in header and call init after document ready.
  2. I prefer prefix $ in fields names with jQuery objects like $fileInputs.
  3. As for me _this not the best choice, better something like uploader.
  4. Instead of bind method use on
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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