Fix #1097: Add support for previewing Office file formats

CHANGE.md

@@ -3,8 +3,11 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.4.6 (_under development_)
 
-**Date:** 02-Oct-2017
+**Date:** 03-Oct-2017
 
+- (enh #1097): Add support for previewing Office file formats (e.g. docx, xlsx, pptx). 
+    - Supports all common formats that google docs can view.
+    - Available only for initial preview content (where the document is accessible via a public web link).
 - Update README to include updated cover images for bootstrap-fileinput themes (with Bootstrap 4.x support).
 - (enh #1096): Update Czech language folder and code to ISO code `cs`.
 - (bug #1095): Fix resize image when used with non JPEG images (silently ignoring `piexif` errors).

js/fileinput.js

@@ -606,7 +606,7 @@
             var self = this, tMain1, tMain2, tPreview, tFileIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse,
                 tModalMain, tModal, tProgress, tSize, tFooter, tActions, tActionDelete, tActionUpload, tActionDownload,
                 tActionZoom, tActionDrag, tIndicator, tTagBef, tTagBef1, tTagBef2, tTagAft, tGeneric, tHtml, tImage,
-                tText, tVideo, tAudio, tFlash, tObject, tPdf, tOther, tZoomCache, vDefaultDim;
+                tText, tOffice, tVideo, tAudio, tFlash, tObject, tPdf, tOther, tZoomCache, vDefaultDim;
             tMain1 = '{preview}\n' +
                 '<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>\n' +
                 '<div class="input-group {class}">\n' +
@@ -700,6 +700,8 @@
                 'alt="{caption}" {style}>\n';
             tText = '<textarea class="kv-preview-data file-preview-text" title="{caption}" readonly {style}>' +
                 '{data}</textarea>\n';
+            tOffice = '<iframe class="kv-preview-data file-preview-office" ' +
+                'src="https://docs.google.com/gview?url={data}&embedded=true" {style}></iframe>';
             tVideo = '<video class="kv-preview-data file-preview-video" controls {style}>\n' +
                 '<source src="{data}" type="{type}">\n' + $h.DEFAULT_PREVIEW + '\n</video>\n';
             tAudio = '<audio class="kv-preview-data file-preview-audio" controls {style}>\n<source src="{data}" ' +
@@ -747,6 +749,7 @@
                     html: tHtml,
                     image: tImage,
                     text: tText,
+                    office: tOffice,
                     video: tVideo,
                     audio: tAudio,
                     flash: tFlash,
@@ -760,6 +763,7 @@
                     image: {width: "auto", height: "auto", 'max-width': "100%", 'max-height': "100%"},
                     html: {width: "213px", height: "160px"},
                     text: {width: "213px", height: "160px"},
+                    office: {width: "213px", height: "160px"},
                     video: {width: "213px", height: "160px"},
                     audio: {width: "100%", height: "30px"},
                     flash: {width: "213px", height: "160px"},
@@ -771,6 +775,7 @@
                     image: {width: "auto", height: "auto", 'max-width': "100%", 'max-height': "100%"},
                     html: {width: "100%", height: "160px"},
                     text: {width: "100%", height: "160px"},
+                    office: {width: "100%", height: "160px"},
                     video: {width: "100%", height: "auto"},
                     audio: {width: "100%", height: "30px"},
                     flash: {width: "100%", height: "auto"},
@@ -782,6 +787,7 @@
                     image: {width: "auto", height: "auto", 'max-width': "100%", 'max-height': "100%"},
                     html: vDefaultDim,
                     text: vDefaultDim,
+                    office: {width: "100%", height: "100%", 'max-width': "100%", 'min-height': "480px"},
                     video: {width: "auto", height: "100%", 'max-width': "100%"},
                     audio: {width: "100%", height: "30px"},
                     flash: {width: "auto", height: "480px"},
@@ -800,6 +806,12 @@
                         return $h.compare(vType, 'text.*') || $h.compare(vName, /\.(xml|javascript)$/i) ||
                             $h.compare(vName, /\.(txt|md|csv|nfo|ini|json|php|js|css)$/i);
                     },
+                    office: function (vType, vName) {
+                        return $h.compare(vType, 'msword') || $h.compare(vType, 'ms-excel') ||
+                            $h.compare(vType, 'ms-powerpoint') ||
+                            $h.compare(vType, 'vnd.openxmlformats-officedocument') ||
+                            $h.compare(vName, /\.(doc|docx|rtf|odt|xls|xlsx|ods|ppt|pptx|pps|pot|potx)$/i);
+                    },
                     video: function (vType, vName) {
                         return $h.compare(vType, 'video.*') && ($h.compare(vType, /(ogg|mp4|mp?g|mov|webm|3gp)$/i) ||
                             $h.compare(vName, /\.(og?|mp4|webm|mp?g|mov|3gp)$/i));