Rank 1
Iron
How do I get the thumbnail as a image preview instead of the spinning wheel.
Say I am uploading an Image - k-file-preview shows this link --> https://demos.telerik.com/aspnet-mvc/imagebrowser/thumbnail?path=thumbnail1.jpg
and upon insert the image into the editor the image url shows as --> https://demos.telerik.com/aspnet-mvc/content/userfiles/images/thumbnail1.jpg
does this mean we have thumbnails for the uploaded image stored in another folder, and upon calling thumbnail path it looks for the path n gives the preview??
then again for asp .net core i see k-listview-item i do not see a k-file-preview but on asp .net mvc and for jQuery I can see the thumbnail on demo --> https://demos.telerik.com/aspnet-mvc/editor/imagebrowser
1 Answer, 1 is accepted
Hello Shashank,
Generally, when the ImageBrowser opens, and the images Read request is completed, the Editor requests the thumbnail of each loaded image through the specified Action in the Thumbnail() configuration. The thumbnail request URL is formatted as follows:
https://XXXXX/{ActionName}?path={imageName} --> for example, https://XXXX/CreateThumbnail?path=testImage.jpg
The "CreateThumbnail" Action retrieves the thumbnail version of the image and the actual images are stored in the folder, which is specified in the Image() configuration (for example, "~/Content/UserFiles/Images/{0}", where {0} is the image name placeholder).
Here is an example configuration for your reference:
Editor:
@(Html.Kendo().Editor()
.Name("editor")
...
.ImageBrowser(imageBrowser => imageBrowser
.Thumbnail("CreateThumbnail", "Home")
.Image($"~/content/UserFiles/images/{{0}}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
)
)Controller:
public class HomeController : Controller {
protected readonly IWebHostEnvironment _hostingEnvironment;
public HomeController(IWebHostEnvironment hostingEnvironment) {
_hostingEnvironment = hostingEnvironment;
}
public IActionResult Index() {
return View();
}
[HttpGet("CreateThumbnail")]
public IActionResult CreateThumbnail(string path) { //"path" is the name of the image, which thumbnail should be created
var physicalPath = Path.Combine(this._hostingEnvironment.WebRootPath, "content","UserFiles", "images", path); //access the original image through the specified folder ("/content/UserFiles/images/path")
return ReturnThumbnail(physicalPath); //returns the created thumbnail back to the client
}
public byte[] CreateThumbnail(byte[] imageBytes, int width, int height) { //creates the thumbnail for the image
using (var image = Image.Load(imageBytes)) {
image.Mutate(x => x.Resize(new ResizeOptions {
Size = new Size(width, height),
Mode = ResizeMode.Max
}));
using (var stream = new MemoryStream()) {
image.Save(stream, new JpegEncoder());
return stream.ToArray();
}
}
}
private FileContentResult ReturnThumbnail(string physicalPath) {
byte[] imageBytes = System.IO.File.ReadAllBytes(physicalPath); //get the image bytes array
var thumbnailBytes = CreateThumbnail(imageBytes, 80, 80);
return File(thumbnailBytes, GetContentType(Path.GetFileName(physicalPath)), Path.GetFileName(physicalPath));
}
// Get content type.
public string GetContentType(string path) {
var types = GetMimeTypes();
var ext = Path.GetExtension(path).ToLowerInvariant();
return types[ext];
}
// Get mime types.
private Dictionary<string, string> GetMimeTypes() {
return new Dictionary<string, string>{
{".png", "image/png"},
{".jpg", "image/jpeg"},
{".jpeg", "image/jpeg"}
...
};
}
}Notice, that the aforementioned implementation relies heavily on obtaining the files from the "wwwroot" folder of the application and further configuring the thumbnail backend implementation based on the same files.
This is due to the fact that a third-party library would be required in order to supplement custom-created thumbnails and it would be up to the developer to induct such a library with its respective implementation based on his requirements and needs.
In addition, I am attaching a runnable sample based on this example for your reference.
Regarding the thumbnails in the Telerik UI for ASP.NET Core Editor File and Image Browser demo, they are not configured in the Editor's ImageBrowser configuration.
I hope the provided example will help you to load the images thumbnails correctly.
Regards, Mihaela Progress Telerik
Rank 1
Iron
Or it is that we have to use a 3rd party library to generate the thumbnails for the images uploaded.
I have been searching a lot for the proper approach on asp net core using a blob storage approach and it is fatiguing to get an answer. Please help me out with some guidance here.
You could set up the images thumbnails by specifying an Action through the Thumbnail() method in the Editor's ImageBrowser configuration. For a runnable sample, refer to the attached demo project (Telerik UI for ASP.NET Core application) in my initial reply.
Regarding Azure Blob Storage, basically, the ImageBrowser tool depends entirely on the implemented Controller. Thus, any extended functionality (e.g., handling Azure Blob Storage) should be implemented as a custom solution in a custom Controller. That being said, you need to use the Azure API in order to achieve this. Also, the following example may be helpful to your scenario: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/editor/database-image-browser. Here the ImageBrowser's Controller is extended to get content from a database. The same approach should be followed in order to get content from Azure, but using the Azure API.