Show warning for big files.

app/assets/javascripts/repo/components/repo_edit_button.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable" :disabled="binary">
+<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable && !activeFile.render_error" :disabled="binary">
   <i :class="buttonIcon"></i>
   <span>{{buttonLabel}}</span>
 </button>

app/assets/javascripts/repo/components/repo_preview.vue

@@ -23,5 +23,10 @@ export default {
 </script>
 
 <template>
-<div v-html="activeFile.html"></div>
+<div>
+  <div v-if="!activeFile.render_error" v-html="activeFile.html"></div>
+  <div v-if="activeFile.render_error" class="vertical-center render-error">
+    <p class="text-center">The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.</p>
+  </div>
+</div>
 </template>

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -154,16 +154,19 @@ const RepoHelper = {
           RepoHelper.setBinaryDataAsBase64(data);
           Store.setViewToPreview();
         } else if (!Store.isPreviewView()) {
+          if(!data.render_error){
             Service.getRaw(data.raw_path)
             .then((rawResponse) => {
               Store.blobRaw = rawResponse.data;
               data.plain = rawResponse.data;
-
               RepoHelper.setFile(data, file);
             }).catch(RepoHelper.loadingError);
           }
+        }
 
-        if (Store.isPreviewView()) RepoHelper.setFile(data, file);
+        if (Store.isPreviewView()){
+          RepoHelper.setFile(data, file);
+        }
 
         // if the file tree is empty
         if (Store.files.length === 0) {
@@ -187,6 +190,9 @@ const RepoHelper = {
 
     newFile.url = file.url || location.pathname;
     newFile.url = file.url;
+    if(newFile.render_error === 'too_large'){
+      newFile.tooLarge = true;
+    }
     newFile.newContent = '';
 
     Store.addToOpenedFiles(newFile);

app/assets/stylesheets/framework/layout.scss

@@ -128,3 +128,11 @@ of the body element here, we negate cascading side effects but allow momentum sc
 [v-cloak] {
   display: none;
 }
+
+.vertical-center {
+  min-height: 100%;
+  min-height: 100vh;
+
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file

app/assets/stylesheets/pages/repo.scss

@@ -369,6 +369,13 @@
   }
 }
 
+.render-error {
+  min-height: calc(100vh - 63px);
+  p {
+    width: 100%;
+  }
+}
+
 @keyframes blockTextShine {
   0% {
     transform: translateX(-468px);