Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support file paste on the upload page #344

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Support file paste on the upload page #344

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 100 additions & 7 deletions pages/pages.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,41 @@ var Upload = `
body {
margin: 10px;
}
#pasted-file-container .pasted-file-wrapper {
border: 2px dashed #00AEEF;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
#pasted-file-container .pasted-file-wrapper::before {
content: 'Pasted File';
position: absolute;
top: -12px;
left: 10px;
background: #fff;
padding: 0 5px;
font-size: 12px;
color: #00AEEF;
}
#pasted-file-container .file-info {
display: flex;
align-items: center;
}
#pasted-file-container .file-icon {
font-size: 50px;
margin-right: 10px;
color: #00AEEF;
}
#pasted-file-container .file-name {
font-size: 16px;
word-break: break-all;
}
#pasted-file-container img {
display: block;
margin: 10px 10px 10px 0;
max-width: calc(100vw - 20px - 20px - 4px);
height: auto;
}
</style>
</head>

Expand Down Expand Up @@ -149,7 +184,7 @@ var Upload = `
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="check-send-text">
<label class="form-check-label" for="check-send-text">Show text options</label>
<label class="form-check-label" for="check-send-text">Show paste options</label>
</div>
<div id="send-text-form" style="display: none">
<div class="form-group">
Expand All @@ -160,11 +195,12 @@ var Upload = `
</div>
<div class="form-group">
<label for="plaintext-text">
Text
Text (You can paste files here)
</label>
<textarea class="form-control" id="plaintext-text"></textarea>
<textarea class="form-control" id="plaintext-text" placeholder="You can paste files here"></textarea>
</div>
</div>
<div id="pasted-file-container"></div>
<div class="form-group">
<input class="btn btn-primary form-control form-control-lg" type="submit"
id="submit" name="submit" value="Transfer">
Expand All @@ -185,13 +221,63 @@ var Upload = `
}
</script>
<script>
var uploadForm = document.getElementById('upload-form')
var uploadForm = document.getElementById('upload-form');
var pastedFiles = [];
var textArea = document.getElementById('plaintext-text');
var pastedFileContainer = document.getElementById('pasted-file-container');

textArea.addEventListener('paste', function (e) {
var clipboardData = e.clipboardData || window.clipboardData;
var items = clipboardData.items;
var foundFile = false;

for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.kind === 'file') {
var blob = item.getAsFile();
foundFile = true;
e.preventDefault();
pastedFiles.push(blob);

var fileWrapper = document.createElement('div');
fileWrapper.className = 'pasted-file-wrapper';

if (blob.type.startsWith('image/')) {
// Display image
var img = document.createElement('img');
img.src = URL.createObjectURL(blob);
fileWrapper.appendChild(img);
} else {
// Display file icon and name
var fileInfo = document.createElement('div');
fileInfo.className = 'file-info';

var fileIcon = document.createElement('span');
fileIcon.className = 'file-icon';
fileIcon.innerHTML = '&#128196;'; // Document icon

var fileName = document.createElement('span');
fileName.className = 'file-name';
fileName.textContent = blob.name || 'Pasted File';

fileInfo.appendChild(fileIcon);
fileInfo.appendChild(fileName);
fileWrapper.appendChild(fileInfo);
}

pastedFileContainer.appendChild(fileWrapper);
}
}

if (foundFile) {
e.preventDefault();
}
});

uploadForm.addEventListener('submit', function(e) {
e.preventDefault()
e.preventDefault();

var xhr = new XMLHttpRequest()
// Put the request response HTML ('Done' page) on the window
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.write(xhr.response)
Expand All @@ -212,6 +298,13 @@ var Upload = `
formData.append("textFile", blob, filename + ".txt")
}

// Append pasted files to the form data
for (var i = 0; i < pastedFiles.length; i++) {
var file = pastedFiles[i];
var fileName = file.name || ('pasted_file_' + i);
formData.append('files', file, fileName);
}

xhr.open("POST", "{{.Route}}")
xhr.send(formData)
})
Expand Down