3 files changed, 18 insertions, 5 deletions

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,
   });
 };