I just integrate the basic UI example into one app. What I want to achieve is to add a specific thumbnails for some of the files that cannot be render in the preview. For instance, I will like to add some images for word, excels, ppt, and pdfs. I want to get a fixed image.
I know how to generate previews of this files, but first I want to try something simple.
I was checking this question Blueimp Jquery File Upload : Doesn't show thumbnail preview image
In my case the control previews videos and images properly.
They talk about modify this function in jquery.fileupload-ui.js
_renderPreviews: function (data) {
data.context.find('.preview').each(function (index, elm) {
$(elm).append(data.files[index].preview);
});
},
That's the only part that I have to modify to make this work?
If anyone could explain to me, how is the internal flow of the control to generate the preview of the images. I will really appreciate it.
At the end, I could not modify the preview functionality in the control.
However, I achieve some customization in the second render of the items uploaded after finished. It looks better that before. For achieving this, I modified
public ActionResult GetThumbnailFile(string folderServerPath,string name, bool thumbnail = false)
{
var file = GetFile(name, folderServerPath);
var contentType = MimeMapping.GetMimeMapping(file.Name);
return thumbnail ? Thumb(file, contentType) : File(file.FullName, contentType);
}
private ActionResult Thumb(FileInfo file, string contentType)
{
if (contentType.StartsWith("image"))
{
try
{
using (var img = Image.FromFile(file.FullName))
{
var thumbHeight = (int)(img.Height * (ThumbSize / (double)img.Width));
using (var thumb = img.GetThumbnailImage(ThumbSize, thumbHeight, () => false, IntPtr.Zero))
{
var ms = new MemoryStream();
thumb.Save(ms, img.RawFormat);
ms.Position = 0;
return File(ms, contentType);
}
}
}
catch (Exception ex)
{
// todo log exception
}
}
else
{
switch (file.Extension.ToUpperInvariant())
{
case ".LOG":
return File("~/Images/general_documents_preview/txt-icon-128.png", contentType);
case ".PDF":
return File("~/Images/general_documents_preview/pdf-icon-128.png", contentType);
case "JPEG":
//icon = "JPEG-File-icon-128.png";
break;
case "JPG":
//icon = "JPEG-File-icon-128.png";
break;
case "WBMP":
//icon = "Illustrator-File-icon128.png";
break;
case "BMP":
//icon = "BMP-File-icon-128.png";
break;
case "TIF":
//icon = "Web-File-icon-128.png";
break;
case "JP2":
//icon = "Vector-File-icon-128.png";
break;
case "JBIG2":
//icon = "Vector-File-icon-128.png";
break;
case "EMF":
//icon = "Photoshop-File-icon-128.png";
break;
case "GIF":
//icon = "GIF-File-icon-128.png";
break;
case "PNG":
//icon = "PNG-File-icon-128.png";
break;
case "TXT":
return File("~/Images/general_documents_preview/txt-icon-128.png", contentType);
case ".DOC":
return File("~/Images/general_documents_preview/doc-icon-128.png", contentType);
//icon = "doc-icon-128.png";
case ".DOCX":
return File("~/Images/general_documents_preview/docx-icon-128.png", contentType);
//icon = "docx-icon-128.png";
case ".PST":
return File("~/Images/general_documents_preview/pst-icon-128.png", contentType);
//icon = "pst-icon-128.png";
case ".PPT":
return File("~/Images/general_documents_preview/ppt-icon-128.png", contentType);
//icon = "ppt-icon-128.png";
case ".PPTX":
return File("~/Images/general_documents_preview/pptx-icon-128.png", contentType);
//icon = "pptx-icon-128.png";
case ".HTML":
return File("~/Images/general_documents_preview/html-icon-128.png", contentType);
//icon = "html-icon-128.png";
case ".RTF":
return File("~/Images/general_documents_preview/rtf-icon-128.png", contentType);
//icon = "rtf-icon-128.png";
case ".DLL":
return File("~/Images/general_documents_preview/dll-icon-128.png", contentType);
//icon = "dll-icon-128.png";
case "EML":
//icon = "eml-icon-128.png";
break;
case ".FLA":
return File("~/Images/general_documents_preview/fla-icon-128.png", contentType);
case ".SWF":
return File("~/Images/general_documents_preview/fla-icon-128.png", contentType);
//icon = "fla-icon-128.png";
case ".MP3":
return File("~/Images/general_documents_preview/mp3-icon-128.png", contentType);
case ".XLS":
return File("~/Images/general_documents_preview/xls-icon-128.png", contentType);
//icon = "xls-icon-128.png";
case ".XLSX":
return File("~/Images/general_documents_preview/xlsx-icon-128.png", contentType);
//icon = "xlsx-icon-128.png";
default://unknow
return File("~/Images/general_documents_preview/bin-icon-128.png", contentType);
}
}
return Redirect($"https://placehold.it/{ThumbSize}?text={Url.Encode(file.Extension)}");
}
You can check the changes downloading the original example project from https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc/tree/master/src/jquploadz