#21: Bulk upload now works with the VueJS model

This commit is contained in:
Andy Heathershaw 2017-04-17 22:03:01 +01:00
parent 94b2a9d1b6
commit aef3dfbdeb
6 changed files with 3475 additions and 162 deletions

View File

@ -2,10 +2,32 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
.album-expand-handle {
cursor: pointer;
margin-top: 5px;
}
.card-header.card-danger { .card-header.card-danger {
color: #fff; color: #fff;
font-weight: bold; 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 { html {
font-size: 14px !important; font-size: 14px !important;
} }
@ -27,11 +49,46 @@ textarea {
margin-top: 20px; margin-top: 20px;
} }
.hidden {
display: none;
}
.tab-content { .tab-content {
border: solid 1px rgb(221, 221, 221); border: solid 1px rgb(221, 221, 221);
border-top: 0; border-top: 0;
padding: 20px; 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) * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 The Bootstrap Authors

View File

@ -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) * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc. * Copyright 2011-2017 Twitter, Inc.

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

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

View File

@ -44,7 +44,7 @@
]) ])
</div> </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() }} {{ 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 }}"/>
@ -57,7 +57,7 @@
</div> </div>
<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> </div>
</form> </form>
@endif @endif