function UploadPhotosViewModel(album_id, language, urls) { var self = this; self.currentStatus = ko.observable(''); self.imagesFailed = ko.observable(0); self.imagesUploaded = ko.observable(0); self.imagesTotal = ko.observable(0); self.isUploadInProgress = ko.observable(false); self.statusMessages = ko.observableArray(); self.failedPercentage = ko.computed(function() { return ((self.imagesFailed() / self.imagesTotal()) * 100).toFixed(2) + '%'; }); // This method is called when an image is uploaded - regardless if it fails or not self.onUploadCompleted = function() { self.currentStatus(language.upload_status .replace(':current', (self.imagesUploaded() + self.imagesFailed())) .replace(':total', self.imagesTotal())); if ((self.imagesFailed() + self.imagesUploaded()) >= self.imagesTotal()) { self.isUploadInProgress(false); if (self.imagesFailed() == 0 && self.imagesUploaded() > 0) { window.location = urls.analyse; } } }; // This method is called when an uploaded image fails self.onUploadFailed = function(data, file_name) { self.imagesFailed(self.imagesFailed() + 1); self.statusMessages.push({ 'message_class': 'text-danger', 'message_text': language.image_failed.replace(':file_name', file_name) }); self.onUploadCompleted(); }; // This method is called when an uploaded image succeeds self.onUploadSuccessful = function(data, file_name) { if (data.is_successful) { self.imagesUploaded(self.imagesUploaded() + 1); // Don't add to statusMessages() array so user only sees errors /*self.statusMessages.push({ 'message_class': 'text-success', 'message_text': language.image_uploaded.replace(':file_name', file_name) });*/ self.onUploadCompleted(); } else { self.onUploadFailed(data, file_name); } }; self.startUpload = function(number_images) { self.currentStatus(''); self.statusMessages.removeAll(); self.imagesUploaded(0); self.imagesFailed(0); self.imagesTotal(number_images); self.isUploadInProgress(true); }; self.successfulPercentage = ko.computed(function() { return ((self.imagesUploaded() / self.imagesTotal()) * 100).toFixed(2) + '%'; }); self.uploadFile = function uploadImageFile(formObject, imageFile) { var formData = new FormData(); formData.append('album_id', album_id); formData.append('photo[]', imageFile, imageFile.name); $.ajax( { contentType: false, data: formData, error: function(data) { self.onUploadFailed(data, imageFile.name); }, method: $(formObject).attr('method'), processData: false, success: function(data) { self.onUploadSuccessful(data, imageFile.name); }, url: $(formObject).attr('action') } ); viewModel.isUploadInProgress(true); }; }