mirror of
https://github.com/mediacms-io/mediacms.git
synced 2024-12-13 10:30:42 +01:00
239 lines
9.0 KiB
HTML
239 lines
9.0 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% load static %}
|
||
|
|
|
||
|
|
{% block headtitle %}Add new media - {{PORTAL_NAME}}{% endblock headtitle %}
|
||
|
|
|
||
|
|
{% block externallinks %}
|
||
|
|
{% if LOAD_FROM_CDN %}
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/5.13.0/fine-uploader.min.js" rel="preload" as="script">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/5.13.0/fine-uploader.min.js"></script>
|
||
|
|
{% else %}
|
||
|
|
<link href="{% static "lib/file-uploader/5.13.0/fine-uploader.min.js" %}" rel="preload" as="script">
|
||
|
|
<script src="{% static "lib/file-uploader/5.13.0/fine-uploader.min.js" %}"></script>
|
||
|
|
{% endif %}
|
||
|
|
{% endblock externallinks %}
|
||
|
|
|
||
|
|
{% block topimports %}
|
||
|
|
<link href="{% static "css/add-media.css" %}" rel="preload" as="style">
|
||
|
|
<link href="{% static "css/add-media.css" %}" rel="stylesheet">
|
||
|
|
{%endblock topimports %}
|
||
|
|
|
||
|
|
{% block innercontent %}
|
||
|
|
{% if request.user.is_authenticated %}
|
||
|
|
|
||
|
|
{% if can_add %}
|
||
|
|
|
||
|
|
<div class="media-uploader-wrap">
|
||
|
|
<div class="media-uploader-top-wrap">
|
||
|
|
<div class="media-uploader-top-left-wrap">
|
||
|
|
<h1>Upload media files</h1>
|
||
|
|
</div>
|
||
|
|
<div class="media-uploader-top-right-wrap"> </div>
|
||
|
|
</div>
|
||
|
|
<script type="text/template" id="qq-template">
|
||
|
|
<div class="media-uploader-bottom-wrap qq-uploader-selector">
|
||
|
|
<div class="media-uploader-bottom-left-wrap">
|
||
|
|
<div class="media-drag-drop-wrap">
|
||
|
|
<div class="media-drag-drop-inner" qq-drop-area-text="Drop files here">
|
||
|
|
<div class="media-drag-drop-content">
|
||
|
|
<div class="media-drag-drop-content-inner">
|
||
|
|
<span><i class="material-icons">cloud_upload</i></span>
|
||
|
|
<span>Drag and drop files</span>
|
||
|
|
<span>or</span>
|
||
|
|
<span class="browse-files-btn-wrap">
|
||
|
|
<span class="qq-upload-button-selector">Browse your files</span>
|
||
|
|
</span>
|
||
|
|
<div class="qq-upload-drop-area-selector media-dropzone" qq-hide-dropzone>
|
||
|
|
<span class="qq-upload-drop-area-text-selector"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="media-uploader-bottom-right-wrap">
|
||
|
|
<ul class="media-upload-items-list qq-upload-list-selector">
|
||
|
|
<li>
|
||
|
|
<div class="media-upload-item-main">
|
||
|
|
<div class="media-upload-item-thumb">
|
||
|
|
<img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale alt="" />
|
||
|
|
<span class="media-upload-item-spinner qq-upload-spinner-selector"><i class="material-icons">autorenew</i></span>
|
||
|
|
<button type="button" class="qq-upload-retry-selector retry-media-upload-item" aria-label="Retry"><i class="material-icons">refresh</i> Retry</button>
|
||
|
|
</div>
|
||
|
|
<div class="media-upload-item-details">
|
||
|
|
<div class="media-upload-item-name">
|
||
|
|
<span class="media-upload-item-filename qq-upload-file-selector"></span>
|
||
|
|
<input class="media-upload-item-filename-input qq-edit-filename-selector" tab-index="0" type="text" />
|
||
|
|
</div>
|
||
|
|
<div class="media-upload-item-details-bottom">
|
||
|
|
<div class="media-upload-item-progress-bar-container qq-progress-bar-container-selector">
|
||
|
|
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="media-upload-item-progress-bar qq-progress-bar-selector"></div>
|
||
|
|
</div>
|
||
|
|
<span class="media-upload-item-upload-size qq-upload-size-selector"></span>
|
||
|
|
<span role="status" class="media-upload-item-status-text qq-upload-status-text-selector"></span>
|
||
|
|
</div>
|
||
|
|
<div class="media-upload-item-top-actions">
|
||
|
|
<span class="filename-edit qq-edit-filename-icon-selector" aria-label="Edit filename">Edit filename <i class="material-icons">create</i></span>
|
||
|
|
<button type="button" class="delete-media-upload-item qq-upload-delete-selector" aria-label="Delete">Delete <i class="material-icons">delete</i></button>
|
||
|
|
<button type="button" class="cancel-media-upload-item qq-upload-cancel-selector" aria-label="Cancel">Cancel <i class="material-icons">cancel</i></button>
|
||
|
|
<a href="#" class="view-uploaded-media-link qq-hide" target="_blank">View media <i class="material-icons">open_in_new</i></a>
|
||
|
|
</div>
|
||
|
|
<div class="media-upload-item-bottom-actions">
|
||
|
|
<button type="button" class="continue-media-upload-item qq-upload-continue-selector" aria-label="Continue"><i class="material-icons">play_circle_outline</i> Continue</button>
|
||
|
|
<button type="button" class="pause-media-upload-item qq-upload-pause-selector" aria-label="Pause"><i class="material-icons">pause_circle_outline</i> Pause</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<dialog class="qq-alert-dialog-selector">
|
||
|
|
<div class="qq-dialog-message-selector"></div>
|
||
|
|
<div class="qq-dialog-buttons">
|
||
|
|
<button type="button" class="qq-cancel-button-selector">CLOSE</button>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
<dialog class="qq-confirm-dialog-selector">
|
||
|
|
<div class="qq-dialog-message-selector"></div>
|
||
|
|
<div class="qq-dialog-buttons">
|
||
|
|
<button type="button" class="qq-cancel-button-selector">NO</button>
|
||
|
|
<button type="button" class="qq-ok-button-selector">YES</button>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
<dialog class="qq-prompt-dialog-selector">
|
||
|
|
<div class="qq-dialog-message-selector"></div>
|
||
|
|
<input type="text">
|
||
|
|
<div class="qq-dialog-buttons">
|
||
|
|
<button type="button" class="qq-cancel-button-selector">CANCEL</button>
|
||
|
|
<button type="button" class="qq-ok-button-selector">OK</button>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
<div class="media-uploader"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% else %}
|
||
|
|
|
||
|
|
{{can_upload_exp}}
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<a href='/contact'>Contact</a> the admin owners for more information.
|
||
|
|
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% else %}
|
||
|
|
|
||
|
|
<div class="user-action-form-wrap">
|
||
|
|
<div class="user-action-form-inner">
|
||
|
|
|
||
|
|
<h1>Sign In</h1>
|
||
|
|
|
||
|
|
Please login or register before you upload a media!
|
||
|
|
|
||
|
|
{% url 'upload_media' as redirect_url %}
|
||
|
|
|
||
|
|
<p>If you have not created an account yet, then please <a href="{% url 'account_signup' %}?next={{ redirect_url }}">sign up</a> first.</p>
|
||
|
|
|
||
|
|
<form class="login" method="POST" action="{% url 'account_login' %}">
|
||
|
|
{% csrf_token %}
|
||
|
|
{{ form.as_p }}
|
||
|
|
<input type="hidden" name="next" value="{{ redirect_url }}" />
|
||
|
|
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot Password?</a>
|
||
|
|
<button class="primaryAction" type="submit">Sign In</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% endif %}
|
||
|
|
{% endblock innercontent %}
|
||
|
|
|
||
|
|
{% block bottomimports %}
|
||
|
|
<script src="{% static "js/add-media.js" %}"></script>
|
||
|
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
||
|
|
function getCSRFToken() {
|
||
|
|
var i, cookies, cookie, cookieVal = null;
|
||
|
|
if ( document.cookie && '' !== document.cookie ) {
|
||
|
|
cookies = document.cookie.split(';');
|
||
|
|
i = 0;
|
||
|
|
while( i < cookies.length ){
|
||
|
|
cookie = cookies[i].trim();
|
||
|
|
if ( 'csrftoken=' === cookie.substring(0, 10) ) {
|
||
|
|
cookieVal = decodeURIComponent( cookie.substring(10) );
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
i += 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return cookieVal;
|
||
|
|
}
|
||
|
|
var default_concurrent_chunked_uploader = new qq.FineUploader({
|
||
|
|
debug: false,
|
||
|
|
element: document.querySelector('.media-uploader'),
|
||
|
|
request: {
|
||
|
|
endpoint: '{% url 'uploader:upload' %}',
|
||
|
|
customHeaders: {
|
||
|
|
'X-CSRFToken': getCSRFToken('csrftoken'),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
retry: {
|
||
|
|
enableAuto: true,
|
||
|
|
maxAutoAttempts: 2,
|
||
|
|
},
|
||
|
|
validation: {
|
||
|
|
itemLimit: {{UPLOAD_MAX_FILES_NUMBER}},
|
||
|
|
sizeLimit: {{UPLOAD_MAX_SIZE}},
|
||
|
|
},
|
||
|
|
chunking: {
|
||
|
|
enabled: true,
|
||
|
|
concurrent: {
|
||
|
|
enabled: true,
|
||
|
|
},
|
||
|
|
success: {
|
||
|
|
endpoint: '{% url 'uploader:upload' %}?done',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
callbacks: {
|
||
|
|
onError: function(id, name, errorReason, xhrOrXdr) {
|
||
|
|
console.warn(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
|
||
|
|
},
|
||
|
|
onComplete: function( id, name, response, request ) {
|
||
|
|
|
||
|
|
if( response.success ){
|
||
|
|
|
||
|
|
if( response.media_url ) {
|
||
|
|
if( 1 === this._currentItemLimit ) {
|
||
|
|
setTimeout(function(){ window.location.href = response.media_url; }, 500);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var listEl = document.querySelector( '.qq-file-id-' + id );
|
||
|
|
var viewFileEl = listEl.querySelector( '.view-uploaded-media-link' );
|
||
|
|
|
||
|
|
if( listEl ){
|
||
|
|
var fileUrl = response.media_url;
|
||
|
|
listEl.style.cursor = 'pointer';
|
||
|
|
listEl.addEventListener( 'click', function(ev){
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
var win = window.open( fileUrl, '_blank' );
|
||
|
|
win.focus();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if( viewFileEl ){
|
||
|
|
viewFileEl.setAttribute( 'href', response.media_url );
|
||
|
|
viewFileEl.setAttribute( 'class', 'view-uploaded-media-link' );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock bottomimports %}
|