add drag and drop and delete confirmation
This commit is contained in:
Daniela Arcese
parent
24abf669b0
commit
796577ee2b
3 changed files with 109 additions and 20 deletions
|
|
@ -1,16 +1,18 @@
|
|||
const FileSender = require('./fileSender');
|
||||
|
||||
$(document).ready(function() {
|
||||
// reset copy button
|
||||
let copyBtn = $('#copy-btn');
|
||||
copyBtn.attr('disabled', false);
|
||||
copyBtn.html('Copy');
|
||||
|
||||
$('#page-one').show();
|
||||
$('#file-list').hide();
|
||||
$('#upload-progress').hide();
|
||||
$('#share-link').hide();
|
||||
|
||||
// copy link to clipboard
|
||||
copyBtn.click(() => {
|
||||
console.log('copied');
|
||||
var aux = document.createElement('input');
|
||||
aux.setAttribute('value', $('#link').attr('value'));
|
||||
document.body.appendChild(aux);
|
||||
|
|
@ -20,6 +22,8 @@ $(document).ready(function() {
|
|||
copyBtn.attr('disabled', true);
|
||||
copyBtn.html('Copied!');
|
||||
});
|
||||
|
||||
// link back to home page
|
||||
$('.send-new').click(() => {
|
||||
$('#page-one').show();
|
||||
$('#file-list').show();
|
||||
|
|
@ -29,25 +33,46 @@ $(document).ready(function() {
|
|||
copyBtn.html('Copy');
|
||||
});
|
||||
|
||||
let onChange = event => {
|
||||
const file = event.target.files[0];
|
||||
|
||||
// on file upload by browse or drag & drop
|
||||
window.onUpload = event => {
|
||||
event.preventDefault();
|
||||
let file = "";
|
||||
if (event.type == "drop"){
|
||||
file = event.dataTransfer.files[0];
|
||||
} else {
|
||||
file = event.target.files[0];
|
||||
}
|
||||
let fileList = $('#uploaded-files');
|
||||
let row = document.createElement('tr');
|
||||
let name = document.createElement('td');
|
||||
let link = document.createElement('td');
|
||||
let expiry = document.createElement('td');
|
||||
|
||||
let del = document.createElement('td');
|
||||
let btn = document.createElement('button');
|
||||
let popupDiv = document.createElement('div');
|
||||
let $popupText = $('<span>', {'class': 'popuptext'});
|
||||
let cellText = document.createTextNode(file.name);
|
||||
let progress = document.createElement('p');
|
||||
|
||||
name.appendChild(cellText);
|
||||
|
||||
let progress = document.createElement('p');
|
||||
// create delete button
|
||||
btn.innerHTML = 'x';
|
||||
btn.classList.add('delete-btn');
|
||||
|
||||
// create popup
|
||||
popupDiv.classList.add('popup');
|
||||
$popupText.html("<span class='del-file'>Delete</span><span class='nvm'> Nevermind</span>");
|
||||
|
||||
// add data cells to table row
|
||||
row.appendChild(name);
|
||||
row.appendChild(link);
|
||||
row.appendChild(expiry);
|
||||
fileList.append(row);
|
||||
popupDiv.appendChild(btn);
|
||||
$(popupDiv).append($popupText);
|
||||
del.appendChild(popupDiv);
|
||||
row.appendChild(del);
|
||||
fileList.append(row); //add row to table
|
||||
|
||||
const fileSender = new FileSender(file);
|
||||
fileSender.on('progress', percentComplete => {
|
||||
|
|
@ -62,25 +87,34 @@ $(document).ready(function() {
|
|||
$('#link').attr('value', url);
|
||||
link.innerHTML = url;
|
||||
localStorage.setItem(info.fileId, info.deleteToken);
|
||||
let del = document.createElement('td');
|
||||
let btn = document.createElement('button');
|
||||
btn.innerHTML = 'x';
|
||||
btn.classList.add('delete-btn');
|
||||
btn.addEventListener('click', e => {
|
||||
|
||||
// delete file
|
||||
console.log($popupText.first());
|
||||
$popupText.find(".del-file").click(e => {
|
||||
FileSender.delete(
|
||||
info.fileId,
|
||||
localStorage.getItem(info.fileId)
|
||||
).then(() => {
|
||||
e.target.parentNode.parentNode.remove();
|
||||
e.target.parentNode.parentNode.parentNode.parentNode.remove();
|
||||
localStorage.removeItem(info.fileId);
|
||||
});
|
||||
});
|
||||
del.appendChild(btn);
|
||||
row.appendChild(del);
|
||||
|
||||
// show popup
|
||||
btn.addEventListener('click', e => {
|
||||
$popupText.toggleClass('show');
|
||||
});
|
||||
// hide popup
|
||||
$popupText.find(".nvm").click( e => {
|
||||
$popupText.toggleClass('show');
|
||||
});
|
||||
$('#upload-progress').hide();
|
||||
$('#share-link').show();
|
||||
});
|
||||
};
|
||||
|
||||
window.onChange = onChange;
|
||||
window.allowDrop = function(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ input, select, textarea, button {
|
|||
.title {
|
||||
font-size: 14px;
|
||||
width: 80%;
|
||||
margin: 50px auto;
|
||||
margin: 40px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -108,6 +108,59 @@ td {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Popup container */
|
||||
.popup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* The actual popup (appears on top) */
|
||||
.popup .popuptext {
|
||||
visibility: hidden;
|
||||
width: 160px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -80px;
|
||||
}
|
||||
|
||||
/* Popup arrow */
|
||||
.popup .popuptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Toggle this class when clicking on the popup container (hide and show the popup) */
|
||||
.popup .show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadeIn 1s;
|
||||
animation: fadeIn 1s
|
||||
}
|
||||
|
||||
/* Add animation (fade in the popup) */
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {opacity: 0;}
|
||||
to {opacity:1 ;}
|
||||
}
|
||||
|
||||
/** upload-progress **/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="title">
|
||||
Share your files quickly, privately and securely.
|
||||
</div>
|
||||
<div class="upload-window">
|
||||
<div class="upload-window" ondrop="onUpload(event)" ondragover="allowDrop(event)">
|
||||
<div id="upload-img"><img src="/resources/upload.svg"/></div>
|
||||
<div>
|
||||
DRAG & DROP
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<div id="browse">
|
||||
<form method="post" action="upload" enctype="multipart/form-data">
|
||||
<label for="file-upload" class="file-upload">browse</label>
|
||||
<input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
|
||||
<input id="file-upload" type="file" onchange="onUpload(event)" name="fileUploaded" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +41,9 @@
|
|||
<th width=18%>Expires in</th>
|
||||
<th width=7%>Delete</th>
|
||||
</tr>
|
||||
<div data-role="popup" id="popupArrow" data-arrow="true">
|
||||
<!-- <div class="popup">
|
||||
<span class="popuptext" id="myPopup">Popup text...</span>
|
||||
</div> -->
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue