/file.html |
@@ -89,27 +89,27 @@ |
<span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> |
</div> |
<div> |
<p id="filename" class="filename" data-dz-name></p> |
<p class="upload-filename" data-dz-name></p> |
<div class="input-group"> |
<input id="URL" type="text" class="form-control" readonly> |
<input id="file-upload-url" type="text" class="form-control upload-url" readonly> |
<span class="input-group-btn"> |
<button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button> |
<button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button> |
</span> |
<span class="input-group-btn"> |
<button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button> |
<button id="btn-facebook" class="btn btn-default url-facebook-button" type="button" disabled><i class="fa fa-facebook"></i></button> |
</span> |
<span class="input-group-btn"> |
<button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
<button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
</span> |
</div> |
<div class="input-group"> |
<input id="deleteURL" type="text" class="form-control" readonly> |
<input id="file-delete-url" type="text" class="form-control delete-url" readonly> |
<span class="input-group-btn"> |
<button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
<button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> |
</span> |
</div> |
<div class="input-group"> |
<select id="tags" multiple class="form-control bootstrap-tagsinput tags"></select> |
<select id="file-tags" multiple class="form-control bootstrap-tagsinput file-tags"></select> |
</div> |
<strong class="error text-danger" data-dz-errormessage></strong> |
</div> |
@@ -204,7 +204,7 @@ |
// Append tags to the form data. |
const tagsBoxID = file |
.previewElement |
.querySelector('.tags') |
.querySelector('.file-tags') |
.getAttribute('id'); |
|
const tags = $('#' + tagsBoxID) |
@@ -224,42 +224,6 @@ |
myDropzone.enqueueFile(file); |
}; |
|
// Set the ID of the tags input. |
const tagsBoxID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
|
file |
.previewElement |
.querySelector('#tags') |
.setAttribute('id', tagsBoxID); |
|
$('#' + tagsBoxID).tagsinput('refresh'); |
}).on('totaluploadprogress', (progress) => { |
document |
.querySelector('#total-progress .progress-bar') |
.style |
.width = progress + '%'; |
}).on('sending', (file) => { |
// Show the total progress bar when upload starts |
document.querySelector("#total-progress") |
.style |
.opacity = 1; |
|
// And disable the start button. |
file |
.previewElement |
.querySelector('.start') |
.setAttribute('disabled', 'disabled'); |
}).on('queuecomplete', (progress) => { |
document.querySelector('#total-progress') |
.style |
.opacity = '0'; |
}).on('success', (file, data) => { |
// Serialize JSON to object. |
data = JSON.parse(data); |
|
// Set the ID of the URL box. |
const boxURLID = '_' + Math |
.random() |
@@ -267,18 +231,9 @@ |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#URL") |
.value = location.protocol |
.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.hash); |
|
file |
.previewElement |
.querySelector('#URL') |
.setAttribute('id', boxURLID) |
|
.querySelector('#file-upload-url') |
.setAttribute('id', boxURLID); |
|
// Set the ID of the delete URL box. |
const deleteBoxURLID = '_' + Math |
.random() |
@@ -286,19 +241,9 @@ |
.substr(2, 9); |
file |
.previewElement |
.querySelector('#deleteURL') |
.value = location.protocol.concat('//') |
.concat(window.location.hostname) |
.concat('/') |
.concat(data.timestamp) |
.concat('/') |
.concat(data.hash); |
|
file |
.previewElement |
.querySelector('#deleteURL') |
.setAttribute('id', deleteBoxURLID) |
|
.querySelector('#file-delete-url') |
.setAttribute('id', deleteBoxURLID); |
|
// Set the ID of the URL clipboard button. |
const clipButtonID = '_' + Math |
.random() |
@@ -343,44 +288,103 @@ |
.previewElement |
.querySelector('#btn-mailto') |
.setAttribute('id', mailToButtonID); |
|
// Set the ID of the facebook button. |
const faceBookButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
|
file |
.previewElement |
.querySelector('#btn-facebook') |
.setAttribute('id', faceBookButtonID); |
|
// Set the ID of the tags input. |
const tagsBoxID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
|
file |
.previewElement |
.querySelector('#file-tags') |
.setAttribute('id', tagsBoxID); |
|
// Refresh the tags input. |
$('#' + tagsBoxID).tagsinput('refresh'); |
|
}).on('totaluploadprogress', (progress) => { |
document |
.querySelector('#total-progress .progress-bar') |
.style |
.width = progress + '%'; |
}).on('sending', (file) => { |
// Show the total progress bar when upload starts |
document.querySelector("#total-progress") |
.style |
.opacity = 1; |
|
// And disable the start button. |
file |
.previewElement |
.querySelector('.start') |
.setAttribute('disabled', 'disabled'); |
}).on('queuecomplete', (progress) => { |
document.querySelector('#total-progress') |
.style |
.opacity = '0'; |
}).on('success', (file, data) => { |
// Serialize JSON to object. |
data = JSON.parse(data); |
|
file |
.previewElement |
.querySelector(".upload-url") |
.value = location.protocol |
.concat("//") |
.concat(window.location.hostname) |
.concat("/") |
.concat(data.hash); |
|
file |
.previewElement |
.querySelector('.delete-url') |
.value = location.protocol.concat('//') |
.concat(window.location.hostname) |
.concat('/') |
.concat(data.timestamp) |
.concat('/') |
.concat(data.hash); |
|
file |
.previewElement |
.querySelector('.start') |
.setAttribute('disabled', 'disabled'); |
file |
.previewElement |
.querySelector('.cancel') |
.setAttribute('disabled', 'disabled'); |
|
$('#' + mailToButtonID).on('click', () => { |
|
// Enable the mailto button. |
$('.url-mailto-button').on('click', () => { |
window.location.href = "mailto:?subject="+ |
encodeURIComponent("Can't scratch this!") + "&body=" + |
encodeURIComponent($('#' + boxURLID).val()); |
encodeURIComponent($('.upload-url').val()); |
}); |
|
// Set the ID of the facebook button. |
const faceBookButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
|
file |
.previewElement |
.querySelector('#btn-facebook') |
.setAttribute('id', faceBookButtonID); |
|
|
// Enable or disable the facebook opengraph URL. |
switch(data.opengraph) { |
case true: |
// Enable the facebook button. |
file |
.previewElement |
.querySelector('#' + faceBookButtonID) |
.querySelector('.url-facebook-button') |
.removeAttribute('disabled'); |
|
// Change the URL when the user clicks the button. |
$('#' + faceBookButtonID).on('click', () => { |
$('#' + boxURLID) |
$('.url-facebook-button').on('click', () => { |
$('.upload-url') |
.val( |
location.protocol.concat('//') |
.concat(window.location.hostname) |
@@ -395,7 +399,7 @@ |
// Disable the facebook button. |
file |
.previewElement |
.querySelector('#' + faceBookButtonID) |
.querySelector('.url-facebook-button') |
.setAttribute('disabled', 'disabled'); |
break; |
} |