Juan Acosta Juan Acosta - 1 year ago 281
jQuery Question

BlueImp jQuery File Upload preview improvement to thumbnails

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.

enter image description here

They talk about modify this function in jquery.fileupload-ui.js

_renderPreviews: function (data) {
data.context.find('.preview').each(function (index, elm) {

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.

Answer Source

At the end, I could not modify the preview functionality in the control. enter image description here

However, I achieve some customization in the second render of the items uploaded after finished. enter image description here 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"))
                    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
                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";
                    case "JPG":
                        //icon = "JPEG-File-icon-128.png";
                    case "WBMP":
                        //icon = "Illustrator-File-icon128.png";
                    case "BMP":
                        //icon = "BMP-File-icon-128.png";
                    case "TIF":
                        //icon = "Web-File-icon-128.png";
                    case "JP2":
                        //icon = "Vector-File-icon-128.png";
                    case "JBIG2":
                        //icon = "Vector-File-icon-128.png";
                    case "EMF":
                        //icon = "Photoshop-File-icon-128.png";
                    case "GIF":
                        //icon = "GIF-File-icon-128.png";
                    case "PNG":
                        //icon = "PNG-File-icon-128.png";
                    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";
                    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";
                        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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download