Merge branch 'ph-multi-file-upload-file' into 'master'

Upload files through the multi-file editor

Closes #38629 and #38614

See merge request gitlab-org/gitlab-ce!14975

8 files changed, 122 insertions, 10 deletions

diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
index 3ccb50213ab..3a331ed805f 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -3,10 +3,12 @@
   import RepoHelper from '../../helpers/repo_helper';
   import eventHub from '../../event_hub';
   import newModal from './modal.vue';
+  import upload from './upload.vue';
 
   export default {
     components: {
       newModal,
+      upload,
     },
     data() {
       return {
@@ -23,10 +25,12 @@
       toggleModalOpen() {
         this.openModal = !this.openModal;
       },
-      createNewEntryInStore(name, type) {
-        RepoHelper.createNewEntry(name, type);
+      createNewEntryInStore(options, openEditMode = true) {
+        RepoHelper.createNewEntry(options, openEditMode);
 
-        this.toggleModalOpen();
+        if (options.toggleModal) {
+          this.toggleModalOpen();
+        }
       },
     },
     created() {
@@ -65,6 +69,11 @@
             </a>
           </li>
           <li>
+            <upload
+              :current-path="currentPath"
+            />
+          </li>
+          <li>
             <a
               href="#"
               role="button"
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
index 5ef629e0dde..b49586de6bb 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -24,7 +24,11 @@
     },
     methods: {
       createEntryInStore() {
-        eventHub.$emit('createNewEntry', this.entryName, this.type);
+        eventHub.$emit('createNewEntry', {
+          name: this.entryName,
+          type: this.type,
+          toggleModal: true,
+        });
       },
       toggleModalOpen() {
         this.$emit('toggle');
diff --git a/app/assets/javascripts/repo/components/new_dropdown/upload.vue b/app/assets/javascripts/repo/components/new_dropdown/upload.vue
new file mode 100644
index 00000000000..cbea9c08249
--- /dev/null
+++ b/app/assets/javascripts/repo/components/new_dropdown/upload.vue
@@ -0,0 +1,67 @@
+<script>
+  import eventHub from '../../event_hub';
+
+  export default {
+    props: {
+      currentPath: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      createFile(target, file, isText) {
+        const { name } = file;
+        const nameWithPath = `${this.currentPath !== '' ? `${this.currentPath}/` : ''}${name}`;
+        let { result } = target;
+
+        if (!isText) {
+          result = result.split('base64,')[1];
+        }
+
+        eventHub.$emit('createNewEntry', {
+          name: nameWithPath,
+          type: 'blob',
+          content: result,
+          toggleModal: false,
+          base64: !isText,
+        }, isText);
+      },
+      readFile(file) {
+        const reader = new FileReader();
+        const isText = file.type.match(/text.*/) !== null;
+
+        reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
+
+        if (isText) {
+          reader.readAsText(file);
+        } else {
+          reader.readAsDataURL(file);
+        }
+      },
+      openFile() {
+        Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
+      },
+    },
+    mounted() {
+      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    },
+    beforeDestroy() {
+      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    },
+  };
+</script>
+
+<template>
+  <label
+    role="button"
+    class="menu-item"
+  >
+    {{ __('Upload file') }}
+    <input
+      id="file-upload"
+      type="file"
+      class="hidden"
+      ref="fileUpload"
+    />
+  </label>
+</template>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 0d6259a37a8..649c69c43fd 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -52,6 +52,7 @@ export default {
         action: f.tempFile ? 'create' : 'update',
         file_path: f.path,
         content: f.newContent,
+        encoding: f.base64 ? 'base64' : 'text',
       }));
       const branch = newBranch ? `${this.currentBranch}-${this.currentShortHash}` : this.currentBranch;
       const payload = {
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index b5be771d539..264694f01a2 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -50,6 +50,13 @@ export default {
     v-html="activeFile.html">
   </div>
   <div
+    v-else-if="activeFile.tempFile"
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed for this temporary file.
+    </p>
+  </div>
+  <div
     v-else-if="activeFile.tooLarge"
     class="vertical-center render-error">
     <p class="text-center">
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index fb26f3b7380..1c677049b31 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -155,7 +155,7 @@ const RepoHelper = {
     if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') {
       newFile.tooLarge = true;
     }
-    newFile.newContent = '';
+    newFile.newContent = file.newContent ? file.newContent : '';
 
     Store.addToOpenedFiles(newFile);
     Store.setActiveFiles(newFile);
@@ -276,7 +276,13 @@ const RepoHelper = {
   removeAllTmpFiles(storeFilesKey) {
     Store[storeFilesKey] = Store[storeFilesKey].filter(f => !f.tempFile);
   },
-  createNewEntry(name, type) {
+  createNewEntry(options, openEditMode = true) {
+    const {
+      name,
+      type,
+      content = '',
+      base64 = false,
+    } = options;
     const originalPath = Store.path;
     let entryName = name;
 
@@ -304,9 +310,24 @@ const RepoHelper = {
     if ((type === 'tree' && tree.tempFile) || type === 'blob') {
       const file = this.findOrCreateEntry('blob', tree, fileName);
 
-      if (!file.exists) {
-        this.setFile(file.entry, file.entry);
-        this.openEditMode();
+      if (file.exists) {
+        Flash(`The name "${file.entry.name}" is already taken in this directory.`);
+      } else {
+        const { entry } = file;
+        entry.newContent = content;
+        entry.base64 = base64;
+
+        if (entry.base64) {
+          entry.render_error = true;
+        }
+
+        this.setFile(entry, entry);
+
+        if (openEditMode) {
+          this.openEditMode();
+        } else {
+          file.entry.render_error = 'asdsad';
+        }
       }
     }
 
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index c9fa5cc8bf8..d003e2b0a5e 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -19,7 +19,7 @@ const RepoService = {
   getRaw(file) {
     if (file.tempFile) {
       return Promise.resolve({
-        data: '',
+        data: file.newContent ? file.newContent : '',
       });
     }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index a9d804e735d..1aa53b8f8cf 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -776,12 +776,15 @@
       a,
       button,
       .menu-item {
+        margin-bottom: 0;
         border-radius: 0;
         box-shadow: none;
         padding: 8px 16px;
         text-align: left;
         white-space: normal;
         width: 100%;
+        font-weight: $gl-font-weight-normal;
+        line-height: normal;
 
         &.dropdown-menu-user-link {
           white-space: nowrap;