Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -336,6 +336,73 @@ HTML_CONTENT = """
|
|
336 |
font-size: 0.9rem;
|
337 |
}
|
338 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
339 |
@media (max-width: 480px) {
|
340 |
.container {
|
341 |
padding: 1.5rem;
|
@@ -354,10 +421,19 @@ HTML_CONTENT = """
|
|
354 |
font-size: 0.7rem;
|
355 |
}
|
356 |
|
357 |
-
.modal-content {
|
358 |
width: 95%;
|
359 |
margin: 10% auto;
|
360 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
361 |
}
|
362 |
</style>
|
363 |
</head>
|
@@ -366,7 +442,7 @@ HTML_CONTENT = """
|
|
366 |
<h1>Radd PRO Uploader</h1>
|
367 |
<form id="uploadForm">
|
368 |
<div id="dropZone" class="drop-zone">
|
369 |
-
|
370 |
<label for="file" class="btn">Choose File</label>
|
371 |
<p>or drag and drop file here/paste image</p>
|
372 |
</div>
|
@@ -379,6 +455,7 @@ HTML_CONTENT = """
|
|
379 |
<div class="file-types">
|
380 |
Allowed file types: .zip, .mp4, .txt, .mp3, all image types, .pdf
|
381 |
</div>
|
|
|
382 |
</div>
|
383 |
|
384 |
<div id="embedModal" class="modal">
|
@@ -393,6 +470,14 @@ HTML_CONTENT = """
|
|
393 |
</div>
|
394 |
</div>
|
395 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
396 |
<script>
|
397 |
const fileInput = document.getElementById('file');
|
398 |
const fileName = document.getElementById('fileName');
|
@@ -402,9 +487,12 @@ HTML_CONTENT = """
|
|
402 |
const resultContainer = document.getElementById('resultContainer');
|
403 |
const dropZone = document.getElementById('dropZone');
|
404 |
const modal = document.getElementById('embedModal');
|
405 |
-
const
|
|
|
406 |
const embedLinkInput = document.getElementById('embedLink');
|
407 |
const uploadBtn = document.getElementById('uploadBtn');
|
|
|
|
|
408 |
|
409 |
fileInput.addEventListener('change', handleFileSelect);
|
410 |
|
@@ -415,7 +503,7 @@ HTML_CONTENT = """
|
|
415 |
}
|
416 |
});
|
417 |
|
418 |
-
|
419 |
e.preventDefault();
|
420 |
dropZone.classList.add('drag-over');
|
421 |
});
|
@@ -441,14 +529,25 @@ HTML_CONTENT = """
|
|
441 |
}
|
442 |
});
|
443 |
|
444 |
-
span.onclick = function() {
|
445 |
modal.style.display = "none";
|
446 |
}
|
447 |
|
|
|
|
|
|
|
|
|
448 |
window.onclick = function(event) {
|
449 |
if (event.target == modal) {
|
450 |
modal.style.display = "none";
|
451 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
452 |
}
|
453 |
|
454 |
function handleFileSelect(e) {
|
@@ -488,6 +587,7 @@ HTML_CONTENT = """
|
|
488 |
const response = JSON.parse(xhr.responseText);
|
489 |
if (response.url) {
|
490 |
addResultLink(response.url, file.name);
|
|
|
491 |
resetUploadState();
|
492 |
return;
|
493 |
} else {
|
@@ -504,18 +604,15 @@ HTML_CONTENT = """
|
|
504 |
|
505 |
xhr.send(formData);
|
506 |
|
507 |
-
// Wait for the request to complete
|
508 |
await new Promise((resolve, reject) => {
|
509 |
xhr.onloadend = resolve;
|
510 |
xhr.onerror = reject;
|
511 |
});
|
512 |
|
513 |
-
break;
|
514 |
} catch (error) {
|
515 |
console.error('Upload error:', error);
|
516 |
-
// Wait for a short time before retrying
|
517 |
await new Promise(resolve => setTimeout(resolve, 1000));
|
518 |
-
// The loop will continue, retrying the upload
|
519 |
}
|
520 |
}
|
521 |
}
|
@@ -603,6 +700,63 @@ HTML_CONTENT = """
|
|
603 |
document.execCommand('copy');
|
604 |
alert('Embed link copied to clipboard!');
|
605 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
606 |
</script>
|
607 |
</body>
|
608 |
</html>
|
|
|
336 |
font-size: 0.9rem;
|
337 |
}
|
338 |
|
339 |
+
.history-btn {
|
340 |
+
display: inline-block;
|
341 |
+
padding: 8px 16px;
|
342 |
+
font-size: 0.9rem;
|
343 |
+
font-weight: 500;
|
344 |
+
color: #ffffff;
|
345 |
+
background-color: #2a2a2a;
|
346 |
+
border: none;
|
347 |
+
border-radius: 3px;
|
348 |
+
cursor: pointer;
|
349 |
+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
350 |
+
margin-top: 1rem;
|
351 |
+
}
|
352 |
+
|
353 |
+
.history-btn:hover {
|
354 |
+
background-color: #3a3a3a;
|
355 |
+
box-shadow: 0 0 10px rgba(200, 200, 200, 0.3);
|
356 |
+
}
|
357 |
+
|
358 |
+
.history-modal {
|
359 |
+
display: none;
|
360 |
+
position: fixed;
|
361 |
+
z-index: 3;
|
362 |
+
left: 0;
|
363 |
+
top: 0;
|
364 |
+
width: 100%;
|
365 |
+
height: 100%;
|
366 |
+
overflow: auto;
|
367 |
+
background-color: rgba(0,0,0,0.8);
|
368 |
+
}
|
369 |
+
|
370 |
+
.history-modal-content {
|
371 |
+
background-color: #1e1e1e;
|
372 |
+
margin: 10% auto;
|
373 |
+
padding: 20px;
|
374 |
+
border: 1px solid #333;
|
375 |
+
width: 90%;
|
376 |
+
max-width: 600px;
|
377 |
+
border-radius: 10px;
|
378 |
+
color: #e0e0e0;
|
379 |
+
animation: modalFadeIn 0.3s;
|
380 |
+
}
|
381 |
+
|
382 |
+
.history-item {
|
383 |
+
display: flex;
|
384 |
+
justify-content: space-between;
|
385 |
+
align-items: center;
|
386 |
+
padding: 10px;
|
387 |
+
border-bottom: 1px solid #333;
|
388 |
+
transition: background-color 0.3s ease;
|
389 |
+
}
|
390 |
+
|
391 |
+
.history-item:hover {
|
392 |
+
background-color: #2a2a2a;
|
393 |
+
}
|
394 |
+
|
395 |
+
.history-item-name {
|
396 |
+
flex-grow: 1;
|
397 |
+
margin-right: 10px;
|
398 |
+
word-break: break-all;
|
399 |
+
}
|
400 |
+
|
401 |
+
.history-item-actions {
|
402 |
+
display: flex;
|
403 |
+
gap: 5px;
|
404 |
+
}
|
405 |
+
|
406 |
@media (max-width: 480px) {
|
407 |
.container {
|
408 |
padding: 1.5rem;
|
|
|
421 |
font-size: 0.7rem;
|
422 |
}
|
423 |
|
424 |
+
.modal-content, .history-modal-content {
|
425 |
width: 95%;
|
426 |
margin: 10% auto;
|
427 |
}
|
428 |
+
|
429 |
+
.history-item {
|
430 |
+
flex-direction: column;
|
431 |
+
align-items: flex-start;
|
432 |
+
}
|
433 |
+
|
434 |
+
.history-item-actions {
|
435 |
+
margin-top: 10px;
|
436 |
+
}
|
437 |
}
|
438 |
</style>
|
439 |
</head>
|
|
|
442 |
<h1>Radd PRO Uploader</h1>
|
443 |
<form id="uploadForm">
|
444 |
<div id="dropZone" class="drop-zone">
|
445 |
+
<input type="file" name="file" id="file" class="file-input" accept=".zip,.mp4,.txt,.mp3,image/*,.pdf" required>
|
446 |
<label for="file" class="btn">Choose File</label>
|
447 |
<p>or drag and drop file here/paste image</p>
|
448 |
</div>
|
|
|
455 |
<div class="file-types">
|
456 |
Allowed file types: .zip, .mp4, .txt, .mp3, all image types, .pdf
|
457 |
</div>
|
458 |
+
<button id="historyBtn" class="history-btn">View Upload History</button>
|
459 |
</div>
|
460 |
|
461 |
<div id="embedModal" class="modal">
|
|
|
470 |
</div>
|
471 |
</div>
|
472 |
|
473 |
+
<div id="historyModal" class="history-modal">
|
474 |
+
<div class="history-modal-content">
|
475 |
+
<span class="close">×</span>
|
476 |
+
<h2>Upload History</h2>
|
477 |
+
<div id="historyList"></div>
|
478 |
+
</div>
|
479 |
+
</div>
|
480 |
+
|
481 |
<script>
|
482 |
const fileInput = document.getElementById('file');
|
483 |
const fileName = document.getElementById('fileName');
|
|
|
487 |
const resultContainer = document.getElementById('resultContainer');
|
488 |
const dropZone = document.getElementById('dropZone');
|
489 |
const modal = document.getElementById('embedModal');
|
490 |
+
const historyModal = document.getElementById('historyModal');
|
491 |
+
const span = document.getElementsByClassName("close");
|
492 |
const embedLinkInput = document.getElementById('embedLink');
|
493 |
const uploadBtn = document.getElementById('uploadBtn');
|
494 |
+
const historyBtn = document.getElementById('historyBtn');
|
495 |
+
const historyList = document.getElementById('historyList');
|
496 |
|
497 |
fileInput.addEventListener('change', handleFileSelect);
|
498 |
|
|
|
503 |
}
|
504 |
});
|
505 |
|
506 |
+
dropZone.addEventListener('dragover', (e) => {
|
507 |
e.preventDefault();
|
508 |
dropZone.classList.add('drag-over');
|
509 |
});
|
|
|
529 |
}
|
530 |
});
|
531 |
|
532 |
+
span[0].onclick = function() {
|
533 |
modal.style.display = "none";
|
534 |
}
|
535 |
|
536 |
+
span[1].onclick = function() {
|
537 |
+
historyModal.style.display = "none";
|
538 |
+
}
|
539 |
+
|
540 |
window.onclick = function(event) {
|
541 |
if (event.target == modal) {
|
542 |
modal.style.display = "none";
|
543 |
}
|
544 |
+
if (event.target == historyModal) {
|
545 |
+
historyModal.style.display = "none";
|
546 |
+
}
|
547 |
+
}
|
548 |
+
|
549 |
+
historyBtn.onclick = function() {
|
550 |
+
showHistory();
|
551 |
}
|
552 |
|
553 |
function handleFileSelect(e) {
|
|
|
587 |
const response = JSON.parse(xhr.responseText);
|
588 |
if (response.url) {
|
589 |
addResultLink(response.url, file.name);
|
590 |
+
saveToHistory(file.name, response.url);
|
591 |
resetUploadState();
|
592 |
return;
|
593 |
} else {
|
|
|
604 |
|
605 |
xhr.send(formData);
|
606 |
|
|
|
607 |
await new Promise((resolve, reject) => {
|
608 |
xhr.onloadend = resolve;
|
609 |
xhr.onerror = reject;
|
610 |
});
|
611 |
|
612 |
+
break;
|
613 |
} catch (error) {
|
614 |
console.error('Upload error:', error);
|
|
|
615 |
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
616 |
}
|
617 |
}
|
618 |
}
|
|
|
700 |
document.execCommand('copy');
|
701 |
alert('Embed link copied to clipboard!');
|
702 |
}
|
703 |
+
|
704 |
+
function saveToHistory(fileName, url) {
|
705 |
+
let history = JSON.parse(localStorage.getItem('uploadHistory')) || [];
|
706 |
+
history.unshift({ fileName, url, timestamp: new Date().toISOString() });
|
707 |
+
if (history.length > 50) history = history.slice(0, 50);
|
708 |
+
localStorage.setItem('uploadHistory', JSON.stringify(history));
|
709 |
+
}
|
710 |
+
|
711 |
+
function showHistory() {
|
712 |
+
const history = JSON.parse(localStorage.getItem('uploadHistory')) || [];
|
713 |
+
historyList.innerHTML = '';
|
714 |
+
history.forEach(item => {
|
715 |
+
const historyItem = document.createElement('div');
|
716 |
+
historyItem.className = 'history-item';
|
717 |
+
|
718 |
+
const itemName = document.createElement('span');
|
719 |
+
itemName.className = 'history-item-name';
|
720 |
+
itemName.textContent = item.fileName;
|
721 |
+
historyItem.appendChild(itemName);
|
722 |
+
|
723 |
+
const actionsContainer = document.createElement('div');
|
724 |
+
actionsContainer.className = 'history-item-actions';
|
725 |
+
|
726 |
+
const copyBtn = document.createElement('button');
|
727 |
+
copyBtn.textContent = 'Copy Link';
|
728 |
+
copyBtn.className = 'small-btn';
|
729 |
+
copyBtn.onclick = () => {
|
730 |
+
navigator.clipboard.writeText(window.location.origin + item.url).then(() => {
|
731 |
+
alert('Link copied to clipboard!');
|
732 |
+
});
|
733 |
+
};
|
734 |
+
actionsContainer.appendChild(copyBtn);
|
735 |
+
|
736 |
+
const openBtn = document.createElement('button');
|
737 |
+
openBtn.textContent = 'Open';
|
738 |
+
openBtn.className = 'small-btn';
|
739 |
+
openBtn.onclick = () => {
|
740 |
+
window.open(window.location.origin + item.url, '_blank');
|
741 |
+
};
|
742 |
+
actionsContainer.appendChild(openBtn);
|
743 |
+
|
744 |
+
if (item.fileName.toLowerCase().endsWith('.mp4')) {
|
745 |
+
const embedBtn = document.createElement('button');
|
746 |
+
embedBtn.textContent = 'Embed';
|
747 |
+
embedBtn.className = 'small-btn';
|
748 |
+
embedBtn.onclick = () => {
|
749 |
+
showEmbedModal(item.url);
|
750 |
+
historyModal.style.display = "none";
|
751 |
+
};
|
752 |
+
actionsContainer.appendChild(embedBtn);
|
753 |
+
}
|
754 |
+
|
755 |
+
historyItem.appendChild(actionsContainer);
|
756 |
+
historyList.appendChild(historyItem);
|
757 |
+
});
|
758 |
+
historyModal.style.display = "block";
|
759 |
+
}
|
760 |
</script>
|
761 |
</body>
|
762 |
</html>
|