diff --git a/src/public/app/widgets/type_widgets/file.js b/src/public/app/widgets/type_widgets/file.js
index 1b81c14cd..681099d72 100644
--- a/src/public/app/widgets/type_widgets/file.js
+++ b/src/public/app/widgets/type_widgets/file.js
@@ -25,6 +25,10 @@ const TPL = `
     
     <pre class="file-preview-content"></pre>
     
+    <div class="file-preview-not-available alert alert-info">
+        File preview is not available for this file format.
+    </div>
+    
     <iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>
 </div>`;
 
@@ -35,6 +39,7 @@ export default class FileTypeWidget extends TypeWidget {
         this.$widget = $(TPL);
         this.contentSized();
         this.$previewContent = this.$widget.find(".file-preview-content");
+        this.$previewNotAvailable = this.$widget.find(".file-preview-not-available");
         this.$pdfPreview = this.$widget.find(".pdf-preview");
     }
 
@@ -50,12 +55,17 @@ export default class FileTypeWidget extends TypeWidget {
         this.$pdfPreview.attr('src', '').empty().hide();
 
         if (noteComplement.content) {
+            this.$previewNotAvailable.hide();
             this.$previewContent.show().scrollTop(0);
             this.$previewContent.text(noteComplement.content);
         }
         else if (note.mime === 'application/pdf') {
+            this.$previewNotAvailable.hide();
             this.$pdfPreview.show();
             this.$pdfPreview.attr("src", openService.getUrlForDownload("api/notes/" + this.noteId + "/open"));
         }
+        else {
+            this.$previewNotAvailable.show();
+        }
     }
 }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 5f7e0bac8..d23c15a6e 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -764,7 +764,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     height: 50em; /* PDF is rendered in iframe and it's not possible to put full height so at least a large height */
 }
 
-.alert-warning {
+.alert-warning, .alert-info {
     color: var(--main-text-color) !important;
     background-color: var(--accented-background-color) !important;
     border-color: var(--main-border-color) !important;
diff --git a/src/services/utils.js b/src/services/utils.js
index d7320b237..c915d1024 100644
--- a/src/services/utils.js
+++ b/src/services/utils.js
@@ -161,6 +161,8 @@ function getContentDisposition(filename) {
 const STRING_MIME_TYPES = [
     "application/javascript",
     "application/x-javascript",
+    "application/json",
+    "application/x-sql",
     "image/svg+xml"
 ];