438 lines
14 KiB
PHP
438 lines
14 KiB
PHP
<div class="gallery-container">
|
|
<div class="gallery-header">
|
|
<a href="<?php echo Config::get('URL'); ?>gallery/my" class="gallery-back">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="19" y1="12" x2="5" y2="12"></line>
|
|
<polyline points="12 19 5 12 12 5"></polyline>
|
|
</svg>
|
|
Back to My Images
|
|
</a>
|
|
</div>
|
|
|
|
<div class="gallery-form-container">
|
|
<h1>Upload Image</h1>
|
|
|
|
<?php $this->renderFeedbackMessages(); ?>
|
|
|
|
<form id="upload-form" method="post" action="<?php echo Config::get('URL'); ?>gallery/upload" enctype="multipart/form-data" class="gallery-form">
|
|
<div class="gallery-form-group">
|
|
<label class="gallery-form-label">Image File</label>
|
|
<div class="gallery-upload-zone" id="upload-zone">
|
|
<input type="file" name="image" id="image-input" accept="image/jpeg,image/png,image/gif,image/webp" required>
|
|
<div class="gallery-upload-placeholder">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
<span>Click or drag image here</span>
|
|
<small>JPG, PNG, GIF, WebP - Max 10MB</small>
|
|
</div>
|
|
<div class="gallery-upload-preview" id="upload-preview" style="display: none;">
|
|
<img id="preview-image" src="" alt="Preview">
|
|
<button type="button" class="gallery-upload-remove" id="remove-preview">×</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gallery-form-group">
|
|
<label class="gallery-form-label" for="title">Title</label>
|
|
<input type="text" name="title" id="title" class="gallery-form-input" placeholder="Give your image a title">
|
|
</div>
|
|
|
|
<div class="gallery-form-group">
|
|
<label class="gallery-form-label" for="description">Description</label>
|
|
<textarea name="description" id="description" class="gallery-form-textarea" rows="4" placeholder="Add a description (optional)"></textarea>
|
|
</div>
|
|
|
|
<div class="gallery-form-group">
|
|
<label class="gallery-form-checkbox">
|
|
<input type="checkbox" name="is_public" value="1" checked>
|
|
<span>Make this image public</span>
|
|
</label>
|
|
<small class="gallery-form-hint">Public images are visible to everyone in the gallery</small>
|
|
</div>
|
|
|
|
<div class="gallery-form-actions">
|
|
<button type="submit" name="submit_upload" class="gallery-btn gallery-btn-primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
Upload Image
|
|
</button>
|
|
<a href="<?php echo Config::get('URL'); ?>gallery/my" class="gallery-btn gallery-btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Progress Overlay -->
|
|
<div id="upload-overlay" class="upload-overlay" style="display: none;">
|
|
<div class="upload-modal">
|
|
<!-- Progress State -->
|
|
<div id="upload-progress-state" class="upload-state">
|
|
<div class="upload-icon uploading">
|
|
<svg class="upload-spinner" viewBox="0 0 50 50">
|
|
<circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
|
|
</svg>
|
|
</div>
|
|
<h2>Uploading...</h2>
|
|
<div class="upload-progress-bar">
|
|
<div class="upload-progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<p class="upload-progress-text"><span id="progress-percent">0</span>%</p>
|
|
</div>
|
|
|
|
<!-- Success State -->
|
|
<div id="upload-success-state" class="upload-state" style="display: none;">
|
|
<div class="upload-icon success">
|
|
<svg class="checkmark" viewBox="0 0 52 52">
|
|
<circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
|
|
<path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
|
</svg>
|
|
</div>
|
|
<h2>Upload Complete!</h2>
|
|
<p>Your image has been uploaded successfully.</p>
|
|
<p class="upload-redirect">Redirecting<span class="dots"></span></p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="upload-error-state" class="upload-state" style="display: none;">
|
|
<div class="upload-icon error">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
|
</svg>
|
|
</div>
|
|
<h2>Upload Failed</h2>
|
|
<p id="error-message">Something went wrong. Please try again.</p>
|
|
<button type="button" class="gallery-btn gallery-btn-primary" onclick="hideOverlay()">Try Again</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.upload-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.upload-modal {
|
|
text-align: center;
|
|
padding: 40px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.upload-state {
|
|
animation: slideUp 0.4s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.upload-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto 24px;
|
|
}
|
|
|
|
.upload-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.upload-icon.uploading svg {
|
|
stroke: #333;
|
|
}
|
|
|
|
.upload-icon.success svg {
|
|
stroke: #4CAF50;
|
|
}
|
|
|
|
.upload-icon.error svg {
|
|
stroke: #dc3545;
|
|
}
|
|
|
|
.upload-spinner {
|
|
animation: rotate 1.5s linear infinite;
|
|
}
|
|
|
|
.upload-spinner circle {
|
|
stroke: #333;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: 0;
|
|
animation: dash 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
|
|
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
|
|
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
|
|
}
|
|
|
|
.upload-modal h2 {
|
|
margin: 0 0 16px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.upload-modal p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.upload-progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 20px 0 12px;
|
|
}
|
|
|
|
.upload-progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #333, #555);
|
|
border-radius: 4px;
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.upload-progress-text {
|
|
font-family: monospace;
|
|
font-size: 16px !important;
|
|
font-weight: 600;
|
|
color: #333 !important;
|
|
}
|
|
|
|
/* Checkmark Animation */
|
|
.checkmark {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
stroke-width: 2;
|
|
stroke: #4CAF50;
|
|
stroke-miterlimit: 10;
|
|
box-shadow: inset 0px 0px 0px #4CAF50;
|
|
animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
|
|
}
|
|
|
|
.checkmark-circle {
|
|
stroke-dasharray: 166;
|
|
stroke-dashoffset: 166;
|
|
stroke-width: 2;
|
|
stroke-miterlimit: 10;
|
|
stroke: #4CAF50;
|
|
fill: none;
|
|
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
|
|
}
|
|
|
|
.checkmark-check {
|
|
transform-origin: 50% 50%;
|
|
stroke-dasharray: 48;
|
|
stroke-dashoffset: 48;
|
|
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
|
}
|
|
|
|
@keyframes stroke {
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
@keyframes scale {
|
|
0%, 100% { transform: none; }
|
|
50% { transform: scale3d(1.1, 1.1, 1); }
|
|
}
|
|
|
|
@keyframes fill {
|
|
100% { box-shadow: inset 0px 0px 0px 40px rgba(76, 175, 80, 0.1); }
|
|
}
|
|
|
|
.upload-redirect {
|
|
margin-top: 20px !important;
|
|
font-size: 13px !important;
|
|
color: #999 !important;
|
|
animation: pulse 1.5s ease infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.dots::after {
|
|
content: '';
|
|
animation: dots 1.5s steps(4, end) infinite;
|
|
}
|
|
|
|
@keyframes dots {
|
|
0% { content: ''; }
|
|
25% { content: '.'; }
|
|
50% { content: '..'; }
|
|
75% { content: '...'; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('upload-form');
|
|
const uploadZone = document.getElementById('upload-zone');
|
|
const imageInput = document.getElementById('image-input');
|
|
const uploadPreview = document.getElementById('upload-preview');
|
|
const previewImage = document.getElementById('preview-image');
|
|
const removePreview = document.getElementById('remove-preview');
|
|
const placeholder = uploadZone.querySelector('.gallery-upload-placeholder');
|
|
|
|
const overlay = document.getElementById('upload-overlay');
|
|
const progressState = document.getElementById('upload-progress-state');
|
|
const successState = document.getElementById('upload-success-state');
|
|
const errorState = document.getElementById('upload-error-state');
|
|
const progressFill = document.getElementById('progress-fill');
|
|
const progressPercent = document.getElementById('progress-percent');
|
|
const errorMessage = document.getElementById('error-message');
|
|
|
|
// Image preview
|
|
imageInput.addEventListener('change', function(e) {
|
|
if (this.files && this.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
previewImage.src = e.target.result;
|
|
placeholder.style.display = 'none';
|
|
uploadPreview.style.display = 'block';
|
|
};
|
|
reader.readAsDataURL(this.files[0]);
|
|
}
|
|
});
|
|
|
|
removePreview.addEventListener('click', function() {
|
|
imageInput.value = '';
|
|
previewImage.src = '';
|
|
placeholder.style.display = 'flex';
|
|
uploadPreview.style.display = 'none';
|
|
});
|
|
|
|
// Drag and drop
|
|
uploadZone.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
this.classList.add('dragover');
|
|
});
|
|
|
|
uploadZone.addEventListener('dragleave', function(e) {
|
|
e.preventDefault();
|
|
this.classList.remove('dragover');
|
|
});
|
|
|
|
uploadZone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
this.classList.remove('dragover');
|
|
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
|
imageInput.files = e.dataTransfer.files;
|
|
imageInput.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
// Form submission with AJAX
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
if (!imageInput.files || !imageInput.files[0]) {
|
|
alert('Please select an image to upload');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData(form);
|
|
formData.append('submit_upload', '1');
|
|
|
|
// Show overlay with progress state
|
|
showOverlay('progress');
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
// Progress tracking
|
|
xhr.upload.addEventListener('progress', function(e) {
|
|
if (e.lengthComputable) {
|
|
const percent = Math.round((e.loaded / e.total) * 100);
|
|
progressFill.style.width = percent + '%';
|
|
progressPercent.textContent = percent;
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('load', function() {
|
|
if (xhr.status === 200) {
|
|
try {
|
|
const response = JSON.parse(xhr.responseText);
|
|
if (response.success) {
|
|
showOverlay('success');
|
|
// Redirect after animation
|
|
setTimeout(function() {
|
|
window.location.href = '<?php echo Config::get('URL'); ?>gallery/view/' + response.image_id;
|
|
}, 2000);
|
|
} else {
|
|
showOverlay('error', response.message || 'Upload failed');
|
|
}
|
|
} catch (e) {
|
|
showOverlay('error', 'Invalid server response');
|
|
}
|
|
} else {
|
|
showOverlay('error', 'Server error: ' + xhr.status);
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('error', function() {
|
|
showOverlay('error', 'Network error. Please check your connection.');
|
|
});
|
|
|
|
xhr.open('POST', form.action);
|
|
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
|
xhr.send(formData);
|
|
});
|
|
|
|
function showOverlay(state, message) {
|
|
overlay.style.display = 'flex';
|
|
progressState.style.display = 'none';
|
|
successState.style.display = 'none';
|
|
errorState.style.display = 'none';
|
|
|
|
if (state === 'progress') {
|
|
progressState.style.display = 'block';
|
|
progressFill.style.width = '0%';
|
|
progressPercent.textContent = '0';
|
|
} else if (state === 'success') {
|
|
successState.style.display = 'block';
|
|
} else if (state === 'error') {
|
|
errorState.style.display = 'block';
|
|
if (message) {
|
|
errorMessage.textContent = message;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.hideOverlay = function() {
|
|
overlay.style.display = 'none';
|
|
};
|
|
});
|
|
</script>
|