Initial Upload
This commit is contained in:
Matt Batchelder
358
views/include-file-upload.twig
Normal file
358
views/include-file-upload.twig
Normal file
@@ -0,0 +1,358 @@
|
||||
{# All client side file upload stuff #}
|
||||
{# we use blueimp jquery-file-upload #}
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/tmpl.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-load-image/load-image.all.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.iframe-transport.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-process.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-resize.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-validate.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-ui.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-image.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-video.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/vendor/jquery-file-upload/js/jquery.fileupload-audio.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
|
||||
{# Our implementation of blueimp #}
|
||||
<script src="{{ theme.rootUri() }}dist/fileUpload.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
|
||||
{# Max image resize size from settings #}
|
||||
<script type="text/javascript" nonce="{{ cspNonce }}">
|
||||
let maxImagePixelSize = "{{ settings.DEFAULT_RESIZE_LIMIT }}";
|
||||
</script>
|
||||
|
||||
{# Handlebars Templates #}
|
||||
|
||||
{# Upload dialog - template-file-upload #}
|
||||
{% verbatim %}
|
||||
<script type="text/x-handlebars-template" id="template-file-upload">
|
||||
<form method="post" enctype="multipart/form-data" class="overflow-auto">
|
||||
{{#if playlistId}}
|
||||
<input type="hidden" name="playlistId" value="{{ playlistId }}" />
|
||||
{{/if}}
|
||||
{{#if widgetId}}
|
||||
<input type="hidden" name="widgetId" value="{{ widgetId }}" />
|
||||
{{/if}}
|
||||
{{#if oldMediaId}}
|
||||
<input type="hidden" name="oldMediaId" value="{{ oldMediaId }}" />
|
||||
<input type="hidden" name="folderId" type="hidden" id="folderId" value="{{oldFolderId}}">
|
||||
{{else}}
|
||||
<input type="hidden" name="folderId" type="hidden" id="formFolderId" value="{{currentWorkingFolderId}}">
|
||||
{{/if}}
|
||||
{{#if displayOrder}}
|
||||
<input type="hidden" name="displayOrder" value="{{ displayOrder }}" />
|
||||
{{/if}}
|
||||
<div class="row fileupload-buttonbar">
|
||||
<div class="col-md-7">
|
||||
<div class="card p-3 mb-3 bg-light">
|
||||
<p>{{ upload.maxSizeMessage }}</p>
|
||||
{{#if upload.validExtensionsMessage}}
|
||||
<p><strong>{{ upload.validExtensionsMessage }}</strong></p>
|
||||
{{/if}}
|
||||
{{#if folderSelector}}
|
||||
{% endverbatim %} {% if currentUser.featureEnabled('folder.view') %} {% verbatim %}
|
||||
<div class="row">
|
||||
<div class="col-sm-3" style="padding:0">
|
||||
<p title="{{trans.selectedFolderTitle}}">{{ trans.selectedFolder }}</p>
|
||||
</div>
|
||||
<div class="col-sm-9" style="padding:0">
|
||||
<span id="selectedFormFolder"></span>
|
||||
</div>
|
||||
</div>
|
||||
{% endverbatim %} {% endif %} {% verbatim %}
|
||||
{{/if}}
|
||||
</div>
|
||||
<!-- The fileinput-button span is used to style the file input field as button -->
|
||||
<span class="btn btn-sm btn-success fileinput-button">
|
||||
<i class="fa fa-plus"></i>
|
||||
<span>{{ trans.addFiles }}</span>
|
||||
{{#if multi }}
|
||||
<input type="file" name="files[]" id="files" multiple>
|
||||
{{else}}
|
||||
<input type="file" name="files[]" id="files">
|
||||
{{/if}}
|
||||
</span>
|
||||
<button type="submit" class="btn btn-sm btn-primary start">
|
||||
<i class="fa fa-upload"></i>
|
||||
<span>{{ trans.startUpload }}</span>
|
||||
</button>
|
||||
<button type="reset" class="btn btn-sm btn-warning cancel">
|
||||
<i class="fa fa-ban"></i>
|
||||
<span>{{ trans.cancelUpload }}</span>
|
||||
</button>
|
||||
{{#if folderSelector}}
|
||||
{% endverbatim %} {% if currentUser.featureEnabled('folder.view') %} {% verbatim %}
|
||||
<button type="button" class="btn btn-sm btn-info" id="select-folder-button" data-toggle="modal" data-target="#folder-tree-form-modal" title="{{trans.selectFolderTitle}}">{{trans.selectFolder}}</button>
|
||||
{% endverbatim %} {% endif %} {% verbatim %}
|
||||
{{/if}}
|
||||
<!-- The loading indicator is shown during file processing -->
|
||||
<span class="fileupload-loading"></span>
|
||||
</div>
|
||||
<!-- The global progress information -->
|
||||
<div class="col-md-4 fileupload-progress fade">
|
||||
<!-- The global progress bar -->
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
|
||||
<div class="sr-only"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- The extended global progress information -->
|
||||
<div class="progress-extended"> </div>
|
||||
<!-- Processing info container -->
|
||||
<div class="progress-end" style="display:none;">{{ trans.processing }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if oldMediaId}}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="updateInLayouts" name="updateInLayouts" {{#if updateInAllChecked}}checked{{/if}}>
|
||||
<label for="updateInLayouts">
|
||||
{{ trans.updateInLayouts.title }}
|
||||
</label>
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ trans.updateInLayouts.helpText }}</small>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="deleteOldRevisions" name="deleteOldRevisions" {{#if deleteOldRevisionsChecked}}checked{{/if}}>
|
||||
<label for="deleteOldRevisions">
|
||||
{{ trans.deleteOldRevisions.title }}
|
||||
</label>
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ trans.deleteOldRevisions.helpText }}</small>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if layoutImport }}
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="replaceExisting" name="replaceExisting">
|
||||
<label class="form-check-label" for="replaceExisting" title="If the import finds existing media with the same name, should it be replaced in the Layout or should the Layout use that media.">
|
||||
{{ trans.replaceExistingMediaMessage }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="importTags" name="importTags">
|
||||
<label class="form-check-label" for="importTags" title="Would you like to import any tags contained on the layout.">
|
||||
{{ trans.importTagsMessage }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="useExistingDataSets" name="useExistingDataSets" checked>
|
||||
<label class="form-check-label" for="useExistingDataSets">
|
||||
{{ trans.useExistingDataSetsMessage }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="importDataSetData" name="importDataSetData" disabled>
|
||||
<label class="form-check-label" for="importDataSetData">
|
||||
{{ trans.dataSetDataMessage }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6"></div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="field-importFallback" name="importFallback">
|
||||
<label class="form-check-label" for="field-importFallback">
|
||||
{{ trans.fallbackMessage }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showWidgetDates }}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="setExpiryDates" name="setExpiryDates">
|
||||
<label class="form-check-label" for="setExpiryDates">{{ trans.widgetExpiryDates }}</label>
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ trans.widgetExpiryDatesMessage }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-widget-dates row-widget-set-expiry hidden">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 control-label" for="widgetFromDt">{{ trans.widgetFromDt }}</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend input-group-text date-open-button" role="button"><i class="fa fa-calendar"></i></span>
|
||||
<input class="form-control dateControl dateTime" type="text" name="widgetFromDt" id="widgetFromDt" />
|
||||
<span class="input-group-append input-group-addon input-group-text date-clear-button d-none" role="button"><i class="fa fa-times"></i></span>
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ trans.widgetFromDtMessage }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 control-label" for="widgetToDt">{{ trans.widgetToDt }}</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group">
|
||||
<span class="input-group-prepend input-group-text date-open-button" role="button"><i class="fa fa-calendar"></i></span>
|
||||
<input class="form-control dateControl dateTime" type="text" name="widgetToDt" id="widgetToDt" />
|
||||
<span class="input-group-append input-group-addon input-group-text date-clear-button d-none" role="button"><i class="fa fa-times"></i></span>
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ trans.widgetToDtMessage }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-widget-set-expiry hidden">
|
||||
<div class="col-md-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="deleteOnExpiry" name="deleteOnExpiry">
|
||||
<label class="form-check-label" for="deleteOnExpiry">{{ trans.deleteOnExpiry }}</label>
|
||||
</div>
|
||||
<small class="form-text text-muted">{{ trans.deleteOnExpiryMessage }}</small>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="applyToMedia" name="applyToMedia">
|
||||
<label class="form-check-label" for="applyToMedia">{{ trans.applyToMedia }}</label>
|
||||
</div>
|
||||
<span class="form-text text-muted">{{ trans.applyToMediaMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<!-- The table listing the files available for upload/download -->
|
||||
<table role="presentation" class="table table-striped table-sm"><tbody class="files"></tbody></table>
|
||||
</form>
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
|
||||
{# The template for simple upload #}
|
||||
{% verbatim %}
|
||||
<script id="template-upload-simple" type="text/x-tmpl">
|
||||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||||
<tr class="template-upload">
|
||||
<td>
|
||||
<span class="preview"></span>
|
||||
</td>
|
||||
<td>
|
||||
<p class="size">{%=o.formatFileSize(file.size)%}</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
|
||||
<div class="sr-only"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="btn-group text-right">
|
||||
{% if (!i && !o.options.autoUpload) { %}
|
||||
<button class="btn btn-primary start" disabled>
|
||||
<i class="fa fa-upload"></i>
|
||||
</button>
|
||||
{% } %}
|
||||
{% if (!i) { %}
|
||||
<button class="btn btn-warning cancel">
|
||||
<i class="fa fa-ban"></i>
|
||||
</button>
|
||||
{% } %}
|
||||
</td>
|
||||
</tr>
|
||||
{% } %}
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
|
||||
{# The template to display files available for upload #}
|
||||
{% verbatim %}
|
||||
<script id="template-upload" type="text/x-tmpl">
|
||||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||||
<tr class="template-upload">
|
||||
<td>
|
||||
<span class="preview"></span>
|
||||
</td>
|
||||
<td class="row">
|
||||
<div class="title col-12 mb-2 col-xl-6" title="Name">
|
||||
<label class="control-label" title="Optional media name" for="name[]">Name</label>
|
||||
<div class="input-group">
|
||||
<input name="name[]" type="text" id="name" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="title col-12 mb-2 col-xl-6 tags-input-container" title="Tags">
|
||||
{% endverbatim %}{% if currentUser.featureEnabled("tag.tagging") %}
|
||||
<label class="control-label" title="A comma separated list of tags to assign to this Media" for="tags">Tags</label>
|
||||
<div class="input-group">
|
||||
<input name="tags[]" type="text" id="tags" value="" />
|
||||
</div>
|
||||
{% endif %}{% verbatim %}
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<span class="info"></span>
|
||||
</div>
|
||||
<div class="col-12 mb-2">
|
||||
<span class="error"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="size">{%=o.formatFileSize(file.size)%}</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
|
||||
<div class="sr-only"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="btn-group">
|
||||
{% if (!i && !o.options.autoUpload) { %}
|
||||
<button class="btn btn-primary start" disabled>
|
||||
<i class="fa fa-upload"></i>
|
||||
</button>
|
||||
{% } %}
|
||||
{% if (!i) { %}
|
||||
<button class="btn btn-warning cancel">
|
||||
<i class="fa fa-ban"></i>
|
||||
</button>
|
||||
{% } %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% } %}
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
|
||||
{# The template to display files available for download #}
|
||||
{% verbatim %}
|
||||
<script id="template-download" type="text/x-tmpl">
|
||||
{% for (var i=0, file; file=o.files[i]; i++) { %}
|
||||
<tr class="template-download">
|
||||
<td colspan="2">
|
||||
<p class="name" id="{%=file.storedas%}" status="{% if (file.error) { %}error{% } %}">
|
||||
{%=file.name%}
|
||||
</p>
|
||||
{% if (file.error) { %}
|
||||
<div><span class="label label-danger">{%=file.error%}</span></div>
|
||||
{% } %}
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<span class="size">{%=o.formatFileSize(file.size)%}</span>
|
||||
</td>
|
||||
{% if (file.error) { %}
|
||||
<td class="text-right">
|
||||
<div class="btn-group">
|
||||
{% if (!i) { %}
|
||||
<button class="btn btn-warning cancel">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
{% } %}
|
||||
</div>
|
||||
</td>
|
||||
{% } %}
|
||||
</tr>
|
||||
{% } %}
|
||||
</script>
|
||||
{% endverbatim %}
|
||||
Reference in New Issue
Block a user