We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<EjsUploader @ref="uploderObj" ID="UploadFiles" ModelType="@model">
<UploaderEvents OnUploadStart="OnFileUploading"FileSelected="onFileSelected" OnRemove="OnFileRemove"></UploaderEvents>
<UploaderTemplates>
<Template>
<ul class="e-upload-files">
<li class="e-upload-file-list" data-file-name="@((context as FileInfo).Name)" title="@((context as FileInfo).Status)">
<span class="wrapper">
<img class="upload-image" alt="Image"
src="@((context as FileInfo).RawFile)">
</span>
<div class="name file-name" title="@((context asFileInfo).Name)">@((context as FileInfo).Name)</div>
<div class="file-size">@((context as FileInfo).Size)</div>
<span class="e-icons e-file-remove-btn" id="removeIcon"@onclick="@removeFile" title="Remove"></span>
<span class="e-upload-icon e-icons e-file-remove-btn"@onclick="@uploadFile" title="Upload" id="iconUpload"></span>
</li>
</ul>
</Template>
</UploaderTemplates>
<UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save"RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
</EjsUploader>
public void OnFileUploading(Syncfusion.EJ2.Blazor.Inputs.UploadingEventArgs args)
{
args.Cancel = true;
}
|
|
<EjsUploader @ref="uploderObj" ID="UploadFiles" ModelType="typeof(FileInfo)"> |
|
<div class="col-lg-12 control-section">
<div class="control_wrapper">
<div id="dropArea" style="height: auto; overflow: auto">
<SfUploader @ref="uploderObj" ID="UploadFiles" AllowedExtensions=".png,.jpeg,jpg">
<UploaderEvents ValueChange="onChange" OnRemove="onRemove"></UploaderEvents>
<UploaderTemplates>
<Template>
<span class="wrapper">
<img class="upload-image" alt="Image"
src="@(files.Count >0 ? files.Where(item=>item.Name == context.Name)?.FirstOrDefault()?.Path : string.Empty)">
</span>
<div class="name file-name" title="@(context.Name)">@(context.Name)</div>
<div class="file-size">@(context.Size)</div>
<span class="e-icons e-file-remove-btn remove" id="removeIcon" title="Remove"></span>
<span class="e-upload-icon e-icons e-file-remove-btn" title="Upload" id="iconUpload"></span>
</Template>
</UploaderTemplates>
</SfUploader>
</div>
</div>
</div>
<style>
.control_wrapper {
width: 350px;
margin: 0 auto;
}
</style>
<style>
.control_wrapper {
width: 350px;
margin: 0 auto;
}
</style>
@code {
private SfUploader uploderObj;
private object selectedFile { get; set; }
List<fileInfo> files = new List<fileInfo>();
public class fileInfo
{
public string Path { get; set; }
public string Name { get; set; }
public double Size { get; set; }
}
public void onChange(UploadChangeEventArgs args)
{
files = new List<fileInfo>();
foreach (var file in args.Files)
{
var path = Path.GetFullPath("wwwroot\\Images\\") + file.FileInfo.Name;
FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);
file.Stream.WriteTo(filestream);
filestream.Close();
file.Stream.Close();
files.Add(new fileInfo() { Path = "/Images/" + file.FileInfo.Name , Name = file.FileInfo.Name, Size = file.FileInfo.Size });
}
}
public void onRemove(RemovingEventArgs args)
{
foreach (var removeFile in args.FilesData)
{
if (File.Exists(Path.Combine(@"wwwroot\Images", removeFile.Name)))
{
File.Delete(Path.Combine(@"wwwroot\Images\", removeFile.Name));
}
}
}
public void uploadFile(MouseEventArgs args)
{
this.uploderObj.Upload(selectedFile);
}
} |
Hi Vijay,We try to prepare the sample based on your required scenario. We will validate and update the further details on two business days September 15th,2020. We appreciate your patience until then.Regards,Sureshkumar P
