Image Upload
Upload images with live preview, client-side cropping, clipboard paste, and automatic thumbnail generation.
Image Upload Features
CoreUpload includes a complete client-side image processing pipeline. Resize, crop, rotate, compress, and watermark images in the browser before upload. Read EXIF metadata and auto-orient mobile photos. Preview images, paste from clipboard, and extract video thumbnails - all with zero server round-trips.
Instant thumbnails + lightbox
Aspect-ratio lock, any angle
Max width/height, quality control
Read metadata, fix rotation
Text overlay before upload
Ctrl+V from clipboard
Extract frame from MP4/WebM
Min/max width & height
Live Demo
Upload image files to see preview and thumbnail generation in action.
Code Example
Configure the uploader to accept only image file types using the allowed-extensions attribute.
Razor Page (Tag Helper)
<core-upload asp-upload-url="/api/upload/upload"
asp-extensions=".jpg,.jpeg,.png,.gif,.bmp,.webp"
asp-max-size="10MB"
asp-multiple="true"
asp-drop-zone="true"
asp-thumbnails="true"
asp-auto-orient="true">
</core-upload>Client-Side Image Resize
<core-upload asp-upload-url="/api/upload/upload"
asp-extensions=".jpg,.png,.webp"
asp-resize-max-width="1920"
asp-resize-max-height="1080"
asp-resize-quality="0.85"
asp-resize-format="jpeg"
asp-auto-orient="true"
asp-multiple="true"
asp-thumbnails="true">
</core-upload>Image Crop with Aspect Ratio
<core-upload asp-upload-url="/api/upload/upload"
asp-extensions=".jpg,.png"
asp-crop="true"
asp-crop-aspect-ratio="16:9"
asp-thumbnails="true">
</core-upload>Server-Side Configuration
builder.Services.AddCoreUpload(options =>
{
options.TempDirectory = Path.Combine(
builder.Environment.ContentRootPath, "uploads", "images-temp");
options.AllowedExtensions = new[]
{
".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"
};
options.AllowedMimeTypes = new[]
{
"image/jpeg", "image/png", "image/gif", "image/bmp", "image/webp"
};
options.MaxFileSizeBytes = 10L * 1024 * 1024; // 10 MB
});