upload page added
This commit is contained in:
parent
534a84e51a
commit
2d159874f1
259
html/user.html
259
html/user.html
|
|
@ -1,45 +1,240 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chunked File Upload</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>File Upload with Drag and Drop</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.drop-area-container {
|
||||
text-align: center;
|
||||
}
|
||||
.drop-area {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #888;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.drop-area.active {
|
||||
border-color: #38a169;
|
||||
color: #38a169;
|
||||
}
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
.file-input-label {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.upload-button {
|
||||
padding: 10px 20px;
|
||||
background-color: #38a169;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cancel-button {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.progress-bar-container {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 20px;
|
||||
background-color: #38a169;
|
||||
width: 0;
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="file" id="fileInput">
|
||||
<button onclick="uploadFile()">Upload</button>
|
||||
<div class="drop-area-container">
|
||||
<div class="drop-area" id="dropArea">
|
||||
<p>Drag & Drop files here</p>
|
||||
</div>
|
||||
<label for="fileInput" class="file-input-label">Select files</label>
|
||||
<input type="file" id="fileInput" class="file-input" multiple>
|
||||
<button id="uploadButton" class="upload-button">Upload</button>
|
||||
|
||||
<script>
|
||||
async function uploadFile() {
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const file = fileInput.files[0];
|
||||
const chunkSize = 10 * 1024 * 1024; // 10 MB
|
||||
const totalChunks = Math.ceil(file.size / chunkSize);
|
||||
<div class="file-list" id="fileList"></div>
|
||||
|
||||
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
|
||||
const start = chunkIndex * chunkSize;
|
||||
const end = Math.min(start + chunkSize, file.size);
|
||||
const chunk = file.slice(start, end);
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" id="progressBar">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('chunk', chunk);
|
||||
formData.append('filename', file.name);
|
||||
formData.append('chunkIndex', chunkIndex);
|
||||
formData.append('totalChunks', totalChunks);
|
||||
<script>
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const uploadButton = document.getElementById('uploadButton');
|
||||
const fileList = document.getElementById('fileList');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
let filesToUpload = []; // Array to store files to upload
|
||||
|
||||
const response = await fetch('/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
// Get the size limit from the URL parameter 'limit'
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const sizeLimit = parseInt(urlParams.get('limit')) || 10485760; // Default to 10MB if no limit specified
|
||||
|
||||
if (!response.ok) {
|
||||
console.error('Failed to upload chunk', chunkIndex);
|
||||
return;
|
||||
}
|
||||
}
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
console.log('File uploaded successfully');
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight() {
|
||||
dropArea.classList.add('active');
|
||||
}
|
||||
|
||||
function unhighlight() {
|
||||
dropArea.classList.remove('active');
|
||||
}
|
||||
|
||||
dropArea.addEventListener('drop', handleDrop, false);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
|
||||
addFilesToUpload(files);
|
||||
updateFileList();
|
||||
updateProgressBar();
|
||||
}
|
||||
|
||||
fileInput.addEventListener('change', function(e) {
|
||||
let files = this.files;
|
||||
|
||||
addFilesToUpload(files);
|
||||
updateFileList();
|
||||
updateProgressBar();
|
||||
});
|
||||
|
||||
function addFilesToUpload(newFiles) {
|
||||
filesToUpload = [...filesToUpload, ...newFiles];
|
||||
}
|
||||
|
||||
function updateFileList() {
|
||||
fileList.innerHTML = ''; // Clear previous file list
|
||||
|
||||
filesToUpload.forEach((file, index) => {
|
||||
const fileSize = getFileSize(file.size);
|
||||
const listItem = document.createElement('div');
|
||||
listItem.classList.add('file-item');
|
||||
listItem.innerHTML = `
|
||||
<span>${file.name} (${fileSize})</span>
|
||||
<button class="cancel-button" data-index="${index}">Cancel</button>
|
||||
`;
|
||||
fileList.appendChild(listItem);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.cancel-button').forEach(button => {
|
||||
button.addEventListener('click', removeFile, false);
|
||||
});
|
||||
}
|
||||
|
||||
function removeFile(e) {
|
||||
const index = e.target.dataset.index;
|
||||
filesToUpload.splice(index, 1);
|
||||
updateFileList();
|
||||
updateProgressBar();
|
||||
}
|
||||
|
||||
function updateProgressBar() {
|
||||
const totalSize = filesToUpload.reduce((acc, file) => acc + file.size, 0);
|
||||
const usedPercentage = (totalSize / sizeLimit) * 100;
|
||||
progressBar.style.width = `${Math.min(usedPercentage, 100)}%`;
|
||||
progressBar.textContent = `${Math.min(usedPercentage, 100).toFixed(2)}%`;
|
||||
|
||||
if (usedPercentage > 100) {
|
||||
progressBar.style.backgroundColor = '#dc3545'; // Red if over limit
|
||||
alert('Total file size exceeds the limit!');
|
||||
} else {
|
||||
progressBar.style.backgroundColor = '#38a169'; // Green if within limit
|
||||
}
|
||||
</script>
|
||||
}
|
||||
|
||||
function getFileSize(size) {
|
||||
if (size === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(size) / Math.log(k));
|
||||
return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
uploadButton.addEventListener('click', function() {
|
||||
if (filesToUpload.length > 0) {
|
||||
const totalSize = filesToUpload.reduce((acc, file) => acc + file.size, 0);
|
||||
if (totalSize > sizeLimit) {
|
||||
alert('Total file size exceeds the limit! Please remove some files.');
|
||||
} else {
|
||||
// Here you can send filesToUpload to the server or perform other actions
|
||||
console.log('Uploading files:', filesToUpload);
|
||||
alert('Files uploaded successfully!');
|
||||
// Clear the filesToUpload array and update the file list display
|
||||
filesToUpload = [];
|
||||
updateFileList();
|
||||
updateProgressBar();
|
||||
}
|
||||
} else {
|
||||
alert('Please select files to upload.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>File Upload with Drag and Drop</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.drop-area-container {
|
||||
text-align: center;
|
||||
}
|
||||
.drop-area {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #888;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.drop-area.active {
|
||||
border-color: #38a169;
|
||||
color: #38a169;
|
||||
}
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
.file-input-label {
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.upload-button {
|
||||
padding: 10px 20px;
|
||||
background-color: #38a169;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.file-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cancel-button {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="drop-area-container">
|
||||
<div class="drop-area" id="dropArea">
|
||||
<p>Drag & Drop files here</p>
|
||||
</div>
|
||||
<label for="fileInput" class="file-input-label">Select files</label>
|
||||
<input type="file" id="fileInput" class="file-input" multiple>
|
||||
<button id="uploadButton" class="upload-button">Upload</button>
|
||||
|
||||
<div class="file-list" id="fileList"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const dropArea = document.getElementById('dropArea');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const uploadButton = document.getElementById('uploadButton');
|
||||
const fileList = document.getElementById('fileList');
|
||||
let filesToUpload = []; // Array to store files to upload
|
||||
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight() {
|
||||
dropArea.classList.add('active');
|
||||
}
|
||||
|
||||
function unhighlight() {
|
||||
dropArea.classList.remove('active');
|
||||
}
|
||||
|
||||
dropArea.addEventListener('drop', handleDrop, false);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
|
||||
addFilesToUpload(files);
|
||||
updateFileList();
|
||||
}
|
||||
|
||||
fileInput.addEventListener('change', function(e) {
|
||||
let files = this.files;
|
||||
|
||||
addFilesToUpload(files);
|
||||
updateFileList();
|
||||
});
|
||||
|
||||
function addFilesToUpload(newFiles) {
|
||||
filesToUpload = [...filesToUpload, ...newFiles];
|
||||
}
|
||||
|
||||
function updateFileList() {
|
||||
fileList.innerHTML = ''; // Clear previous file list
|
||||
|
||||
filesToUpload.forEach((file, index) => {
|
||||
const fileSize = getFileSize(file.size);
|
||||
const listItem = document.createElement('div');
|
||||
listItem.classList.add('file-item');
|
||||
listItem.innerHTML = `
|
||||
<span>${file.name} (${fileSize})</span>
|
||||
<button class="cancel-button" data-index="${index}">Cancel</button>
|
||||
`;
|
||||
fileList.appendChild(listItem);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.cancel-button').forEach(button => {
|
||||
button.addEventListener('click', removeFile, false);
|
||||
});
|
||||
}
|
||||
|
||||
function removeFile(e) {
|
||||
const index = e.target.dataset.index;
|
||||
filesToUpload.splice(index, 1);
|
||||
updateFileList();
|
||||
}
|
||||
|
||||
function getFileSize(size) {
|
||||
if (size === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(size) / Math.log(k));
|
||||
return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
uploadButton.addEventListener('click', function() {
|
||||
if (filesToUpload.length > 0) {
|
||||
// Here you can send filesToUpload to the server or perform other actions
|
||||
console.log('Uploading files:', filesToUpload);
|
||||
alert('Files uploaded successfully!');
|
||||
// Clear the filesToUpload array and update the file list display
|
||||
filesToUpload = [];
|
||||
updateFileList();
|
||||
} else {
|
||||
alert('Please select files to upload.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
upload.go
32
upload.go
|
|
@ -59,6 +59,13 @@ func (d *UploadDatabase) commit(size int64, finalName string, lifefile time.Dura
|
|||
return id
|
||||
}
|
||||
|
||||
func (d *UploadDatabase) exists(id uuid.UUID) bool {
|
||||
d.mtx.Lock()
|
||||
defer d.mtx.Unlock()
|
||||
_, found := d.data[id]
|
||||
return found
|
||||
}
|
||||
|
||||
func (d *UploadDatabase) activate(id uuid.UUID) *UploadContext {
|
||||
d.mtx.Lock()
|
||||
defer d.mtx.Unlock()
|
||||
|
|
@ -69,7 +76,12 @@ func (d *UploadDatabase) activate(id uuid.UUID) *UploadContext {
|
|||
}
|
||||
|
||||
func (d *UploadDatabase) deactivate(id uuid.UUID) {
|
||||
}
|
||||
|
||||
func (d *UploadDatabase) getSize(id uuid.UUID) int64 {
|
||||
d.mtx.Lock()
|
||||
defer d.mtx.Unlock()
|
||||
return d.data[id].maxSize
|
||||
}
|
||||
|
||||
func initialize() {
|
||||
|
|
@ -127,7 +139,7 @@ func generateHandler(w http.ResponseWriter, r *http.Request) {
|
|||
http.Error(w, "Commit failed", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
uploadLink = fmt.Sprintf("https://localhost:8080/upload?key=%s", id)
|
||||
uploadLink = fmt.Sprintf("http://localhost:8080/upload?key=%s", id)
|
||||
|
||||
response := map[string]string{"uploadLink": uploadLink}
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
|
|
@ -138,7 +150,25 @@ func generateHandler(w http.ResponseWriter, r *http.Request) {
|
|||
}
|
||||
|
||||
func uploadHandler(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != "GET" {
|
||||
w.WriteHeader(http.StatusMethodNotAllowed)
|
||||
}
|
||||
|
||||
id, err := uuid.Parse(r.URL.Query().Get("key"))
|
||||
if err != nil || !db.exists(id) {
|
||||
http.ServeFile(w, r, "./html/user_bad.html")
|
||||
return
|
||||
}
|
||||
|
||||
if !r.URL.Query().Has("limit") {
|
||||
q := r.URL.Query()
|
||||
q.Set("limit", strconv.FormatInt(db.getSize(id), 10))
|
||||
r.URL.RawQuery = q.Encode()
|
||||
http.Redirect(w, r, r.URL.String(), http.StatusSeeOther)
|
||||
return
|
||||
}
|
||||
|
||||
http.ServeFile(w, r, "./html/user.html")
|
||||
}
|
||||
|
||||
func fileHandler(w http.ResponseWriter, r *http.Request) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue