Initial zip with file system hierarchy created.

app/assets/javascripts/blob/zip/index.js

+import JSZip from 'jszip';
+import JSZipUtils from 'jszip-utils';
+import Vue from 'vue';
+
+export default class ZipRenderer {
+  constructor(container) {
+    this.el = container;
+    this.absolutePaths = [];
+    this.load();
+    this.files = [];
+    this.tree = [];
+    this.addVue();
+  }
+
+  load() {
+    return this.getZipFile()
+      .then(data => {
+        return JSZip.loadAsync(data,{
+          createFolders: false
+        })
+      })
+      .then(asyncResult => {
+        this.createUsefulZipObjectStructure(asyncResult);
+      })
+  }
+
+  getZipFile() {
+    return new JSZip.external.Promise((resolve, reject) => {
+      JSZipUtils.getBinaryContent(this.el.dataset.endpoint, (err, data) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(data);
+        }
+      });
+    });
+  }
+
+  // Extract filename from a path
+  getFilename(path) {
+    return path.split("/").filter((i) => {
+      return i && i.length; 
+    }).reverse()
+    [0];
+  }
+
+  // Get depth of a path
+  getPathDepth(path) {
+    return path.replace(/[^\/]+|\/$/g, '').length;
+  }
+
+  // Find sub paths
+  findSubPaths(path) {
+    var subPaths = [];
+    var depth = this.getPathDepth(path);
+    return this.absolutePaths.filter((i) => {
+      var d = this.getPathDepth(i);
+      return i != path && i.startsWith(path) && (d <= depth+1);
+    });
+  }
+
+  // Build tree recursively
+  buildTree(dirPath) {
+    var tree = [];
+    var key = this.getFilename(dirPath);
+    var subPaths = this.findSubPaths(dirPath);
+    subPaths.forEach((subPath) => {
+      var subKey = this.getFilename(subPath);
+      if(/\/$/.test(subPath)) {
+        var o = {};
+        o[subKey] = this.buildTree(subPath);
+        tree.push(o);     
+      }
+      else {
+        tree.push(subKey);
+      } 
+    });
+    return tree;
+  }
+
+  createUsefulZipObjectStructure(files) {
+    var tree;
+    this.absolutePaths = [];
+    files.forEach((path) => {
+      this.absolutePaths.push("/" + path);
+    });
+    tree = this.buildTree("/");
+  }
+
+  addVue() {
+    this.vue = new Vue({
+
+    });
+  }
+
+}
\ No newline at end of file

app/assets/javascripts/blob/zip_viewer.js

+/* eslint-disable no-new */
+import ZipRender from './zip';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-zip-viewer');
+  new ZipRender(el);
+});

app/models/blob.rb

@@ -62,6 +62,10 @@ class Blob < SimpleDelegator
     binary? && extension == 'sketch'
   end
+  def zip?
+    binary? && extension == 'zip'
+  end
+
   def stl?
     extension == 'stl'
   end
@@ -95,6 +99,8 @@ class Blob < SimpleDelegator
       'notebook'
     elsif sketch?
       'sketch'
+    elsif zip?
+      'zip'
     elsif stl?
       'stl'
     elsif markup?

app/views/projects/blob/_zip.html.haml

+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('zip_viewer')
+
+.file-content.is-zip-loading
+  .text-center#js-zip-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+    = icon('spinner spin 2x', class: 'prepend-top-default append-bottom-default hidden', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
+    %table.table
+      %tr{"v-for" => "file in files"}
+        %td
+          {{file}}

config/webpack.config.js

@@ -41,6 +41,7 @@ var config = {
     notebook_viewer:      './blob/notebook_viewer.js',
     sketch_viewer:        './blob/sketch_viewer.js',
     pdf_viewer:           './blob/pdf_viewer.js',
+    zip_viewer:           './blob/zip_viewer.js',
     profile:              './profile/profile_bundle.js',
     protected_branches:   './protected_branches/protected_branches_bundle.js',
     protected_tags:       './protected_tags',