blue-twilight/resources/views/themes/base/partials/album_upload_tab.blade.php

102 lines
5.3 KiB
PHP

<div role="tabpanel" class="tab-pane{{ $active_tab == 'upload' ? ' active' : '' }}" id="upload-tab">
@if (!$is_upload_enabled)
<div class="row">
<div class="col-xs-12">
<p class="text-danger" style="font-weight: bold">@lang('admin.upload_disabled_heading')</p>
<p>@lang('admin.upload_disabled_text')</p>
</div>
</div>
@else
<h4>@lang('admin.upload_single_file_heading')</h4>
<p>@lang('admin.upload_single_file_text')</p>
<div class="alert alert-info">
@lang('admin.upload_single_file_text2', [
'file_size' => sprintf('<b>%s%s</b>', round($file_upload_limit, 2), trans('global.units.megabytes')),
'max_upload_size' => sprintf('<b>%s%s</b>', round($max_post_limit, 2), trans('global.units.megabytes'))
])
</div>
<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" multiple="multiple">
<span class="custom-file-control"></span>
</label>--}}
<input type="file" name="photo[]" id="single-upload-files" multiple="multiple">
</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>
<hr/>
<h4>@lang('admin.upload_bulk_heading')</h4>
<p>@lang('admin.upload_bulk_text')</p>
<div class="alert alert-info">
@lang('admin.upload_bulk_text2', [
'max_upload_size' => sprintf('<b>%s%s</b>', round($max_post_limit_bulk, 2), trans('global.units.megabytes'))
])
</div>
<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 }}"/>
<div class="form-group">
{{--<label class="custom-file">
<input type="file" id="single-upload-files" class="custom-file-input" multiple="multiple" name="archive">
<span class="custom-file-control"></span>
</label>--}}
<input type="file" id="single-upload-files" multiple="multiple" name="archive">
</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>
@endif
{{-- Single-file upload progress modal --}}
<div class="modal" id="upload-progress-modal" data-backdrop="static" data-keyboard="false">
<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 bg-success" role="progressbar" v-bind:style="{ width: successfulPercentage }">
</div>
<div class="progress-bar bg-danger" role="progressbar" v-bind:style="{ width: failedPercentage }">
</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>