javascriptjqueryfilethumbnailsblueimp

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) {
                $(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.


Solution

  • 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"))
                {
                    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