/** * This model is used by admin/show_album.blade.php to handle photo uploads. * @param album_id ID of the album the photos are being uploaded to * @param queue_token Unique token of the upload queue to save the photos to * @param language Array containing language strings * @param urls Array containing URLs * @constructor */ function UploadPhotosViewModel(album_id, queue_token, language, urls) { this.el = '#upload-tab'; this.data = { currentStatus: '', imagesFailed: 0, imagesTotal: 0, isBulkUploadInProgress: false, isUploadInProgress: false, statusMessages: [] }; this.computed = { // a computed getter failedPercentage: function () { return ((this.imagesFailed / this.imagesTotal) * 100).toFixed(2) + '%'; }, successfulPercentage: function () { return ((self.imagesUploaded / self.imagesTotal) * 100).toFixed(2) + '%'; } }; this.methods = { // This method is called when an image is uploaded - regardless if it fails or not onUploadCompleted: function () { this.currentStatus = language.upload_status .replace(':current', (this.imagesUploaded + this.imagesFailed)) .replace(':total', this.imagesTotal); if ((this.imagesFailed + this.imagesUploaded) >= this.imagesTotal) { this.isUploadInProgress = false; if (this.imagesFailed == 0 && this.imagesUploaded > 0) { window.location = urls.analyse; } } }, // This method is called when an uploaded image fails onUploadFailed: function (data, file_name) { this.imagesFailed++; this.statusMessages.push({ 'message_class': 'text-danger', 'message_text': language.image_failed.replace(':file_name', file_name) }); this.onUploadCompleted(); }, // This method is called when an uploaded image succeeds onUploadSuccessful: function (data, file_name) { if (data.is_successful) { this.imagesUploaded++; // 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) });*/ this.onUploadCompleted(); } else { this.onUploadFailed(data, file_name); } }, uploadFile: function uploadImageFile(formObject, imageFile) { var self = this; var formData = new FormData(); formData.append('album_id', album_id); formData.append('queue_token', queue_token); 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') } ); this.isUploadInProgress = true; }, uploadIndividualFiles: function(event) { var fileSelect = $('input[type=file]', event.target); // Get the selected files var files = fileSelect[0].files; // Reset statistics this.currentStatus = ''; this.statusMessages = []; this.imagesUploaded = 0; this.imagesFailed = 0; this.imagesTotal = files.length; this.isUploadInProgress = true; // Loop through each of the selected files and upload them individually for (var i = 0; i < files.length; i++) { var file = files[i]; // We're only interested in image files if (!file.type.match('image.*')) { alert(language.not_an_image_file.replace(':file_name', file.name)); this.onUploadFailed(null, file.name); continue; } // Upload the file this.uploadFile(event.target, file); } // Prevent standard form upload event.preventDefault(); return false; } }; }