#21: Bulk upload now works with the VueJS model

public/css/blue-twilight.css

@@ -2,10 +2,32 @@
     margin-bottom: 15px;
 }
 
+.album-expand-handle {
+    cursor: pointer;
+    margin-top: 5px;
+}
+
 .card-header.card-danger {
     color: #fff;
     font-weight: bold;
 }
+
+.photo .loading {
+    background-color: #ffffff;
+    display: none;
+    height: 100%;
+    left: 0;
+    opacity: 0.8;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.photo .loading img {
+    margin-top: 40px;
+}
 html {
     font-size: 14px !important;
 }
@@ -27,11 +49,46 @@ textarea {
     margin-top: 20px;
 }
 
+.hidden {
+    display: none;
+}
+
 .tab-content {
     border: solid 1px rgb(221, 221, 221);
     border-top: 0;
     padding: 20px;
 }
+.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
+  box-sizing: border-box; }
+
+.tether-element {
+  position: absolute;
+  display: none; }
+  .tether-element.tether-open {
+    display: block; }
+
+.tether-element.tether-theme-basic {
+  max-width: 100%;
+  max-height: 100%; }
+  .tether-element.tether-theme-basic .tether-content {
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    font-family: inherit;
+    background: #fff;
+    color: inherit;
+    padding: 1em;
+    font-size: 1.1em;
+    line-height: 1.5em; }
+
+.tether-element, .tether-element:after, .tether-element:before, .tether-element *, .tether-element *:after, .tether-element *:before {
+  box-sizing: border-box; }
+
+.tether-element {
+  position: absolute;
+  display: none; }
+  .tether-element.tether-open {
+    display: block; }
+
 /*!
  * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
  * Copyright 2011-2017 The Bootstrap Authors

public/css/blue-twilight.min.css

@@ -1,4 +1,4 @@
-.admin-sidebar-card{margin-bottom:15px}.card-header.card-danger{color:#fff;font-weight:bold}html{font-size:14px !important}button,input,optgroup,select,textarea{cursor:pointer;font-family:inherit !important}.album-photo-cards .card{margin-bottom:15px}.container,.container-fluid{margin-top:20px}.tab-content{border:solid 1px #ddd;border-top:0;padding:20px}/*!
+.admin-sidebar-card{margin-bottom:15px}.album-expand-handle{cursor:pointer;margin-top:5px}.card-header.card-danger{color:#fff;font-weight:bold}.photo .loading{background-color:#fff;display:none;height:100%;left:0;opacity:.8;position:absolute;text-align:center;top:0;width:100%;z-index:1000}.photo .loading img{margin-top:40px}html{font-size:14px !important}button,input,optgroup,select,textarea{cursor:pointer;font-family:inherit !important}.album-photo-cards .card{margin-bottom:15px}.container,.container-fluid{margin-top:20px}.hidden{display:none}.tab-content{border:solid 1px #ddd;border-top:0;padding:20px}.tether-element,.tether-element:after,.tether-element:before,.tether-element *,.tether-element *:after,.tether-element *:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}.tether-element.tether-theme-basic{max-width:100%;max-height:100%}.tether-element.tether-theme-basic .tether-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,0.2);font-family:inherit;background:#fff;color:inherit;padding:1em;font-size:1.1em;line-height:1.5em}.tether-element,.tether-element:after,.tether-element:before,.tether-element *,.tether-element *:after,.tether-element *:before{box-sizing:border-box}.tether-element{position:absolute;display:none}.tether-element.tether-open{display:block}/*!
  * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
  * Copyright 2011-2017 The Bootstrap Authors
  * Copyright 2011-2017 Twitter, Inc.

resources/assets/js/albums.js

@@ -574,6 +574,10 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
                 .replace(':current', 0)
                 .replace(':total', this.imagesTotal);
         },
+        uploadBulkFiles: function(event) {
+            this.isBulkUploadInProgress = true;
+            return true;
+        },
         uploadIndividualFiles: function(event) {
             var fileSelect = $('input[type=file]', event.target);
 

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

@@ -44,7 +44,7 @@
             ])
         </div>
 
-        <form action="{{ route('photos.storeBulk') }}" method="POST" enctype="multipart/form-data">
+        <form action="{{ route('photos.storeBulk') }}" method="POST" enctype="multipart/form-data" v-on:submit="uploadBulkFiles">
             {{ csrf_field() }}
             <input type="hidden" name="album_id" value="{{ $album->id }}"/>
             <input type="hidden" name="queue_token" value="{{ $queue_token }}"/>
@@ -57,7 +57,7 @@
             </div>
 
             <div>
-                <button type="submit" class="btn btn-success" data-bind="disable: (isUploadInProgress() || isBulkUploadInProgress()), text: isBulkUploadInProgress() ? '@lang('admin.is_uploading')' : '@lang('forms.upload_action')'"><i class="fa fa-fw fa-upload"></i> @lang('forms.upload_action')</button>
+                <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>
     @endif