File uploader using XMLHttpRequest

Question

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.

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);
 },
 }
 };

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