Adding icon as preview for .doc, .xls, ... files

[fleduc]

Hello Sebastian.

I'm currently integrating your jQuery-File-Upload into my project. I've seen many other File-Upload widgets but yours is really great and easy to use.

I would like to know if it is possible, when I upload other files than image files, to have a preview. Lets say, I would load Word or Excel files. I understand that it might be difficult or mearely impossible to see the details of a Word file preview, but I was thinking more about showing icons instead of previews for non-image files.

Is this possible with your widget? If not, are you thinking about putting such functionality in your widget? If not, could you point me where I could modify the code to add this functionality.

Thanks and have a nice day.

[blueimp]

Showing icons for files other than images is fairly easy, by setting a CSS class based on the file type. You can do so by editing the upload/download templates (located in index.html) and edit the preview table cell with the following code:

<td class="preview"><span class="{%=file.type && (o.options.previewSourceFileTypes.test(file.type) && 'fade' || 'icon icon-' + file.type.replace(/\W/g, '-'))%}"></span></td>

If the previewSourceFileTypes options matches the file type, the fade class is set (which enables blending in the image previews), else the icon class and a custom icon-* class based on the file type, e.g. icon-application-pdf for PDF files.

Next you only need to set a background image according to the file types you are going to accept for upload via CSS:

.icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    background-repeat: no-repeat;
}

.icon-application-pdf {
    background: url('icon-pdf.png');
}

[fleduc]

Thank you very much. It working well. If we could upload images on GitHub, I could show you the results... There is only one thing weird, It doesn't produce any class for zip and rar files?

Here are the class I could resolve from sample files:

/* DOCUMENTS FILES / .icon-application-pdf { background: url('../img/pdf.png'); } .icon-text-plain { background: url('../img/txt.png'); } / MS Office < 2007 / .icon-application-msword { background: url('../img/doc.png'); } .icon-application-vnd-ms-excel { background: url('../img/xls.png'); } .icon-application-vnd-visio { background: url('../img/vsd.png'); } .icon-application-vnd-ms-powerpoint { background: url('../img/ppt.png'); } / MS Office > 2007 / .icon-application-vnd-openxmlformats-officedocument-spreadsheetml-sheet { background: url('../img/xlsx.png'); } icon-application-vnd-openxmlformats-officedocument-presentationml-presentation { background: url('../img/pptx.png'); } icon-application-vnd-openxmlformats-officedocument-wordprocessingml-document { background: url('../img/docx.png'); } / AUDIO FILES / icon-audio-x-ms-wma { background: url('../img/wma.png'); } .icon-audio-mp3 { background: url('../img/mp3.png'); } .icon-video-x-ms-wmv { background: url('../img/wmv.png'); } / VIDEO FILES / .icon-video-avi { background: url('../img/avi.png'); } .icon-video-mpeg { background: url('../img/mpeg.png'); } / ARCHIVE FILES */ .icon-application-x-gzip { background: url('../img/tar.png'); }

Do you have any clue on this issue? How could we resolve it?

Thanks.

Francois

[fleduc]

Other question, is how to get these new icons to display when the files are uploaded on the server side, since there was no thumbnails made?

How to identify these files and stick these new classes to files that doesn't have thumbnails?

Thanks.

[fleduc]

I'm still stucked with this one and tried a lot of things without success. Any help would be appreciated.

Thanks

[blueimp]

Please read: https://github.com/blueimp/jQuery-File-Upload#support