#9: Single-file album upload is now working with Bootstrap v4
This commit is contained in:
Andy Heathershaw
parent
8201f1df8b
commit
8b9e8f0229
|
|
@ -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(':total', self.imagesTotal);
|
||||
.replace(':current', (this.imagesUploaded + this.imagesFailed))
|
||||
.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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -16,54 +16,23 @@
|
|||
])
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-5" style="margin-bottom: 20px;">
|
||||
<form action="{{ route('photos.store') }}" method="POST" enctype="multipart/form-data" v-on:submit="uploadIndividualFiles">
|
||||
{{ csrf_field() }}
|
||||
<input type="hidden" name="album_id" value="{{ $album->id }}"/>
|
||||
<input type="hidden" name="queue_token" value="{{ $queue_token }}"/>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<form action="{{ route('photos.store') }}" method="POST" enctype="multipart/form-data" v-on:submit="uploadIndividualFiles">
|
||||
{{ csrf_field() }}
|
||||
<input type="hidden" name="album_id" value="{{ $album->id }}"/>
|
||||
<input type="hidden" name="queue_token" value="{{ $queue_token }}"/>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="custom-file">
|
||||
<input type="file" name="photo[]" id="single-upload-files" class="custom-file-input" multiple="multiple">
|
||||
<span class="custom-file-control"></span>
|
||||
</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 class="form-group">
|
||||
<label class="custom-file">
|
||||
<input type="file" name="photo[]" id="single-upload-files" class="custom-file-input" multiple="multiple">
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: statusMessages().length > 0">
|
||||
<p data-bind="visible: !isUploadInProgress()" class="text-danger" style="font-weight: bold">
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
Loading…
Reference in New Issue