diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
index 9e1597add53..a5ee4f71281 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -59,7 +59,7 @@
           </li>
           <li>
             <upload
-              :current-path="currentPath"
+              :path="path"
             />
           </li>
           <li>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/upload.vue b/app/assets/javascripts/repo/components/new_dropdown/upload.vue
index cbea9c08249..14ad32f4ae0 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/repo/components/new_dropdown/upload.vue
@@ -1,30 +1,31 @@
 <script>
-  import eventHub from '../../event_hub';
+  import { mapActions } from 'vuex';
 
   export default {
     props: {
-      currentPath: {
+      path: {
         type: String,
         required: true,
       },
     },
     methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
       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,
+        this.createTempEntry({
+          name,
           type: 'blob',
           content: result,
-          toggleModal: false,
           base64: !isText,
-        }, isText);
+        });
       },
       readFile(file) {
         const reader = new FileReader();
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index fb613e8af9d..377e3d65348 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -45,6 +45,7 @@ export default {
           action: f.tempFile ? 'create' : 'update',
           file_path: f.path,
           content: f.content,
+          encoding: f.base64 ? 'base64' : 'text',
         })),
         start_branch: createNewBranch ? this.currentBranch : undefined,
       };
diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
index 856a3994b37..ca2f2a5ce7a 100644
--- a/app/assets/javascripts/repo/stores/actions.js
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -88,13 +88,15 @@ export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =
   })
   .catch(() => flash('Error committing changes. Please try again.'));
 
-export const createTempEntry = ({ state, dispatch }, { name, type }) => {
+export const createTempEntry = ({ state, dispatch }, { name, type, content = '', base64 = false }) => {
   if (type === 'tree') {
     dispatch('createTempTree', name);
   } else if (type === 'blob') {
     dispatch('createTempFile', {
       tree: state,
       name,
+      base64,
+      content,
     });
   }
 };
diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js
index 013a0b3f4da..afbe0b78a82 100644
--- a/app/assets/javascripts/repo/stores/actions/file.js
+++ b/app/assets/javascripts/repo/stores/actions/file.js
@@ -80,16 +80,18 @@ export const changeFileContent = ({ commit }, { file, content }) => {
   commit(types.UPDATE_FILE_CONTENT, { file, content });
 };
 
-export const createTempFile = ({ state, commit, dispatch }, { tree, name }) => {
+export const createTempFile = ({ state, commit, dispatch }, { tree, name, content = '', base64 = '' }) => {
   const file = createTemp({
     name: name.replace(`${state.path}/`, ''),
     path: tree.path,
     type: 'blob',
     level: tree.level !== undefined ? tree.level + 1 : 0,
     changed: true,
+    content,
+    base64,
   });
 
-  if (findEntry(tree, 'blob', file.name)) return;
+  if (findEntry(tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`);
 
   commit(types.CREATE_TMP_FILE, {
     parent: tree,
@@ -98,7 +100,9 @@ export const createTempFile = ({ state, commit, dispatch }, { tree, name }) => {
   commit(types.TOGGLE_FILE_OPEN, file);
   dispatch('setFileActive', file);
 
-  if (!state.editMode) {
+  if (!state.editMode && !file.base64) {
     dispatch('toggleEditMode', true);
   }
+
+  return Promise.resolve(file);
 };
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
index 5d5ee99ed43..797c2b1e5b9 100644
--- a/app/assets/javascripts/repo/stores/utils.js
+++ b/app/assets/javascripts/repo/stores/utils.js
@@ -24,6 +24,7 @@ export const dataStructure = () => ({
   content: '',
   parentTreeUrl: '',
   renderError: false,
+  base64: false,
 });
 
 export const decorateData = (entity, projectUrl = '') => {
@@ -37,12 +38,14 @@ export const decorateData = (entity, projectUrl = '') => {
     tree_url,
     path,
     renderError,
+    content = '',
     tempFile = false,
     active = false,
     opened = false,
     changed = false,
     parentTreeUrl = '',
     level = 0,
+    base64 = false,
   } = entity;
 
   return {
@@ -61,6 +64,8 @@ export const decorateData = (entity, projectUrl = '') => {
     parentTreeUrl,
     changed,
     renderError,
+    content,
+    base64,
     // eslint-disable-next-line camelcase
     lastCommit: last_commit ? {
       url: `${projectUrl}/commit/${last_commit.id}`,
@@ -83,7 +88,7 @@ export const pushState = (url) => {
   history.pushState({ url }, '', url);
 };
 
-export const createTemp = ({ name, path, type, level, changed, content }) => {
+export const createTemp = ({ name, path, type, level, changed, content, base64 }) => {
   const treePath = path ? `${path}/${name}` : name;
 
   return decorateData({
@@ -97,5 +102,7 @@ export const createTemp = ({ name, path, type, level, changed, content }) => {
     content,
     parentTreeUrl: '',
     level,
+    base64,
+    renderError: base64,
   });
 };
diff --git a/spec/javascripts/repo/components/new_dropdown/upload_spec.js b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
index 31878e9d327..bf7893029b1 100644
--- a/spec/javascripts/repo/components/new_dropdown/upload_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import upload from '~/repo/components/new_dropdown/upload.vue';
-import eventHub from '~/repo/event_hub';
-import createComponent from '../../../helpers/vue_mount_component_helper';
+import store from '~/repo/stores';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { resetStore } from '../../helpers';
 
 describe('new dropdown upload', () => {
   let vm;
@@ -9,13 +10,17 @@ describe('new dropdown upload', () => {
   beforeEach(() => {
     const Component = Vue.extend(upload);
 
-    vm = createComponent(Component, {
-      currentPath: '',
+    vm = createComponentWithStore(Component, store, {
+      path: '',
     });
+
+    vm.$mount();
   });
 
   afterEach(() => {
     vm.$destroy();
+
+    resetStore(vm.$store);
   });
 
   describe('readFile', () => {
@@ -56,45 +61,43 @@ describe('new dropdown upload', () => {
       name: 'file',
     };
 
-    beforeEach(() => {
-      spyOn(eventHub, '$emit');
-    });
-
-    it('emits createNewEntry event', () => {
+    it('creates new file', (done) => {
       vm.createFile(target, file, true);
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
-        name: 'file',
-        type: 'blob',
-        content: 'content',
-        toggleModal: false,
-        base64: false,
-      }, true);
+      vm.$nextTick(() => {
+        expect(vm.$store.state.tree.length).toBe(1);
+        expect(vm.$store.state.tree[0].name).toBe(file.name);
+        expect(vm.$store.state.tree[0].content).toBe(target.result);
+
+        done();
+      });
     });
 
-    it('createNewEntry event name contains current path', () => {
-      vm.currentPath = 'testing';
+    it('creates new file in path', (done) => {
+      vm.$store.state.path = 'testing';
       vm.createFile(target, file, true);
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
-        name: 'testing/file',
-        type: 'blob',
-        content: 'content',
-        toggleModal: false,
-        base64: false,
-      }, true);
+      vm.$nextTick(() => {
+        expect(vm.$store.state.tree.length).toBe(1);
+        expect(vm.$store.state.tree[0].name).toBe(file.name);
+        expect(vm.$store.state.tree[0].content).toBe(target.result);
+        expect(vm.$store.state.tree[0].path).toBe(`testing/${file.name}`);
+
+        done();
+      });
     });
 
-    it('splits content on base64 if binary', () => {
+    it('splits content on base64 if binary', (done) => {
       vm.createFile(binaryTarget, file, false);
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('createNewEntry', {
-        name: 'file',
-        type: 'blob',
-        content: 'base64content',
-        toggleModal: false,
-        base64: true,
-      }, false);
+      vm.$nextTick(() => {
+        expect(vm.$store.state.tree.length).toBe(1);
+        expect(vm.$store.state.tree[0].name).toBe(file.name);
+        expect(vm.$store.state.tree[0].content).toBe(binaryTarget.result.split('base64,')[1]);
+        expect(vm.$store.state.tree[0].base64).toBe(true);
+
+        done();
+      });
     });
   });
 });