Hello !
I want to use Syncfusion File Upload control to upload images and to save this images as byte[] into a database file.
Please tell me how can I resize the uploaded file to a smaller one !
I tried to use System.Drawing but webassembly does not allow it...
I also have found a sample but I don't know how to make it work on what I need. I want this code only to resize the image...
https://www.prowaretech.com/Computer/Blazor/Examples/WebApi/UploadImages
Thank You Very Much !
Here is the code I am using :
@page "/ImageUploadTest"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Calendars
@using System.IO;
@using System.ComponentModel.DataAnnotations
<h3>ImageUploadTest</h3>
<div class="form-group">
<SfUploader @ref="UploadObj" ID="upload_vafa1" AllowMultiple="false" AutoUpload="true" AllowedExtensions=".png,.jpg,.jpeg,.bmp">
<UploaderEvents ValueChange="OnChangeUpload" FileSelected="OnSelect"></UploaderEvents>
<UploaderTemplates>
<Template Context="HttpContext">
<table>
<tr>
<td>
@if (files.Count > 0)
{
<img class="upload-image" id="img" alt="Preview Image @(HttpContext.Name)"
src="@((files.Where(item => item.Name == HttpContext.Name).FirstOrDefault()?.Path))">
}
</td>
</tr>
</table>
<span class="e-icons e-file-remove-btn" id="removeIcon" title="Remove" @onclick="@onFileRemove"></span>
</Template>
</UploaderTemplates>
</SfUploader>
</div>
<!--STYLE IMAGE UPLOAD-->
<style>
.upload-image {
width: 500px;
height: 350px;
display: inline-flex;
background-size: contain;
margin: 7px;
text-align: center;
line-height: 10;
border-radius: 5px;
}
.upload-image:after {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: inherit;
height: inherit;
background: lightgray url('http://via.placeholder.com/300?text=Loading...') no-repeat center;
color: transparent;
border-radius: 5px;
}
</style>
@code {
SfUploader UploadObj;
List<fileInfo> files = new List<fileInfo>();
//byte_file_data - store the data from the uploaded image file
public byte[] byte_file_data { get; set; }
public class fileInfo
{
public string Path { get; set; }
public string Name { get; set; }
public double Size { get; set; }
}
public void OnChangeUpload(UploadChangeEventArgs args)
{
foreach (var file in args.Files)
{
var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), "Images");
var fullPath = Path.Combine(pathToSave, file.FileInfo.Name);
byte[] bytes = file.Stream.ToArray();
string base64 = Convert.ToBase64String(bytes);
files.Add(new fileInfo() { Path = @"data:image/" + file.FileInfo.Type + ";base64," + base64, Name = file.FileInfo.Name, Size = file.FileInfo.Size });
//byte_file_data - store the data from the uploaded image file
//byte_file_data will be written to a database
byte_file_data = bytes;
// Please tell me how to resize the base64 file
}
}
public void OnSelect(SelectedEventArgs args)
{
UploadObj.Upload();
}
private async Task onFileRemove()
{
await UploadObj.Remove();
files = new List<fileInfo>();
}
}
