Browse Source

Enhance Text, HTML preview fix #1632 fix #1635 fix #1636 fix #1637

Kartik Visweswaran 4 years ago
parent
commit
09546fb4e5
8 changed files with 25 additions and 67 deletions
  1. 4 0
      CHANGE.md
  2. 0 4
      README.md
  3. 0 5
      css/fileinput.css
  4. 0 0
      css/fileinput.min.css
  5. 21 39
      js/fileinput.js
  6. 0 0
      js/fileinput.min.js
  7. 0 19
      js/plugins/purify.js
  8. 0 0
      js/plugins/purify.min.js

+ 4 - 0
CHANGE.md

@@ -5,6 +5,10 @@ Change Log: `bootstrap-fileinput`
 
 **Date**: _under development_
 
+- (enh #1637): Remove dependency on DOM Purify Plugin.
+- (enh #1636): Enhance preview for PDF, Text & HTML.
+- (enh #1635): Enhance Text & HTML files initial preview to be read as links.
+- (bug #1632): Correct preview for plain text content.
 - (bug #1631): Correct modal dialog `aria-labelledby` binding.
 - (enh #1630): New `preProcessUpload` callback that can convert / encrypt file content before upload.
 - (enh #1627): Add bootstrap 4 progress bar animation.

+ 0 - 4
README.md

@@ -88,9 +88,6 @@ Step 1: Load the following assets in your header.
 <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
     This must be loaded before fileinput.min.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" type="text/javascript"></script>
-<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
-    HTML files. This must be loaded before fileinput.min.js -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" type="text/javascript"></script>
 <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
    3.3.x versions without popper.min.js. -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
@@ -111,7 +108,6 @@ If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in
 
 - The `piexif.min.js` file is the source for the [Piexifjs plugin by hMatoba](https://github.com/hMatoba/piexifjs). It is required to be loaded before `fileinput.min.js` if you wish to use the image resize feature of the **bootstrap-fileinput** plugin. 
 - The `sortable.min.js` file is the source for the [Sortable plugin by rubaxa](https://github.com/rubaxa/Sortable). It is required to be loaded before `fileinput.min.js` if you wish to sort the thumbnails in the initial preview.
-- The `purify.min.js` file is the source for the [DomPurify plugin by cure53](https://github.com/cure53/DOMPurify). It is required to be loaded before `fileinput.min.js` if you wish to purify your HTML for HTML content preview.
 
 For ease of access, the sources for the above plugins are included in the `js/plugins` folder of this project repository.
 

+ 0 - 5
css/fileinput.css

@@ -241,19 +241,14 @@
 }
 
 .krajee-default .file-preview-text {
-    display: block;
     color: #428bca;
     border: 1px solid #ddd;
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     outline: none;
-    padding: 8px;
     resize: none;
 }
 
 .krajee-default .file-preview-html {
     border: 1px solid #ddd;
-    padding: 8px;
-    overflow: auto;
 }
 
 .krajee-default .file-other-icon {

File diff suppressed because it is too large
+ 0 - 0
css/fileinput.min.css


+ 21 - 39
js/fileinput.js

@@ -1618,7 +1618,10 @@
                 tModalMain, tModal, tProgress, tSize, tFooter, tActions, tActionDelete, tActionUpload, tActionDownload,
                 tActionZoom, tActionDrag, tIndicator, tTagBef, tTagBef1, tTagBef2, tTagAft, tGeneric, tHtml, tImage,
                 tText, tOffice, tGdocs, tVideo, tAudio, tFlash, tObject, tPdf, tOther, tStyle, tZoomCache, vDefaultDim,
-                tStats, tModalLabel;
+                tStats, tModalLabel, renderObject = function (type, mime) {
+                    return '<object class="kv-preview-data file-preview-' + type + '" title="{caption}" ' +
+                        'data="{data}" type="' + mime + '"' + tStyle + '>\n' + $h.DEFAULT_PREVIEW + '\n</object>\n';
+                };
             tMain1 = '{preview}\n' +
                 '<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>\n' +
                 '<div class="input-group {class}">\n' +
@@ -1656,7 +1659,7 @@
             tBtnLink = '<a href="{href}" tabindex="500" title="{title}" class="{css}" {status}>{icon} {label}</a>';
             //noinspection HtmlUnknownAttribute
             tBtnBrowse = '<div tabindex="500" class="{css}" {status}>{icon} {label}</div>';
-            tModalLabel =  $h.MODAL_ID + 'Label';
+            tModalLabel = $h.MODAL_ID + 'Label';
             tModalMain = '<div id="' + $h.MODAL_ID + '" class="file-zoom-dialog modal fade" ' +
                 'tabindex="-1" aria-labelledby="' + tModalLabel + '"></div>';
             tModal = '<div class="modal-dialog modal-lg{rtl}" role="document">\n' +
@@ -1715,11 +1718,11 @@
             tTagAft = '</div>{footer}\n{zoomCache}</div>\n';
             tGeneric = '{content}\n';
             tStyle = ' {style}';
-            tHtml = '<div class="kv-preview-data file-preview-html" title="{caption}"' + tStyle + '>{data}</div>\n';
-            tImage = '<img src="{data}" class="file-preview-image kv-preview-data" title="{title}" ' +
-                'alt="{alt}"' + tStyle + '>\n';
-            tText = '<textarea class="kv-preview-data file-preview-text" title="{caption}" readonly' + tStyle + '>' +
-                '{data}</textarea>\n';
+            tHtml = renderObject('html', 'text/html');
+            tText = renderObject('text', 'text/plain;charset=UTF-8');
+            tPdf = renderObject('pdf', 'application/pdf');
+            tImage = '<img src="{data}" class="file-preview-image kv-preview-data" title="{title}" alt="{alt}"' +
+                tStyle + '>\n';
             tOffice = '<iframe class="kv-preview-data file-preview-office" ' +
                 'src="https://view.officeapps.live.com/op/embed.aspx?src={data}"' + tStyle + '></iframe>';
             tGdocs = '<iframe class="kv-preview-data file-preview-gdocs" ' +
@@ -1729,7 +1732,6 @@
             tAudio = '<!--suppress ALL --><audio class="kv-preview-data file-preview-audio" controls' + tStyle + '>\n<source src="{data}" ' +
                 'type="{type}">\n' + $h.DEFAULT_PREVIEW + '\n</audio>\n';
             tFlash = '<embed class="kv-preview-data file-preview-flash" src="{data}" type="application/x-shockwave-flash"' + tStyle + '>\n';
-            tPdf = '<embed class="kv-preview-data file-preview-pdf" src="{data}" type="application/pdf"' + tStyle + '>\n';
             tObject = '<object class="kv-preview-data file-preview-object file-object {typeCss}" ' +
                 'data="{data}" type="{type}"' + tStyle + '>\n' + '<param name="movie" value="{caption}" />\n' +
                 $h.OBJECT_PARAMS + ' ' + $h.DEFAULT_PREVIEW + '\n</object>\n';
@@ -1847,7 +1849,7 @@
                     },
                     text: function (vType, vName) {
                         return $h.compare(vType, 'text.*') || $h.compare(vName, /\.(xml|javascript)$/i) ||
-                            $h.compare(vName, /\.(txt|md|csv|nfo|ini|json|php|js|css)$/i);
+                            $h.compare(vName, /\.(txt|md|nfo|ini|json|php|js|css)$/i);
                     },
                     video: function (vType, vName) {
                         return $h.compare(vType, 'video.*') && ($h.compare(vType, /(ogg|mp4|mp?g|mov|webm|3gp)$/i) ||
@@ -1924,7 +1926,7 @@
             $.each(self.previewContentTemplates, function (key, value) {
                 if ($h.isEmpty(self.previewTemplates[key])) {
                     tagBef = tags.tagBefore2;
-                    if (key === 'generic' || key === 'image' || key === 'html' || key === 'text') {
+                    if (key === 'generic' || key === 'image') {
                         tagBef = tags.tagBefore1;
                     }
                     if (self._isPdfRendered() && key === 'pdf') {
@@ -4064,9 +4066,6 @@
                     css = css.replace(' ' + $h.SORT_CSS, '');
                 }
                 tmplt = self._parseFilePreviewIcon(tmplt, fname);
-                if (c === 'text') {
-                    d = $h.htmlEncode(d);
-                }
                 if (cat === 'object' && !ftype) {
                     $.each(self.defaults.fileTypeSettings, function (key, func) {
                         if (key === 'object' || key === 'other') {
@@ -4143,12 +4142,9 @@
             }
             var self = this, fname = $h.getFileName(file), ftype = fileInfo.type, caption = fileInfo.name,
                 cat = self._parseFileType(ftype, fname), content, $preview = self.$preview, fsize = file.size || 0,
-                iData = (cat === 'text' || cat === 'html' || cat === 'image') ? theFile.target.result : data,
+                iData = cat === 'image' ? theFile.target.result : data,
                 fileId = self.fileManager.getId(file), previewId = self._getThumbId(fileId);
             /** @namespace window.DOMPurify */
-            if (cat === 'html' && self.purifyHtml && window.DOMPurify) {
-                iData = window.DOMPurify.sanitize(iData);
-            }
             content = self._generatePreviewTemplate(cat, iData, fname, ftype, previewId, fileId, false, fsize);
             self._clearDefaultPreview();
             self._addToPreview($preview, content);
@@ -5204,7 +5200,7 @@
                     caption = self._getFileName(file, ''), fileSize = (file && file.size || 0) / 1000,
                     fileExtExpr = '', previewData = $h.createObjectURL(file), fileCount = 0,
                     strTypes = '', fileId, canLoad, fileReaderAborted = false,
-                    func, knownTypes = 0, isText, isHtml, isImage, txtFlag, processFileLoaded = function () {
+                    func, knownTypes = 0, isImage, txtFlag, processFileLoaded = function () {
                         var msg = msgProgress.setTokens({
                             'index': i + 1,
                             'files': numFiles,
@@ -5322,8 +5318,6 @@
                     }, 10);
                     return;
                 }
-                isText = fnText(file.type, caption);
-                isHtml = fnHtml(file.type, caption);
                 isImage = fnImage(file.type, caption);
                 $status.html(msgLoading.replace('{index}', i + 1).replace('{files}', numFiles));
                 $container.addClass('file-thumb-loading');
@@ -5331,7 +5325,7 @@
                     self._errorHandler(evt, caption);
                 };
                 reader.onload = function (theFile) {
-                    var hex, fileInfo, uint, byte, bytes = [], contents, mime, readTextImage = function (textFlag) {
+                    var hex, fileInfo, uint, byte, bytes = [], contents, mime, readImage = function () {
                         var newReader = new FileReader();
                         newReader.onerror = function (theFileNew) {
                             self._errorHandler(theFileNew, caption);
@@ -5350,11 +5344,7 @@
                             self._initFileActions();
                             processFileLoaded();
                         };
-                        if (textFlag) {
-                            newReader.readAsText(file, self.textEncoding);
-                        } else {
-                            newReader.readAsDataURL(file);
-                        }
+                        newReader.readAsDataURL(file);
                     };
                     fileInfo = {'name': caption, 'type': file.type};
                     $.each(settings, function (k, f) {
@@ -5375,12 +5365,9 @@
                             mime = $h.isSvg(contents) ? 'image/svg+xml' : $h.getMimeType(hex, contents, file.type);
                         }
                         fileInfo = {'name': caption, 'type': mime};
-                        isText = fnText(mime, '');
-                        isHtml = fnHtml(mime, '');
                         isImage = fnImage(mime, '');
-                        txtFlag = isText || isHtml;
-                        if (txtFlag || isImage) {
-                            readTextImage(txtFlag);
+                        if (isImage) {
+                            readImage(txtFlag);
                             return;
                         }
                     }
@@ -5413,14 +5400,10 @@
                         }, self.processDelay);
                     }
                 };
-                if (isText || isHtml) {
-                    reader.readAsText(file, self.textEncoding);
+                if (isImage) {
+                    reader.readAsDataURL(file);
                 } else {
-                    if (isImage) {
-                        reader.readAsDataURL(file);
-                    } else {
-                        reader.readAsArrayBuffer(file);
-                    }
+                    reader.readAsArrayBuffer(file);
                 }
             };
 
@@ -5813,7 +5796,6 @@
         frameClass: 'krajee-default',
         mainClass: 'file-caption-main',
         mainTemplate: null,
-        purifyHtml: true,
         fileSizeGetter: null,
         initialCaption: '',
         initialPreview: [],

File diff suppressed because it is too large
+ 0 - 0
js/fileinput.min.js


File diff suppressed because it is too large
+ 0 - 19
js/plugins/purify.js


File diff suppressed because it is too large
+ 0 - 0
js/plugins/purify.min.js


Some files were not shown because too many files changed in this diff