#9: Single-file album upload is now working with Bootstrap v4

resources/assets/js/albums.js

@@ -19,18 +19,18 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
     this.computed = {
         // a computed getter
         failedPercentage: function () {
-            return ((this.imagesFailed() / this.imagesTotal()) * 100).toFixed(2) + '%';
+            return ((this.imagesFailed / this.imagesTotal) * 100).toFixed(2) + '%';
         },
         successfulPercentage: function () {
-            return ((self.imagesUploaded() / self.imagesTotal()) * 100).toFixed(2) + '%';
+            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', (self.imagesUploaded + self.imagesFailed))
+                .replace(':current', (this.imagesUploaded + this.imagesFailed))
-                .replace(':total', self.imagesTotal);
+                .replace(':total', this.imagesTotal);
 
             if ((this.imagesFailed + this.imagesUploaded) >= this.imagesTotal) {
                 this.isUploadInProgress = false;
@@ -52,16 +52,16 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
         // This method is called when an uploaded image succeeds
         onUploadSuccessful: function (data, file_name) {
             if (data.is_successful) {
-                self.imagesUploaded++;
+                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)
                  });*/
-                self.onUploadCompleted();
+                this.onUploadCompleted();
             }
             else {
-                self.onUploadFailed(data, file_name);
+                this.onUploadFailed(data, file_name);
             }
         },
         uploadFile: function uploadImageFile(formObject, imageFile) {
@@ -116,7 +116,7 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
                 }
 
                 // Upload the file
-                this.uploadFile($(this), file);
+                this.uploadFile(event.target, file);
             }
 
             // Prevent standard form upload

resources/views/themes/base/admin/show_album.blade.php

@@ -12,7 +12,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <a class="pull-right btn btn-default" href="{{ $album->url() }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('admin.open_album')</a>
+                <a class="pull-right btn btn-secondary" href="{{ $album->url() }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('admin.open_album')</a>
 
                 <h1 class="page-title">{{ $album->name }}</h1>
                 <p>{{ $album->description }}</p>
@@ -361,6 +361,16 @@
         //ko.applyBindings(editViewModel, document.getElementById('photos-tab'));
         //ko.applyBindings(viewModel, document.getElementById('upload-tab'));
         var appUpload = new Vue(viewModel);
+        appUpload.$watch('isUploadInProgress', function(value) {
+            if (value)
+            {
+                $('#upload-progress-modal').modal('show');
+            }
+            else if (this.statusMessages.length == 0)
+            {
+                $('#upload-progress-modal').modal('hide');
+            }
+        });
     })
 </script>
 @endpush

resources/views/themes/base/partials/album_upload_tab.blade.php

@@ -16,54 +16,23 @@
             ])
         </div>
 
-        <div class="row">
+        <div style="margin-bottom: 20px;">
-            <div class="col-sm-5" style="margin-bottom: 20px;">
+            <form action="{{ route('photos.store') }}" method="POST" enctype="multipart/form-data" v-on:submit="uploadIndividualFiles">
-                <form action="{{ route('photos.store') }}" method="POST" enctype="multipart/form-data" v-on:submit="uploadIndividualFiles">
+                {{ csrf_field() }}
-                    {{ csrf_field() }}
+                <input type="hidden" name="album_id" value="{{ $album->id }}"/>
-                    <input type="hidden" name="album_id" value="{{ $album->id }}"/>
+                <input type="hidden" name="queue_token" value="{{ $queue_token }}"/>
-                    <input type="hidden" name="queue_token" value="{{ $queue_token }}"/>
 
-                    <div class="form-group">
+                <div class="form-group">
-                        <label class="custom-file">
+                    <label class="custom-file">
-                            <input type="file" name="photo[]" id="single-upload-files" class="custom-file-input" multiple="multiple">
+                        <input type="file" name="photo[]" id="single-upload-files" class="custom-file-input" multiple="multiple">
-                            <span class="custom-file-control"></span>
+                        <span class="custom-file-control"></span>
-                        </label>
+                    </label>
-                    </div>
-
-                    <div>
-                        <button type="submit" class="btn btn-success" v-bind:disabled="isUploadInProgress || isBulkUploadInProgress" v-html="isUploadInProgress ? '@lang('admin.is_uploading')' : '@lang('forms.upload_action')'"><i class="fa fa-fw fa-upload"></i> @lang('forms.upload_action')</button>
-                    </div>
-                </form>
-            </div>
-
-            <div class="col-sm-5">
-                <div class="text-center" data-bind="visible: isUploadInProgress">
-                    <p><b>@lang('admin.is_uploading')</b></p>
-                    <div class="progress">
-                        <div class="progress-bar progress-bar-success" data-bind="style: { width: successfulPercentage() }">
-                            <span class="sr-only"><span class="percentage-success" data-bind="text: successfulPercentage"></span></span>
-                        </div>
-                        <div class="progress-bar progress-bar-danger" data-bind="style: { width: failedPercentage() }">
-                            <span class="sr-only"><span class="percentage-danger" data-bind="text: failedPercentage"></span></span>
-                        </div>
-                    </div>
-                    <p data-bind="text: currentStatus"></p>
                 </div>
 
-                <div data-bind="visible: statusMessages().length > 0">
+                <div>
-                    <p data-bind="visible: !isUploadInProgress()" class="text-danger" style="font-weight: bold">
+                    <button type="submit" class="btn btn-success" v-bind:disabled="isUploadInProgress || isBulkUploadInProgress" v-html="isUploadInProgress ? '@lang('admin.is_uploading')' : '@lang('forms.upload_action')'"><i class="fa fa-fw fa-upload"></i> @lang('forms.upload_action')</button>
-                        <span data-bind="text: imagesFailed"></span> @lang('admin.upload_file_number_failed')
-                    </p>
-                    <p data-bind="visible: imagesUploaded() > 0">
-                        @lang('admin.upload_file_failed_continue')<br /><br/>
-                        <a href="{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}" class="btn btn-primary">@lang('forms.continue_action')</a>
-                    </p>
-
-                    <ul data-bind="foreach: statusMessages">
-                        <li data-bind="css: message_class, text: message_text"></li>
-                    </ul>
                 </div>
-            </div>
+            </form>
         </div>
 
         <hr/>
@@ -92,4 +61,42 @@
             </div>
         </form>
     @endif
+
+    {{-- Single-file upload progress modal --}}
+    <div class="modal" id="upload-progress-modal">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">@lang('admin.is_uploading')</h5>
+                </div>
+                <div class="modal-body">
+                    <div class="text-center">
+                        <div class="progress">
+                            <div class="progress-bar progress-bar-success" v-bind:style="{ width: successfulPercentage }">
+                                <span class="sr-only"><span class="percentage-success" v-text="successfulPercentage"></span></span>
+                            </div>
+                            <div class="progress-bar progress-bar-danger" v-bind:style="{ width: failedPercentage }">
+                                <span class="sr-only"><span class="percentage-danger" v-text="failedPercentage"></span></span>
+                            </div>
+                        </div>
+                        <p v-text="currentStatus"></p>
+                    </div>
+
+                    <div v-if="statusMessages.length > 0">
+                        <p v-if="!isUploadInProgress" class="text-danger" style="font-weight: bold">
+                            <span v-text="imagesFailed"></span> @lang('admin.upload_file_number_failed')
+                        </p>
+                        <p v-if="imagesUploaded > 0">
+                            @lang('admin.upload_file_failed_continue')<br /><br/>
+                            <a href="{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}" class="btn btn-primary">@lang('forms.continue_action')</a>
+                        </p>
+
+                        <ul v-for="message in statusMessages">
+                            <li v-bind:class="{ message: message.message_class }" v-text="message.message_text"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>