There is a nice example with picture wall. However in example third party service is used that is not that much help in case there is a need to store pictures locally or in DB. How to implement the same in case of pictures would be stored locally with using native InputFile?
I saw there is a solution with single image file and I am already using it in my project, that is working nice. However how to implement the same in case there are multiple files?
This is what I have got so far, but I am missing gallery layout in case of multiple images. Also I am missing preview option and remove option. How to get these icons on image hover? How to make images appear like in gallery?
<span class="ant-upload-picture-card-wrapper" >
<label class="avatar-uploader" for="upload">
<div class="ant-upload ant-upload-select-picture-card ant-upload-select">
<div tabindex="0" class="ant-upload" style="position:relative;">
<InputFile OnChange="@this.OnFileSelection" multiple id="upload" hidden accept=".png,.jpg,.jpeg,.gif" />
<div class="row">
@if (this.ImgUrls.Any())
{
@foreach (var url in this.ImgUrls)
{
<div>
<img src="@url" alt="avatar" style="width: 100%" />
</div>
}
}
else
{
<div>
<Icon Spin="this.loading" Type="@(this.loading?"Loading":"plus")"></Icon>
<div className="ant-upload-text">Upload</div>
</div>
}
</div>
</div>
</div>
</label>
</span>
Here is what I am trying to achieve:
