SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WebPush-and-photo-upload-fixes

Browse Source
This commit is contained in:
sysadmin
2025-09-01 06:01:05 +01:00
parent 5eb7647faf
commit c8a55c143b
16 changed files with 2000 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
LittleShop/Areas/Admin/Controllers/ProductsController.cs
View File

@@ -59,6 +59,7 @@ public class ProductsController : Controller
var categories = await _categoryService.GetAllCategoriesAsync();
ViewData["Categories"] = categories.Where(c => c.IsActive);
ViewData["ProductId"] = id;
ViewData["ProductPhotos"] = product.Photos;
var model = new UpdateProductDto
{

91
LittleShop/Areas/Admin/Views/Products/Edit.cshtml
View File

@@ -4,6 +4,7 @@
ViewData["Title"] = "Edit Product";
var categories = ViewData["Categories"] as IEnumerable<LittleShop.DTOs.CategoryDto>;
var productId = ViewData["ProductId"];
var productPhotos = ViewData["ProductPhotos"] as IEnumerable<LittleShop.DTOs.ProductPhotoDto>;
}
<div class="row mb-4">
@@ -127,10 +128,43 @@
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">
<button type="submit" class="btn btn-primary" id="upload-photo-btn">
<i class="fas fa-upload"></i> Upload Photo
</button>
</form>
@if (productPhotos != null && productPhotos.Any())
{
<hr>
<h6><i class="fas fa-images"></i> Current Photos</h6>
<div class="row">
@foreach (var photo in productPhotos)
{
<div class="col-md-6 col-lg-4 mb-3">
<div class="card">
<img src="@photo.FilePath" class="card-img-top" style="height: 150px; object-fit: cover;" alt="@photo.AltText">
<div class="card-body p-2">
<small class="text-muted">@photo.FileName</small>
<form method="post" action="@Url.Action("DeletePhoto", new { id = productId, photoId = photo.Id })" class="mt-1">
@Html.AntiForgeryToken()
<button type="submit" class="btn btn-outline-danger btn-sm w-100"
onclick="return confirm('Delete this photo?')">
<i class="fas fa-trash"></i> Delete
</button>
</form>
</div>
</div>
</div>
}
</div>
}
else
{
<div class="text-muted text-center py-3">
<i class="fas fa-camera fa-2x mb-2"></i>
<p>No photos uploaded yet. Upload your first photo above.</p>
</div>
}
</div>
</div>
</div>
@@ -152,4 +186,57 @@
</div>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
// Photo upload enhancement
document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('file');
const uploadBtn = document.getElementById('upload-photo-btn');
const uploadForm = uploadBtn.closest('form');
// Preview selected file
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
console.log('Photo selected:', file.name, file.size, 'bytes');
// Validate file type
if (!file.type.startsWith('image/')) {
alert('Please select an image file (JPG, PNG, GIF, etc.)');
fileInput.value = '';
return;
}
// Validate file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
alert('File too large. Please select an image smaller than 5MB.');
fileInput.value = '';
return;
}
uploadBtn.classList.remove('btn-primary');
uploadBtn.classList.add('btn-success');
uploadBtn.innerHTML = '<i class="fas fa-check"></i> Ready to Upload';
} else {
uploadBtn.classList.remove('btn-success');
uploadBtn.classList.add('btn-primary');
uploadBtn.innerHTML = '<i class="fas fa-upload"></i> Upload Photo';
}
});
// Upload progress feedback
uploadForm.addEventListener('submit', function(e) {
if (!fileInput.files[0]) {
e.preventDefault();
alert('Please select a photo first');
return;
}
uploadBtn.disabled = true;
uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
});
});
</script>
}