blue-twilight/resources/assets/js/albums.js

/**
 * 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,
        imagesUploaded: 0,
        isBulkUploadInProgress: false,
        isUploadInProgress: false,
        statusMessages: []
    };
    this.computed = {
        failedPercentage: function () {
            var result = 0;

            if (this.imagesTotal > 0)
            {
                result = (this.imagesFailed / this.imagesTotal) * 100;
            }

            return result.toFixed(2) + '%';
        },
        successfulPercentage: function () {
            var result = 0;

            if (this.imagesTotal > 0)
            {
                result = (this.imagesUploaded / this.imagesTotal) * 100;
            }

            return result.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;

            this.currentStatus = language.upload_status
                .replace(':current', 0)
                .replace(':total', this.imagesTotal);
        },
        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;
        }
    };
}