file: new file editors

- multi-upload
- styling as per new UI

rhodecode/apps/home/__init__.py

@@ -68,6 +68,10 b' def includeme(config):'
         pattern='/_markup_preview')
 
     config.add_route(
+        name='file_preview',
+        pattern='/_file_preview')
+
+    config.add_route(
         name='store_user_session_value',
         pattern='/_store_session_attr')
 

rhodecode/apps/home/views.py

@@ -27,11 +27,12 b' from pyramid.view import view_config'
 from rhodecode.apps._base import BaseAppView
 from rhodecode.lib import helpers as h
 from rhodecode.lib.auth import (
-    LoginRequired, NotAnonymous, HasRepoGroupPermissionAnyDecorator,
-    CSRFRequired)
+    LoginRequired, NotAnonymous, HasRepoGroupPermissionAnyDecorator, CSRFRequired)
+from rhodecode.lib.codeblocks import filenode_as_lines_tokens
 from rhodecode.lib.index import searcher_from_config
 from rhodecode.lib.utils2 import safe_unicode, str2bool, safe_int
 from rhodecode.lib.ext_json import json
+from rhodecode.lib.vcs.nodes import FileNode
 from rhodecode.model.db import (
     func, true, or_, case, in_filter_generator, Repository, RepoGroup, User, UserGroup)
 from rhodecode.model.repo import RepoModel
@@ -743,6 +744,34 b' class HomeView(BaseAppView):'
     @LoginRequired()
     @CSRFRequired()
     @view_config(
+        route_name='file_preview', request_method='POST',
+        renderer='string', xhr=True)
+    def file_preview(self):
+        # Technically a CSRF token is not needed as no state changes with this
+        # call. However, as this is a POST is better to have it, so automated
+        # tools don't flag it as potential CSRF.
+        # Post is required because the payload could be bigger than the maximum
+        # allowed by GET.
+
+        text = self.request.POST.get('text')
+        file_path = self.request.POST.get('file_path')
+
+        renderer = h.renderer_from_filename(file_path)
+
+        if renderer:
+            return h.render(text, renderer=renderer, mentions=True)
+        else:
+            self.load_default_context()
+            _render = self.request.get_partial_renderer(
+                'rhodecode:templates/files/file_content.mako')
+
+            lines = filenode_as_lines_tokens(FileNode(file_path, text))
+
+            return _render('render_lines', lines)
+
+    @LoginRequired()
+    @CSRFRequired()
+    @view_config(
         route_name='store_user_session_value', request_method='POST',
         renderer='string', xhr=True)
     def store_user_session_attr(self):

rhodecode/apps/repository/views/repo_files.py

@@ -25,6 +25,7 b' import shutil'
 import tempfile
 import collections
 import urllib
+import pathlib2
 
 from pyramid.httpexceptions import HTTPNotFound, HTTPBadRequest, HTTPFound
 from pyramid.view import view_config
@@ -42,7 +43,7 b' from rhodecode.lib.exceptions import Non'
 from rhodecode.lib.codeblocks import (
     filenode_as_lines_tokens, filenode_as_annotated_lines_tokens)
 from rhodecode.lib.utils2 import (
-    convert_line_endings, detect_mode, safe_str, str2bool, safe_int, sha1)
+    convert_line_endings, detect_mode, safe_str, str2bool, safe_int, sha1, safe_unicode)
 from rhodecode.lib.auth import (
     LoginRequired, HasRepoPermissionAnyDecorator, CSRFRequired)
 from rhodecode.lib.vcs import path as vcspath
@@ -87,7 +88,7 b' class RepoFilesView(RepoAppView):'
         c.enable_downloads = self.db_repo.enable_downloads
         return c
 
-    def _ensure_not_locked(self):
+    def _ensure_not_locked(self, commit_id='tip'):
         _ = self.request.translate
 
         repo = self.db_repo
@@ -98,21 +99,40 b' class RepoFilesView(RepoAppView):'
                     'warning')
             files_url = h.route_path(
                 'repo_files:default_path',
-                repo_name=self.db_repo_name, commit_id='tip')
+                repo_name=self.db_repo_name, commit_id=commit_id)
             raise HTTPFound(files_url)
 
-    def check_branch_permission(self, branch_name):
+    def forbid_non_head(self, is_head, f_path, commit_id='tip', json_mode=False):
+        _ = self.request.translate
+
+        if not is_head:
+            message = _('You can only modify files with commit being a valid branch head.')
+            h.flash(message, category='warning')
+
+            if json_mode:
+                return message
+
+            files_url = h.route_path(
+                'repo_files', repo_name=self.db_repo_name, commit_id=commit_id,
+                f_path=f_path)
+            raise HTTPFound(files_url)
+
+    def check_branch_permission(self, branch_name, commit_id='tip', json_mode=False):
         _ = self.request.translate
 
         rule, branch_perm = self._rhodecode_user.get_rule_and_branch_permission(
             self.db_repo_name, branch_name)
         if branch_perm and branch_perm not in ['branch.push', 'branch.push_force']:
-            h.flash(
-                _('Branch `{}` changes forbidden by rule {}.').format(branch_name, rule),
-                'warning')
+            message = _('Branch `{}` changes forbidden by rule {}.').format(
+                branch_name, rule)
+            h.flash(message, 'warning')
+
+            if json_mode:
+                return message
+
             files_url = h.route_path(
-                'repo_files:default_path',
-                repo_name=self.db_repo_name, commit_id='tip')
+                'repo_files:default_path', repo_name=self.db_repo_name, commit_id=commit_id)
+
             raise HTTPFound(files_url)
 
     def _get_commit_and_path(self):
@@ -146,8 +166,7 b' class RepoFilesView(RepoAppView):'
 
             _url = h.route_path(
                 'repo_files_add_file',
-                repo_name=self.db_repo_name, commit_id=0, f_path='',
-                _anchor='edit')
+                repo_name=self.db_repo_name, commit_id=0, f_path='')
 
             if h.HasRepoPermissionAny(
                     'repository.write', 'repository.admin')(self.db_repo_name):
@@ -217,7 +236,7 b' class RepoFilesView(RepoAppView):'
                 break
 
         # checked branches, means we only need to try to get the branch/commit_sha
-        if not repo.is_empty:
+        if not repo.is_empty():
             commit = repo.get_commit(commit_id=commit_id)
             if commit:
                 branch_name = commit.branch
@@ -276,6 +295,15 b' class RepoFilesView(RepoAppView):'
 
         return commit_id, ext, fileformat, content_type
 
+    def create_pure_path(self, *parts):
+        # Split paths and sanitize them, removing any ../ etc
+        sanitized_path = [
+            x for x in pathlib2.PurePath(*parts).parts
+            if x not in ['.', '..']]
+
+        pure_path = pathlib2.PurePath(*sanitized_path)
+        return pure_path
+
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
@@ -1054,15 +1082,9 b' class RepoFilesView(RepoAppView):'
         _branch_name, _sha_commit_id, is_head = \
             self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
 
-        if not is_head:
-            h.flash(_('You can only delete files with commit '
-                      'being a valid branch head.'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name, commit_id='tip',
-                             f_path=f_path))
+        self.forbid_non_head(is_head, f_path)
+        self.check_branch_permission(_branch_name)
 
-        self.check_branch_permission(_branch_name)
         c.commit = self._get_commit_or_redirect(commit_id)
         c.file = self._get_filenode_or_redirect(c.commit, f_path)
 
@@ -1088,13 +1110,7 b' class RepoFilesView(RepoAppView):'
         _branch_name, _sha_commit_id, is_head = \
             self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
 
-        if not is_head:
-            h.flash(_('You can only delete files with commit '
-                      'being a valid branch head.'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name, commit_id='tip',
-                             f_path=f_path))
+        self.forbid_non_head(is_head, f_path)
         self.check_branch_permission(_branch_name)
 
         c.commit = self._get_commit_or_redirect(commit_id)
@@ -1144,14 +1160,8 b' class RepoFilesView(RepoAppView):'
         _branch_name, _sha_commit_id, is_head = \
             self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
 
-        if not is_head:
-            h.flash(_('You can only edit files with commit '
-                      'being a valid branch head.'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name, commit_id='tip',
-                             f_path=f_path))
-        self.check_branch_permission(_branch_name)
+        self.forbid_non_head(is_head, f_path, commit_id=commit_id)
+        self.check_branch_permission(_branch_name, commit_id=commit_id)
 
         c.commit = self._get_commit_or_redirect(commit_id)
         c.file = self._get_filenode_or_redirect(c.commit, f_path)
@@ -1163,8 +1173,7 b' class RepoFilesView(RepoAppView):'
                 commit_id=c.commit.raw_id, f_path=f_path)
             raise HTTPFound(files_url)
 
-        c.default_message = _(
-            'Edited file {} via RhodeCode Enterprise').format(f_path)
+        c.default_message = _('Edited file {} via RhodeCode Enterprise').format(f_path)
         c.f_path = f_path
 
         return self._get_template_context(c)
@@ -1181,32 +1190,23 b' class RepoFilesView(RepoAppView):'
         commit_id, f_path = self._get_commit_and_path()
 
         self._ensure_not_locked()
-        _branch_name, _sha_commit_id, is_head = \
-            self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
-
-        if not is_head:
-            h.flash(_('You can only edit files with commit '
-                      'being a valid branch head.'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name, commit_id='tip',
-                             f_path=f_path))
-
-        self.check_branch_permission(_branch_name)
 
         c.commit = self._get_commit_or_redirect(commit_id)
         c.file = self._get_filenode_or_redirect(c.commit, f_path)
 
         if c.file.is_binary:
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name,
-                             commit_id=c.commit.raw_id,
-                             f_path=f_path))
+            raise HTTPFound(h.route_path('repo_files', repo_name=self.db_repo_name,
+                                         commit_id=c.commit.raw_id, f_path=f_path))
+
+        _branch_name, _sha_commit_id, is_head = \
+            self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
 
-        c.default_message = _(
-            'Edited file {} via RhodeCode Enterprise').format(f_path)
+        self.forbid_non_head(is_head, f_path, commit_id=commit_id)
+        self.check_branch_permission(_branch_name, commit_id=commit_id)
+
+        c.default_message = _('Edited file {} via RhodeCode Enterprise').format(f_path)
         c.f_path = f_path
+
         old_content = c.file.content
         sl = old_content.splitlines(1)
         first_line = sl[0] if sl else ''
@@ -1217,20 +1217,25 b' class RepoFilesView(RepoAppView):'
         content = convert_line_endings(r_post.get('content', ''), line_ending_mode)
 
         message = r_post.get('message') or c.default_message
-        org_f_path = c.file.unicode_path
+        org_node_path = c.file.unicode_path
         filename = r_post['filename']
-        org_filename = c.file.name
+
+        root_path = c.file.dir_path
+        pure_path = self.create_pure_path(root_path, filename)
+        node_path = safe_unicode(bytes(pure_path))
 
-        if content == old_content and filename == org_filename:
-            h.flash(_('No changes'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_commit', repo_name=self.db_repo_name,
-                             commit_id='tip'))
+        default_redirect_url = h.route_path('repo_commit', repo_name=self.db_repo_name,
+                                            commit_id=commit_id)
+        if content == old_content and node_path == org_node_path:
+            h.flash(_('No changes detected on {}').format(org_node_path),
+                    category='warning')
+            raise HTTPFound(default_redirect_url)
+
         try:
             mapping = {
-                org_f_path: {
-                    'org_filename': org_f_path,
-                    'filename': os.path.join(c.file.dir_path, filename),
+                org_node_path: {
+                    'org_filename': org_node_path,
+                    'filename': node_path,
                     'content': content,
                     'lexer': '',
                     'op': 'mod',
@@ -1238,7 +1243,7 b' class RepoFilesView(RepoAppView):'
                 }
             }
 
-            ScmModel().update_nodes(
+            commit = ScmModel().update_nodes(
                 user=self._rhodecode_db_user.user_id,
                 repo=self.db_repo,
                 message=message,
@@ -1246,15 +1251,16 b' class RepoFilesView(RepoAppView):'
                 parent_commit=c.commit,
             )
 
-            h.flash(
-                _('Successfully committed changes to file `{}`').format(
+            h.flash(_('Successfully committed changes to file `{}`').format(
                     h.escape(f_path)), category='success')
+            default_redirect_url = h.route_path(
+                'repo_commit', repo_name=self.db_repo_name, commit_id=commit.raw_id)
+
         except Exception:
             log.exception('Error occurred during commit')
             h.flash(_('Error occurred during commit'), category='error')
-        raise HTTPFound(
-            h.route_path('repo_commit', repo_name=self.db_repo_name,
-                         commit_id='tip'))
+
+        raise HTTPFound(default_redirect_url)
 
     @LoginRequired()
     @HasRepoPermissionAnyDecorator('repository.write', 'repository.admin')
@@ -1274,10 +1280,8 b' class RepoFilesView(RepoAppView):'
         c.commit = self._get_commit_or_redirect(commit_id, redirect_after=False)
         if c.commit is None:
             c.commit = EmptyCommit(alias=self.rhodecode_vcs_repo.alias)
-        c.default_message = (_('Added file via RhodeCode Enterprise'))
-        c.f_path = f_path.lstrip('/')  # ensure not relative path
 
-        if self.rhodecode_vcs_repo.is_empty:
+        if self.rhodecode_vcs_repo.is_empty():
             # for empty repository we cannot check for current branch, we rely on
             # c.commit.branch instead
             _branch_name = c.commit.branch
@@ -1286,15 +1290,11 b' class RepoFilesView(RepoAppView):'
             _branch_name, _sha_commit_id, is_head = \
                 self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
 
-        if not is_head:
-            h.flash(_('You can only add files with commit '
-                      'being a valid branch head.'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name, commit_id='tip',
-                             f_path=f_path))
+        self.forbid_non_head(is_head, f_path, commit_id=commit_id)
+        self.check_branch_permission(_branch_name, commit_id=commit_id)
 
-        self.check_branch_permission(_branch_name)
+        c.default_message = (_('Added file via RhodeCode Enterprise'))
+        c.f_path = f_path.lstrip('/')  # ensure not relative path
 
         return self._get_template_context(c)
 
@@ -1311,14 +1311,19 b' class RepoFilesView(RepoAppView):'
 
         self._ensure_not_locked()
 
-        r_post = self.request.POST
-
-        c.commit = self._get_commit_or_redirect(
-            commit_id, redirect_after=False)
+        c.commit = self._get_commit_or_redirect(commit_id, redirect_after=False)
         if c.commit is None:
             c.commit = EmptyCommit(alias=self.rhodecode_vcs_repo.alias)
 
-        if self.rhodecode_vcs_repo.is_empty:
+        # calculate redirect URL
+        if self.rhodecode_vcs_repo.is_empty():
+            default_redirect_url = h.route_path(
+                'repo_summary', repo_name=self.db_repo_name)
+        else:
+            default_redirect_url = h.route_path(
+                'repo_commit', repo_name=self.db_repo_name, commit_id='tip')
+
+        if self.rhodecode_vcs_repo.is_empty():
             # for empty repository we cannot check for current branch, we rely on
             # c.commit.branch instead
             _branch_name = c.commit.branch
@@ -1327,70 +1332,42 b' class RepoFilesView(RepoAppView):'
             _branch_name, _sha_commit_id, is_head = \
                 self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
 
-        if not is_head:
-            h.flash(_('You can only add files with commit '
-                      'being a valid branch head.'), category='warning')
-            raise HTTPFound(
-                h.route_path('repo_files',
-                             repo_name=self.db_repo_name, commit_id='tip',
-                             f_path=f_path))
-
-        self.check_branch_permission(_branch_name)
+        self.forbid_non_head(is_head, f_path, commit_id=commit_id)
+        self.check_branch_permission(_branch_name, commit_id=commit_id)
 
         c.default_message = (_('Added file via RhodeCode Enterprise'))
         c.f_path = f_path
+
+        r_post = self.request.POST
+        message = r_post.get('message') or c.default_message
+        filename = r_post.get('filename')
         unix_mode = 0
         content = convert_line_endings(r_post.get('content', ''), unix_mode)
 
-        message = r_post.get('message') or c.default_message
-        filename = r_post.get('filename')
-        location = r_post.get('location', '')  # dir location
-        file_obj = r_post.get('upload_file', None)
-
-        if file_obj is not None and hasattr(file_obj, 'filename'):
-            filename = r_post.get('filename_upload')
-            content = file_obj.file
-
-            if hasattr(content, 'file'):
-                # non posix systems store real file under file attr
-                content = content.file
-
-        if self.rhodecode_vcs_repo.is_empty:
-            default_redirect_url = h.route_path(
-                'repo_summary', repo_name=self.db_repo_name)
-        else:
-            default_redirect_url = h.route_path(
-                'repo_commit', repo_name=self.db_repo_name, commit_id='tip')
-
-        # If there's no commit, redirect to repo summary
-        if type(c.commit) is EmptyCommit:
-            redirect_url = h.route_path(
-                'repo_summary', repo_name=self.db_repo_name)
-        else:
-            redirect_url = default_redirect_url
-
         if not filename:
-            h.flash(_('No filename'), category='warning')
+            # If there's no commit, redirect to repo summary
+            if type(c.commit) is EmptyCommit:
+                redirect_url = h.route_path(
+                    'repo_summary', repo_name=self.db_repo_name)
+            else:
+                redirect_url = default_redirect_url
+            h.flash(_('No filename specified'), category='warning')
             raise HTTPFound(redirect_url)
 
-        # extract the location from filename,
-        # allows using foo/bar.txt syntax to create subdirectories
-        subdir_loc = filename.rsplit('/', 1)
-        if len(subdir_loc) == 2:
-            location = os.path.join(location, subdir_loc[0])
+        root_path = f_path
+        pure_path = self.create_pure_path(root_path, filename)
+        node_path = safe_unicode(bytes(pure_path).lstrip('/'))
 
-        # strip all crap out of file, just leave the basename
-        filename = os.path.basename(filename)
-        node_path = os.path.join(location, filename)
         author = self._rhodecode_db_user.full_contact
+        nodes = {
+            node_path: {
+                'content': content
+            }
+        }
 
         try:
-            nodes = {
-                node_path: {
-                    'content': content
-                }
-            }
-            ScmModel().create_nodes(
+
+            commit = ScmModel().create_nodes(
                 user=self._rhodecode_db_user.user_id,
                 repo=self.db_repo,
                 message=message,
@@ -1399,14 +1376,16 b' class RepoFilesView(RepoAppView):'
                 author=author,
             )
 
-            h.flash(
-                _('Successfully committed new file `{}`').format(
+            h.flash(_('Successfully committed new file `{}`').format(
                     h.escape(node_path)), category='success')
+
+            default_redirect_url = h.route_path(
+                'repo_commit', repo_name=self.db_repo_name, commit_id=commit.raw_id)
+
         except NonRelativePathError:
             log.exception('Non Relative path found')
-            h.flash(_(
-                'The location specified must be a relative path and must not '
-                'contain .. in the path'), category='warning')
+            h.flash(_('The location specified must be a relative path and must not '
+                      'contain .. in the path'), category='warning')
             raise HTTPFound(default_redirect_url)
         except (NodeError, NodeAlreadyExistsError) as e:
             h.flash(_(h.escape(e)), category='error')
@@ -1415,3 +1394,135 b' class RepoFilesView(RepoAppView):'
             h.flash(_('Error occurred during commit'), category='error')
 
         raise HTTPFound(default_redirect_url)
+
+    @LoginRequired()
+    @HasRepoPermissionAnyDecorator('repository.write', 'repository.admin')
+    @CSRFRequired()
+    @view_config(
+        route_name='repo_files_upload_file', request_method='POST',
+        renderer='json_ext')
+    def repo_files_upload_file(self):
+        _ = self.request.translate
+        c = self.load_default_context()
+        commit_id, f_path = self._get_commit_and_path()
+
+        self._ensure_not_locked()
+
+        c.commit = self._get_commit_or_redirect(commit_id, redirect_after=False)
+        if c.commit is None:
+            c.commit = EmptyCommit(alias=self.rhodecode_vcs_repo.alias)
+
+        # calculate redirect URL
+        if self.rhodecode_vcs_repo.is_empty():
+            default_redirect_url = h.route_path(
+                'repo_summary', repo_name=self.db_repo_name)
+        else:
+            default_redirect_url = h.route_path(
+                'repo_commit', repo_name=self.db_repo_name, commit_id='tip')
+
+        if self.rhodecode_vcs_repo.is_empty():
+            # for empty repository we cannot check for current branch, we rely on
+            # c.commit.branch instead
+            _branch_name = c.commit.branch
+            is_head = True
+        else:
+            _branch_name, _sha_commit_id, is_head = \
+                self._is_valid_head(commit_id, self.rhodecode_vcs_repo)
+
+        error = self.forbid_non_head(is_head, f_path, json_mode=True)
+        if error:
+            return {
+                'error': error,
+                'redirect_url': default_redirect_url
+            }
+        error = self.check_branch_permission(_branch_name, json_mode=True)
+        if error:
+            return {
+                'error': error,
+                'redirect_url': default_redirect_url
+            }
+
+        c.default_message = (_('Uploaded file via RhodeCode Enterprise'))
+        c.f_path = f_path
+
+        r_post = self.request.POST
+
+        message = c.default_message
+        user_message = r_post.getall('message')
+        if isinstance(user_message, list) and user_message:
+            # we take the first from duplicated results if it's not empty
+            message = user_message[0] if user_message[0] else message
+
+        nodes = {}
+
+        for file_obj in r_post.getall('files_upload') or []:
+            content = file_obj.file
+            filename = file_obj.filename
+
+            root_path = f_path
+            pure_path = self.create_pure_path(root_path, filename)
+            node_path = safe_unicode(bytes(pure_path).lstrip('/'))
+
+            nodes[node_path] = {
+                'content': content
+            }
+
+        if not nodes:
+            error = 'missing files'
+            return {
+                'error': error,
+                'redirect_url': default_redirect_url
+            }
+
+        author = self._rhodecode_db_user.full_contact
+
+        try:
+            commit = ScmModel().create_nodes(
+                user=self._rhodecode_db_user.user_id,
+                repo=self.db_repo,
+                message=message,
+                nodes=nodes,
+                parent_commit=c.commit,
+                author=author,
+            )
+            if len(nodes) == 1:
+                flash_message = _('Successfully committed {} new files').format(len(nodes))
+            else:
+                flash_message = _('Successfully committed 1 new file')
+
+            h.flash(flash_message, category='success')
+
+            default_redirect_url = h.route_path(
+                'repo_commit', repo_name=self.db_repo_name, commit_id=commit.raw_id)
+
+        except NonRelativePathError:
+            log.exception('Non Relative path found')
+            error = _('The location specified must be a relative path and must not '
+                      'contain .. in the path')
+            h.flash(error, category='warning')
+
+            return {
+                'error': error,
+                'redirect_url': default_redirect_url
+            }
+        except (NodeError, NodeAlreadyExistsError) as e:
+            error = h.escape(e)
+            h.flash(error, category='error')
+
+            return {
+                'error': error,
+                'redirect_url': default_redirect_url
+            }
+        except Exception:
+            log.exception('Error occurred during commit')
+            error = _('Error occurred during commit')
+            h.flash(error, category='error')
+            return {
+                'error': error,
+                'redirect_url': default_redirect_url
+            }
+
+        return {
+            'error': None,
+            'redirect_url': default_redirect_url
+        }

rhodecode/lib/helpers.py

@@ -1939,23 +1939,26 b' def secure_form(form_url, method="POST",'
 
 def dropdownmenu(name, selected, options, enable_filter=False, **attrs):
     select_html = select(name, selected, options, **attrs)
+
     select2 = """
         <script>
             $(document).ready(function() {
                   $('#%s').select2({
-                      containerCssClass: 'drop-menu',
+                      containerCssClass: 'drop-menu %s',
                       dropdownCssClass: 'drop-menu-dropdown',
                       dropdownAutoWidth: true%s
                   });
             });
         </script>
     """
+
     filter_option = """,
                         minimumResultsForSearch: -1
     """
     input_id = attrs.get('id') or name
+    extra_classes = ' '.join(attrs.pop('extra_classes', []))
     filter_enabled = "" if enable_filter else filter_option
-    select_script = literal(select2 % (input_id, filter_enabled))
+    select_script = literal(select2 % (input_id, extra_classes, filter_enabled))
 
     return literal(select_html+select_script)
 

rhodecode/model/scm.py

@@ -818,6 +818,8 b' class ScmModel(BaseModel):'
                 repo_name=repo.repo_name, repo_alias=scm_instance.alias,
                 commit_ids=[tip.raw_id])
 
+        return tip
+
     def delete_nodes(self, user, repo, message, nodes, parent_commit=None,
                      author=None, trigger_push_hook=True):
         """

rhodecode/public/css/codemirror.less

@@ -27,7 +27,7 b''
 
 .CodeMirror-gutters {
   border-right: 1px solid #ddd;
-  background-color: @grey6;
+  background-color: white;
   white-space: nowrap;
 }
 .CodeMirror-linenumbers {}

rhodecode/public/css/forms.less

@@ -231,6 +231,11 b' form.rcform {'
 
     .drop-menu {
         float: left;
+
+        & + .last-item {
+            margin: 0;
+        }
+
         margin: 0 @input-padding 0 0;
     }
 

rhodecode/public/css/main.less

@@ -277,7 +277,9 b' input.inline[type="file"] {'
 // Gists
 #files_data {
     clear: both; //for firefox
+    padding-top: 10px;
 }
+
 #gistid {
     margin-right: @padding;
 }
@@ -1327,9 +1329,9 b' table.integrations {'
         }
     }
 
-    #editor_container{
-        position: relative;
-        margin: @padding;
+    #editor_container {
+      position: relative;
+      margin: @padding 10px;
     }
 }
 
@@ -2063,15 +2065,15 b' BIN_FILENODE = 7'
 
 // Files
 .edit-file-title {
-    border-bottom: @border-thickness solid @border-default-color;
-
-    .breadcrumbs {
-        margin-bottom: 0;
+    font-size: 16px;
+
+    .title-heading {
+      padding: 2px;
     }
 }
 
 .edit-file-fieldset {
-    margin-top: @sidebarpadding;
+    margin: @sidebarpadding 0;
 
     .fieldset {
         .left-label {
@@ -2120,6 +2122,27 b' BIN_FILENODE = 7'
     margin: 0 0 0 10px;
 }
 
+.file-upload-transaction-wrapper {
+    margin-top: 57px;
+    clear: both;
+}
+
+.file-upload-transaction-wrapper .error {
+    color: @color5;
+}
+
+.file-upload-transaction {
+    min-height: 200px;
+    padding: 54px;
+    border: 1px solid @grey5;
+    text-align: center;
+    clear: both;
+}
+
+.file-upload-transaction i {
+    font-size: 48px
+}
+
 h3.files_location{
     line-height: 2.4em;
 }
@@ -2308,6 +2331,101 b' h3.files_location{'
 }
 
 
+.edit-file-fieldset #location,
+.edit-file-fieldset #filename {
+  display: flex;
+  width: -moz-available; /* WebKit-based browsers will ignore this. */
+  width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+  width: fill-available;
+  border: 0;
+}
+
+.path-items {
+  display: flex;
+  padding: 0;
+  border: 1px solid #eeeeee;
+  width: 100%;
+  float: left;
+
+  .breadcrumb-path {
+    line-height: 30px;
+    padding: 0 4px;
+    white-space: nowrap;
+  }
+
+  .location-path {
+    width: -moz-available; /* WebKit-based browsers will ignore this. */
+    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
+    width: fill-available;
+
+    .file-name-input {
+      padding: 0.5em 0;
+    }
+
+  }
+
+  ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    list-style-type: none;
+  }
+}
+
+.editor-items {
+  height: 40px;
+  margin: 10px 0 -17px 10px;
+
+  .editor-action {
+    cursor: pointer;
+  }
+
+  .editor-action.active {
+    border-bottom: 2px solid #5C5C5C;
+  }
+
+  li {
+    list-style-type: none;
+  }
+}
+
+.edit-file-fieldset .message textarea {
+  border: 1px solid #eeeeee;
+}
+
+#files_data .codeblock {
+  background-color: #F5F5F5;
+}
+
+#editor_preview {
+  background: white;
+}
+
+.show-editor {
+  padding: 10px;
+  background-color: white;
+
+}
+
+.show-preview {
+  padding: 10px;
+  background-color: white;
+  border-left: 1px solid #eeeeee;
+}
+
+
+
+
+
+
+
+
+
+
+
+
 // Search
 
 .search-form{
@@ -2577,27 +2695,28 b' form.markup-form {'
   padding: 20px;
 }
 
-.dropzone {
+.dropzone,
+.dropzone-pure {
     border: 2px dashed @grey5;
     border-radius: 5px;
     background: white;
     min-height: 200px;
     padding: 54px;
-}
-.dropzone .dz-message {
-    font-weight: 700;
-}
-
-.dropzone .dz-message {
-    text-align: center;
-    margin: 2em 0;
+
+  .dz-message {
+      font-weight: 700;
+      text-align: center;
+      margin: 2em 0;
+  }
+
 }
 
 .dz-preview {
-    margin: 10px 0px !important;
+    margin: 10px 0 !important;
     position: relative;
     vertical-align: top;
     padding: 10px;
+    border-bottom: 1px solid @grey5;
 }
 
 .dz-filename {
@@ -2605,6 +2724,10 b' form.markup-form {'
     float:left;
 }
 
+.dz-sending {
+  float: right;
+}
+
 .dz-response {
   clear:both
 }
@@ -2615,4 +2738,6 b' form.markup-form {'
 
 .dz-error-message {
     color: @alert2;
-}
  No newline at end of file
+    padding-top: 10px;
+    clear: both;
+}

rhodecode/public/js/rhodecode/routes.js

@@ -149,6 +149,7 b' function registerRCRoutes() {'
     pyroutes.register('repo_group_list_data', '/_repo_groups', []);
     pyroutes.register('goto_switcher_data', '/_goto_data', []);
     pyroutes.register('markup_preview', '/_markup_preview', []);
+    pyroutes.register('file_preview', '/_file_preview', []);
     pyroutes.register('store_user_session_value', '/_store_session_attr', []);
     pyroutes.register('journal', '/_admin/journal', []);
     pyroutes.register('journal_rss', '/_admin/journal/rss', []);

rhodecode/public/js/src/rhodecode/codemirror.js

@@ -204,7 +204,12 b' var CodeMirrorCompleteAfter = function(c'
 };
 
 var initCodeMirror = function(textAreadId, resetUrl, focus, options) {
-  var ta = $('#' + textAreadId).get(0);
+  if (textAreadId.substr(0,1) === "#"){
+    var ta = $(textAreadId).get(0);
+  }else {
+    var ta = $('#' + textAreadId).get(0);
+  }
+
   if (focus === undefined) {
       focus = true;
   }
@@ -644,18 +649,6 b' var fillCodeMirrorOptions = function(tar'
   }
 };
 
-var CodeMirrorPreviewEnable = function(edit_mode) {
-  // in case it a preview enabled mode enable the button
-  if (['markdown', 'rst', 'gfm'].indexOf(edit_mode) !== -1) {
-    $('#render_preview').removeClass('hidden');
-  }
-  else {
-    if (!$('#render_preview').hasClass('hidden')) {
-      $('#render_preview').addClass('hidden');
-    }
-  }
-};
-
 
  /* markup form */
 (function(mod) {

rhodecode/public/js/src/rhodecode/files.js

@@ -409,3 +409,109 b' var showAuthors = function(elem, annotat'
         $('#file_authors_title').html(_gettext('All Authors'))
     })
 };
+
+
+(function (mod) {
+
+    if (typeof exports == "object" && typeof module == "object") {
+        // CommonJS
+        module.exports = mod();
+    } else {
+        // Plain browser env
+        (this || window).FileEditor = mod();
+    }
+
+})(function () {
+    "use strict";
+
+    function FileEditor(textAreaElement, options) {
+        if (!(this instanceof FileEditor)) {
+            return new FileEditor(textAreaElement, options);
+        }
+        // bind the element instance to our Form
+        var te = $(textAreaElement).get(0);
+        if (te !== undefined) {
+            te.FileEditor = this;
+        }
+
+        this.modes_select = '#set_mode';
+        this.filename_selector = '#filename';
+        this.commit_btn_selector = '#commit_btn';
+        this.line_wrap_selector = '#line_wrap';
+        this.editor_preview_selector = '#editor_preview';
+
+        if (te !== undefined) {
+            this.cm = initCodeMirror(textAreaElement, null, false);
+        }
+
+        // FUNCTIONS and helpers
+        var self = this;
+
+        this.submitHandler = function() {
+            $(self.commit_btn_selector).on('click', function(e) {
+
+                var filename = $(self.filename_selector).val();
+                if (filename === "") {
+                    alert("Missing filename");
+                    e.preventDefault();
+                }
+
+                var button = $(this);
+                if (button.hasClass('clicked')) {
+                    button.attr('disabled', true);
+                } else {
+                    button.addClass('clicked');
+                }
+            });
+        };
+        this.submitHandler();
+
+        // on select line wraps change the editor
+        this.lineWrapHandler = function () {
+            $(self.line_wrap_selector).on('change', function (e) {
+                var selected = e.currentTarget;
+                var line_wraps = {'on': true, 'off': false}[selected.value];
+                setCodeMirrorLineWrap(self.cm, line_wraps)
+            });
+        };
+        this.lineWrapHandler();
+
+
+        this.showPreview = function () {
+
+            var _text = self.cm.getValue();
+            var _file_path = $(self.filename_selector).val();
+            if (_text && _file_path) {
+                $('.show-preview').addClass('active');
+                $('.show-editor').removeClass('active');
+
+                $(self.editor_preview_selector).show();
+                $(self.cm.getWrapperElement()).hide();
+
+
+                var post_data = {'text': _text, 'file_path': _file_path, 'csrf_token': CSRF_TOKEN};
+                $(self.editor_preview_selector).html(_gettext('Loading ...'));
+
+                var url = pyroutes.url('file_preview');
+
+                ajaxPOST(url, post_data, function (o) {
+                    $(self.editor_preview_selector).html(o);
+                })
+            }
+
+        };
+
+        this.showEditor = function () {
+            $(self.editor_preview_selector).hide();
+            $('.show-editor').addClass('active');
+            $('.show-preview').removeClass('active');
+
+            $(self.cm.getWrapperElement()).show();
+        };
+
+
+    }
+
+    return FileEditor;
+});
+

rhodecode/templates/files/files_add.mako

@@ -1,7 +1,7 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
-    ${_('%s Files Add') % c.repo_name}
+    ${_('{} Files Add').format(c.repo_name)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
@@ -11,58 +11,60 b''
     ${self.menu_items(active='repositories')}
 </%def>
 
-<%def name="breadcrumbs_links()">
-    ${_('Add new file')} @ ${h.show_id(c.commit)} ${_('Branch')}: ${c.commit.branch}
-</%def>
+<%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='files')}
 </%def>
 
 <%def name="main()">
+
 <div class="box">
 
     <div class="edit-file-title">
-        ${self.breadcrumbs()}
+        <span class="title-heading">${_('Add new file')} @ <code>${h.show_id(c.commit)}</code></span>
+        <span class="tag branchtag"><i class="icon-branch"></i> ${c.commit.branch}</span>
     </div>
 
-    ${h.secure_form(h.route_path('repo_files_create_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', enctype="multipart/form-data", class_="form-horizontal", request=request)}
+    ${h.secure_form(h.route_path('repo_files_create_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', request=request)}
     <div class="edit-file-fieldset">
-        <div class="fieldset">
-            <div id="destination-label" class="left-label">
-                ${_('Path')}:
-            </div>
-            <div class="right-content">
+        <div class="path-items">
+            <ul>
+            <li class="breadcrumb-path">
                 <div>
-                    ${h.files_breadcrumbs(c.repo_name,c.commit.raw_id,c.f_path, request.GET.get('at'))} /
-                    <input type="input-small" value="${c.f_path}" size="46" name="location" id="location">
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path='')}"><i class="icon-home"></i></a> /
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path)}">${c.f_path}</a> ${('/' if c.f_path else '')}
                 </div>
-            </div>
-        </div>
-        <div id="filename_container" class="fieldset">
-            <div class="filename-label left-label">
-                ${_('Filename')}:
-            </div>
-            <div class="right-content">
-                <input class="input-small" type="text" value="" size="46" name="filename" id="filename">
-
-            </div>
+            </li>
+            <li class="location-path">
+                <input  class="file-name-input input-small" type="text" value="" name="filename" id="filename" placeholder="${_('Filename e.g example.py, or docs/readme.md')}">
+            </li>
+            </ul>
         </div>
 
     </div>
 
     <div class="table">
         <div id="files_data">
+
             <div id="codeblock" class="codeblock">
-            <div class="code-header form" id="set_mode_header">
-                <div class="fields">
-                    ${h.dropdownmenu('set_mode','plain',[('plain',_('plain'))],enable_filter=True)}
-                    <label for="line_wrap">${_('line wraps')}</label>
-                    ${h.dropdownmenu('line_wrap', 'off', [('on', _('on')), ('off', _('off')),])}
+                <div class="editor-items">
+                    <div class="editor-action active show-editor pull-left" onclick="fileEditor.showEditor(); return false">
+                        ${_('Edit')}
+                    </div>
+
+                    <div class="editor-action show-preview pull-left"  onclick="fileEditor.showPreview(); return false">
+                        ${_('Preview')}
+                    </div>
 
-                    <div id="render_preview" class="btn btn-small preview hidden" >${_('Preview')}</div>
+                    <div class="pull-right">
+                        ${h.dropdownmenu('line_wrap', 'off', [('on', _('Line wraps on')), ('off', _('line wraps off'))], extra_classes=['last-item'])}
+                    </div>
+                    <div class="pull-right">
+                        ${h.dropdownmenu('set_mode','plain',[('plain', _('plain'))], enable_filter=True)}
+                    </div>
                 </div>
-            </div>
+
                 <div id="editor_container">
                     <pre id="editor_pre"></pre>
                     <textarea id="editor" name="content" ></textarea>
@@ -74,109 +76,35 b''
 
     <div class="edit-file-fieldset">
         <div class="fieldset">
-            <div id="commit-message-label" class="commit-message-label left-label">
-                ${_('Commit Message')}:
-            </div>
-            <div class="right-content">
-                <div class="message">
-                    <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
-                </div>
+            <div class="message">
+                <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
             </div>
         </div>
-        <div class="pull-right">
-            ${h.reset('reset',_('Cancel'),class_="btn btn-small")}
-            ${h.submit('commit_btn',_('Commit changes'),class_="btn btn-small btn-success")}
+        <div class="pull-left">
+            ${h.submit('commit_btn',_('Commit changes'), class_="btn btn-small btn-success")}
         </div>
     </div>
     ${h.end_form()}
 </div>
+
 <script type="text/javascript">
 
-    $('#commit_btn').on('click', function() {
-        var button = $(this);
-        if (button.hasClass('clicked')) {
-            button.attr('disabled', true);
-        } else {
-            button.addClass('clicked');
-        }
-    });
-
-    var hide_upload = function(){
-        $('#files_data').show();
-        $('#upload_file_container').hide();
-        $('#filename_container').show();
-    };
+    $(document).ready(function () {
+        var modes_select = $('#set_mode');
+        var filename_selector = '#filename';
+        fillCodeMirrorOptions(modes_select);
 
-    $('#file_enable').on('click', function(e){
-        e.preventDefault();
-        hide_upload();
-    });
-
-    var renderer = "";
-    var reset_url = "${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}";
-    var myCodeMirror = initCodeMirror('editor', reset_url, false);
-
-    var modes_select = $('#set_mode');
-    fillCodeMirrorOptions(modes_select);
-
-    var filename_selector = '#filename';
-    var callback = function(filename, mimetype, mode){
-        CodeMirrorPreviewEnable(mode);
-    };
-    // on change of select field set mode
-    setCodeMirrorModeFromSelect(
-            modes_select, filename_selector, myCodeMirror, callback);
-
-    // on entering the new filename set mode, from given extension
-    setCodeMirrorModeFromInput(
-        modes_select, filename_selector, myCodeMirror, callback);
+        fileEditor = new FileEditor('#editor');
 
-    // if the file is renderable set line wraps automatically
-    if (renderer !== ""){
-        var line_wrap = 'on';
-        $($('#line_wrap option[value="'+line_wrap+'"]')[0]).attr("selected", "selected");
-        setCodeMirrorLineWrap(myCodeMirror, true);
-    }
-
-    // on select line wraps change the editor
-    $('#line_wrap').on('change', function(e){
-        var selected = e.currentTarget;
-        var line_wraps = {'on': true, 'off': false}[selected.value];
-        setCodeMirrorLineWrap(myCodeMirror, line_wraps)
-    });
-
-    // render preview/edit button
-    $('#render_preview').on('click', function(e){
-        if($(this).hasClass('preview')){
-            $(this).removeClass('preview');
-            $(this).html("${_('Edit')}");
-            $('#editor_preview').show();
-            $(myCodeMirror.getWrapperElement()).hide();
+        // on change of select field set mode
+        setCodeMirrorModeFromSelect(modes_select, filename_selector, fileEditor.cm, null);
 
-            var possible_renderer = {
-                'rst':'rst',
-                'markdown':'markdown',
-                'gfm': 'markdown'}[myCodeMirror.getMode().name];
-            var _text = myCodeMirror.getValue();
-            var _renderer = possible_renderer || DEFAULT_RENDERER;
-            var post_data = {'text': _text, 'renderer': _renderer, 'csrf_token': CSRF_TOKEN};
-            $('#editor_preview').html(_gettext('Loading ...'));
-            var url = pyroutes.url('repo_commit_comment_preview',
-                    {'repo_name': '${c.repo_name}',
-                     'commit_id': '${c.commit.raw_id}'});
+        // on entering the new filename set mode, from given extension
+        setCodeMirrorModeFromInput(modes_select, filename_selector, fileEditor.cm, null);
 
-            ajaxPOST(url, post_data, function(o){
-                $('#editor_preview').html(o);
-            })
-        }
-        else{
-            $(this).addClass('preview');
-            $(this).html("${_('Preview')}");
-            $('#editor_preview').hide();
-            $(myCodeMirror.getWrapperElement()).show();
-        }
+        $('#filename').focus();
+
     });
-    $('#filename').focus();
 
 </script>
 </%def>

rhodecode/templates/files/files_delete.mako

@@ -1,7 +1,7 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
-    ${_('%s Files Delete') % c.repo_name}
+    ${_('{} Files Delete').format(c.repo_name)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
@@ -11,29 +11,36 b''
     ${self.menu_items(active='repositories')}
 </%def>
 
-<%def name="breadcrumbs_links()">
-    ${_('Delete file')} @ ${h.show_id(c.commit)}
-</%def>
+<%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='files')}
 </%def>
 
 <%def name="main()">
+
 <div class="box">
+
     <div class="edit-file-title">
-        ${self.breadcrumbs()}
+        <span class="title-heading">${_('Delete file')} @ <code>${h.show_id(c.commit)}</code></span>
+        <span class="tag branchtag"><i class="icon-branch"></i> ${c.commit.branch}</span>
     </div>
-    ${h.secure_form(h.route_path('repo_files_delete_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', class_="form-horizontal", request=request)}
+
+    ${h.secure_form(h.route_path('repo_files_delete_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', request=request)}
     <div class="edit-file-fieldset">
-        <div class="fieldset">
-            <div id="destination-label" class="left-label">
-                ${_('Path')}:
-            </div>
-            <div class="right-content">
-                <span id="path-breadcrumbs">${h.files_breadcrumbs(c.repo_name,c.commit.raw_id,c.f_path, request.GET.get('at'))}</span>
-            </div>
+        <div class="path-items">
+            <li class="breadcrumb-path">
+                <div>
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path='')}"><i class="icon-home"></i></a> /
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.file.dir_path)}">${c.file.dir_path}</a> ${('/' if c.file.dir_path else '')}
+                </div>
+            </li>
+            <li class="location-path">
+                <input type="hidden" value="${c.f_path}" name="root_path">
+                <input  class="file-name-input input-small" type="text" value="${c.file.name}" name="filename" id="filename" disabled="disabled">
+            </li>
         </div>
+
     </div>
 
     <div id="codeblock" class="codeblock delete-file-preview">
@@ -53,20 +60,26 b''
 
     <div class="edit-file-fieldset">
         <div class="fieldset">
-            <div id="commit-message-label" class="commit-message-label left-label">
-                ${_('Commit Message')}:
-            </div>
-            <div class="right-content">
-                <div class="message">
-                    <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
-                </div>
+            <div class="message">
+                <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
             </div>
         </div>
-        <div class="pull-right">
-            ${h.reset('reset',_('Cancel'),class_="btn btn-small btn-danger")}
-            ${h.submit('commit',_('Delete File'),class_="btn btn-small btn-danger-action")}
+        <div class="pull-left">
+            ${h.submit('commit',_('Commit changes'),class_="btn btn-small btn-danger-action")}
         </div>
     </div>
     ${h.end_form()}
 </div>
+
+
+<script type="text/javascript">
+
+    $(document).ready(function () {
+
+        fileEditor = new FileEditor('#editor');
+
+    });
+
+</script>
+
 </%def>

rhodecode/templates/files/files_edit.mako

@@ -1,7 +1,7 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
-    ${_('%s File Edit') % c.repo_name}
+    ${_('{} Files Edit').format(c.repo_name)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
@@ -11,184 +11,110 b''
     ${self.menu_items(active='repositories')}
 </%def>
 
-<%def name="breadcrumbs_links()">
-    ${_('Edit file')} @ ${h.show_id(c.commit)}
-</%def>
+<%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='files')}
 </%def>
 
 <%def name="main()">
-<% renderer = h.renderer_from_filename(c.f_path)%>
+
 <div class="box">
+
     <div class="edit-file-title">
-        ${self.breadcrumbs()}
+        <span class="title-heading">${_('Edit file')} @ <code>${h.show_id(c.commit)}</code></span>
+        <span class="tag branchtag"><i class="icon-branch"></i> ${c.commit.branch}</span>
     </div>
+
+    ${h.secure_form(h.route_path('repo_files_update_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', request=request)}
     <div class="edit-file-fieldset">
-        <div class="fieldset">
-            <div id="destination-label" class="left-label">
-                ${_('Path')}:
-            </div>
-            <div class="right-content">
-                <div id="specify-custom-path-container">
-                    <span id="path-breadcrumbs">${h.files_breadcrumbs(c.repo_name,c.commit.raw_id,c.f_path, request.GET.get('at'))}</span>
+        <div class="path-items">
+            <ul>
+            <li class="breadcrumb-path">
+                <div>
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path='')}"><i class="icon-home"></i></a> /
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.file.dir_path)}">${c.file.dir_path}</a> ${('/' if c.file.dir_path else '')}
                 </div>
-            </div>
+            </li>
+            <li class="location-path">
+                <input type="hidden" value="${c.f_path}" name="root_path">
+                <input  class="file-name-input input-small" type="text" value="${c.file.name}" name="filename" id="filename" placeholder="${_('Filename e.g example.py, or docs/readme.md')}">
+            </li>
+            </ul>
         </div>
+
     </div>
 
     <div class="table">
-        ${h.secure_form(h.route_path('repo_files_update_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', request=request)}
-        <div id="codeblock" class="codeblock" >
-        <div class="code-header">
-            <div class="stats">
-                <i class="icon-file"></i>
-                <span class="item">${h.link_to("r%s:%s" % (c.file.commit.idx,h.short_id(c.file.commit.raw_id)),h.route_path('repo_commit',repo_name=c.repo_name,commit_id=c.file.commit.raw_id))}</span>
-                <span class="item">${h.format_byte_size_binary(c.file.size)}</span>
-                <span class="item last">${c.file.mimetype}</span>
-                <div class="buttons">
-                  <a class="btn btn-mini" href="${h.route_path('repo_commits_file',repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path)}">
-                      <i class="icon-time"></i> ${_('history')}
-                  </a>
+        <div id="files_data">
 
-                  % if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
-                   % if not c.file.is_binary:
-                      %if True:
-                        ${h.link_to(_('source'),    h.route_path('repo_files',          repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path),class_="btn btn-mini")}
-                      %else:
-                        ${h.link_to(_('annotation'),h.route_path('repo_files:annotated',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path),class_="btn btn-mini")}
-                      %endif
+            <div id="codeblock" class="codeblock">
+                <div class="editor-items">
+                    <div class="editor-action active show-editor pull-left" onclick="fileEditor.showEditor(); return false">
+                        ${_('Edit')}
+                    </div>
+
+                    <div class="editor-action show-preview pull-left"  onclick="fileEditor.showPreview(); return false">
+                        ${_('Preview')}
+                    </div>
 
-                      <a class="btn btn-mini" href="${h.route_path('repo_file_raw',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
-                          ${_('raw')}
-                      </a>
-                      <a class="btn btn-mini" href="${h.route_path('repo_file_download',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
-                          <i class="icon-archive"></i> ${_('download')}
-                      </a>
-                   % endif
-                  % endif
+                    <div class="pull-right">
+                        ${h.dropdownmenu('line_wrap', 'off', [('on', _('Line wraps on')), ('off', _('line wraps off')),])}
+                    </div>
+                    <div class="pull-right">
+                        ${h.dropdownmenu('set_mode','plain',[('plain', _('plain'))],enable_filter=True)}
+                    </div>
                 </div>
-            </div>
-            <div class="form">
-                <label for="set_mode">${_('Editing file')}:</label>
-                ${'%s /' % c.file.dir_path if c.file.dir_path else c.file.dir_path}
-                <input id="filename" type="text" name="filename" value="${c.file.name}">
 
-                ${h.dropdownmenu('set_mode','plain',[('plain',_('plain'))],enable_filter=True)}
-                <label for="line_wrap">${_('line wraps')}</label>
-                ${h.dropdownmenu('line_wrap', 'off', [('on', _('on')), ('off', _('off')),])}
-
-                <div id="render_preview" class="btn btn-small preview hidden">${_('Preview')}</div>
-            </div>
-        </div>
-            <div id="editor_container">
-                <pre id="editor_pre"></pre>
-                <textarea id="editor" name="content" >${h.escape(c.file.content)|n}</textarea>
-                <div id="editor_preview" ></div>
+                <div id="editor_container">
+                    <pre id="editor_pre"></pre>
+                    <textarea id="editor" name="content" >${h.escape(c.file.content)|n}</textarea>
+                    <div id="editor_preview" ></div>
+                </div>
             </div>
         </div>
     </div>
 
     <div class="edit-file-fieldset">
         <div class="fieldset">
-            <div id="commit-message-label" class="commit-message-label left-label">
-                ${_('Commit Message')}:
-            </div>
-            <div class="right-content">
-                <div class="message">
-                    <textarea id="commit" name="message" placeholder="${c.default_message}"></textarea>
-                </div>
+            <div class="message">
+                <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
             </div>
         </div>
-        <div class="pull-right">
-            ${h.reset('reset',_('Cancel'),class_="btn btn-small")}
-            ${h.submit('commit',_('Commit changes'),class_="btn btn-small btn-success")}
+        <div class="pull-left">
+            ${h.submit('commit_btn',_('Commit changes'), class_="btn btn-small btn-success")}
         </div>
     </div>
     ${h.end_form()}
 </div>
 
 <script type="text/javascript">
-$(document).ready(function(){
-    var renderer = "${renderer}";
-    var reset_url = "${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.file.path)}";
-    var myCodeMirror = initCodeMirror('editor', reset_url);
 
+$(document).ready(function() {
     var modes_select = $('#set_mode');
+    var filename_selector = '#filename';
     fillCodeMirrorOptions(modes_select);
 
+    fileEditor = new FileEditor('#editor');
+
     // try to detect the mode based on the file we edit
-    var mimetype = "${c.file.mimetype}";
-    var detected_mode = detectCodeMirrorMode(
-            "${c.file.name}", mimetype);
+    var detected_mode = detectCodeMirrorMode("${c.file.name}", "${c.file.mimetype}");
 
-    if(detected_mode){
-        setCodeMirrorMode(myCodeMirror, detected_mode);
-        $(modes_select).select2("val", mimetype);
-        $(modes_select).change();
-        setCodeMirrorMode(myCodeMirror, detected_mode);
+    if (detected_mode) {
+        setCodeMirrorMode(fileEditor.cm, detected_mode);
+
+        var mimetype = $(modes_select).find("option[mode={0}]".format(detected_mode)).val();
+        $(modes_select).select2("val", mimetype).trigger('change');
     }
 
-    var filename_selector = '#filename';
-    var callback = function(filename, mimetype, mode){
-        CodeMirrorPreviewEnable(mode);
-    };
     // on change of select field set mode
-    setCodeMirrorModeFromSelect(
-            modes_select, filename_selector, myCodeMirror, callback);
+    setCodeMirrorModeFromSelect(modes_select, filename_selector, fileEditor.cm, null);
 
     // on entering the new filename set mode, from given extension
-    setCodeMirrorModeFromInput(
-        modes_select, filename_selector, myCodeMirror, callback);
-
-    // if the file is renderable set line wraps automatically
-    if (renderer !== ""){
-        var line_wrap = 'on';
-        $($('#line_wrap option[value="'+line_wrap+'"]')[0]).attr("selected", "selected");
-        setCodeMirrorLineWrap(myCodeMirror, true);
-    }
-    // on select line wraps change the editor
-    $('#line_wrap').on('change', function(e){
-        var selected = e.currentTarget;
-        var line_wraps = {'on': true, 'off': false}[selected.value];
-        setCodeMirrorLineWrap(myCodeMirror, line_wraps)
-    });
+    setCodeMirrorModeFromInput(modes_select, filename_selector, fileEditor.cm, null);
 
-    // render preview/edit button
-    if (mimetype === 'text/x-rst' || mimetype === 'text/plain') {
-        $('#render_preview').removeClass('hidden');
-    }
-    $('#render_preview').on('click', function(e){
-        if($(this).hasClass('preview')){
-            $(this).removeClass('preview');
-            $(this).html("${_('Edit')}");
-            $('#editor_preview').show();
-            $(myCodeMirror.getWrapperElement()).hide();
+});
 
-            var possible_renderer = {
-                'rst':'rst',
-                'markdown':'markdown',
-                'gfm': 'markdown'}[myCodeMirror.getMode().name];
-            var _text = myCodeMirror.getValue();
-            var _renderer = possible_renderer || DEFAULT_RENDERER;
-            var post_data = {'text': _text, 'renderer': _renderer, 'csrf_token': CSRF_TOKEN};
-            $('#editor_preview').html(_gettext('Loading ...'));
-            var url = pyroutes.url('repo_commit_comment_preview',
-                    {'repo_name': '${c.repo_name}',
-                     'commit_id': '${c.commit.raw_id}'});
-            ajaxPOST(url, post_data, function(o){
-                $('#editor_preview').html(o);
-            })
-        }
-        else{
-            $(this).addClass('preview');
-            $(this).html("${_('Preview')}");
-            $('#editor_preview').hide();
-            $(myCodeMirror.getWrapperElement()).show();
-        }
-    });
 
-})
 </script>
 </%def>

rhodecode/templates/files/files_source.mako

@@ -23,17 +23,17 b''
 
             %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
               ## on branch head, can edit files
-              %if c.on_branch_head and c.branch_or_raw_id and not c.file.is_binary:
+              %if c.on_branch_head and c.branch_or_raw_id:
                   ## binary files are delete only
                   % if c.file.is_binary:
                     ${h.link_to(_('Edit'), '#Edit', class_="btn btn-default disabled tooltip", title=_('Editing binary files not allowed'))}
-                    ${h.link_to(_('Delete'), h.route_path('repo_files_remove_file',repo_name=c.repo_name,commit_id=c.branch_or_raw_id,f_path=c.f_path, _anchor='edit'),class_="btn btn-danger")}
+                    ${h.link_to(_('Delete'), h.route_path('repo_files_remove_file',repo_name=c.repo_name,commit_id=c.branch_or_raw_id,f_path=c.f_path),class_="btn btn-danger")}
                   % else:
-                    <a  class="btn btn-default" href="${h.route_path('repo_files_edit_file',repo_name=c.repo_name,commit_id=c.branch_or_raw_id,f_path=c.f_path, _anchor='edit')}">
+                    <a  class="btn btn-default" href="${h.route_path('repo_files_edit_file',repo_name=c.repo_name,commit_id=c.branch_or_raw_id,f_path=c.f_path)}">
                         ${_('Edit on branch: ')}<code>${c.branch_name}</code>
                     </a>
 
-                    <a class="btn btn-danger" href="${h.route_path('repo_files_remove_file',repo_name=c.repo_name,commit_id=c.branch_or_raw_id,f_path=c.f_path, _anchor='edit')}">
+                    <a class="btn btn-danger" href="${h.route_path('repo_files_remove_file',repo_name=c.repo_name,commit_id=c.branch_or_raw_id,f_path=c.f_path)}">
                         ${_('Delete')}
                     </a>
                   % endif

rhodecode/templates/files/files_upload.mako

@@ -1,7 +1,7 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
-    ${_('%s Files Add') % c.repo_name}
+    ${_('{} Files Upload').format(c.repo_name)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
@@ -11,180 +11,197 b''
     ${self.menu_items(active='repositories')}
 </%def>
 
-<%def name="breadcrumbs_links()">
-    ${_('Add new file')} @ ${h.show_id(c.commit)} ${_('Branch')}: ${c.commit.branch}
-</%def>
+<%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='files')}
 </%def>
 
 <%def name="main()">
+
 <div class="box">
+    ## Template for uploads
+    <div style="display: none" id="tpl-dropzone">
+        <div class="dz-preview dz-file-preview">
+            <div class="dz-details">
+
+                <div class="dz-filename">
+                    <span data-dz-name></span>
+                </div>
+                <div class="dz-filename-size">
+                    <span class="dz-size" data-dz-size></span>
 
-    <div class="edit-file-title">
-        ${self.breadcrumbs()}
+                </div>
+
+                <div class="dz-sending" style="display: none">${_('Uploading...')}</div>
+                <div class="dz-response" style="display: none">
+                    ${_('Uploaded')} 100%
+                </div>
+
+            </div>
+            <div class="dz-progress">
+                <span class="dz-upload" data-dz-uploadprogress></span>
+            </div>
+
+            <div class="dz-error-message">
+            </div>
+        </div>
     </div>
 
-    ${h.secure_form(h.route_path('repo_files_create_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path), id='eform', enctype="multipart/form-data", class_="form-horizontal", request=request)}
+    <div class="edit-file-title">
+        <span class="title-heading">${_('Upload new file')} @ <code>${h.show_id(c.commit)}</code></span>
+        <span class="tag branchtag"><i class="icon-branch"></i> ${c.commit.branch}</span>
+    </div>
+
+    <% form_url = h.route_path('repo_files_upload_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path) %>
+    ##${h.secure_form(form_url, id='eform', enctype="multipart/form-data", request=request)}
     <div class="edit-file-fieldset">
-        <div class="fieldset">
-            <div id="destination-label" class="left-label">
-                ${_('Path')}:
-            </div>
-            <div class="right-content">
+        <div class="path-items">
+            <ul>
+            <li class="breadcrumb-path">
                 <div>
-                    ${h.files_breadcrumbs(c.repo_name,c.commit.raw_id,c.f_path, request.GET.get('at'))} /
-                    <input type="input-small" value="${c.f_path}" size="46" name="location" id="location">
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path='')}"><i class="icon-home"></i></a> /
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path)}">${c.f_path}</a> ${('/' if c.f_path else '')}
                 </div>
-            </div>
+            </li>
+            <li class="location-path">
+
+            </li>
+            </ul>
         </div>
 
-        <div id="upload_file_container" class="fieldset">
-            <div class="filename-label left-label">
-                ${_('Filename')}:
-            </div>
-            <div class="right-content">
-                <input class="input-small" type="text" value="" size="46" name="filename_upload" id="filename_upload" placeholder="${_('No file selected')}">
-            </div>
-            <div class="filename-label left-label file-upload-label">
-                ${_('Upload file')}:
-            </div>
-            <div class="right-content file-upload-input">
-                <label for="upload_file" class="btn btn-default">Browse</label>
+    </div>
+
+    <div class="upload-form table">
+        <div id="files_data">
 
-                <input type="file" name="upload_file" id="upload_file">
+            <div class="dropzone-wrapper" id="file-uploader">
+                <div class="dropzone-pure">
+                    <div class="dz-message">
+                    <i class="icon-upload" style="font-size:36px"></i></br>
+                    ${_("Drag'n Drop files here or")} <span class="link">${_('Choose your files')}</span>.<br>
+                    </div>
+                </div>
+
             </div>
         </div>
 
     </div>
 
-    <div class="table">
-        <div id="files_data">
-            <div id="codeblock" class="codeblock">
-            <div class="code-header form" id="set_mode_header">
-                <div class="fields">
-                    ${h.dropdownmenu('set_mode','plain',[('plain',_('plain'))],enable_filter=True)}
-                    <label for="line_wrap">${_('line wraps')}</label>
-                    ${h.dropdownmenu('line_wrap', 'off', [('on', _('on')), ('off', _('off')),])}
-
-                    <div id="render_preview" class="btn btn-small preview hidden" >${_('Preview')}</div>
-                </div>
+    <div class="upload-form edit-file-fieldset">
+        <div class="fieldset">
+            <div class="message">
+                <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
             </div>
-                <div id="editor_container">
-                    <pre id="editor_pre"></pre>
-                    <textarea id="editor" name="content" ></textarea>
-                    <div id="editor_preview"></div>
-                </div>
-            </div>
+        </div>
+        <div class="pull-left">
+            ${h.submit('commit_btn',_('Commit changes'), class_="btn btn-small btn-success")}
         </div>
     </div>
+    ##${h.end_form()}
 
-    <div class="edit-file-fieldset">
-        <div class="fieldset">
-            <div id="commit-message-label" class="commit-message-label left-label">
-                ${_('Commit Message')}:
-            </div>
-            <div class="right-content">
-                <div class="message">
-                    <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
-                </div>
-            </div>
-        </div>
-        <div class="pull-right">
-            ${h.reset('reset',_('Cancel'),class_="btn btn-small")}
-            ${h.submit('commit_btn',_('Commit changes'),class_="btn btn-small btn-success")}
-        </div>
+    <div class="file-upload-transaction-wrapper" style="display: none">
+    <div class="file-upload-transaction">
+        <h3>${_('Commiting...')}</h3>
+        <p>${_('Please wait while the files are being uploaded')}</p>
+        <p class="error" style="display: none">
+
+        </p>
+        <i class="icon-spin animate-spin"></i>
+        <p></p>
     </div>
-    ${h.end_form()}
+    </div>
+
 </div>
+
 <script type="text/javascript">
 
-    $('#commit_btn').on('click', function() {
-        var button = $(this);
-        if (button.hasClass('clicked')) {
-            button.attr('disabled', true);
-        } else {
-            button.addClass('clicked');
-        }
-    });
-
-    var hide_upload = function(){
-        $('#files_data').show();
-        $('#upload_file_container').hide();
-        $('#filename_container').show();
-    };
+    $(document).ready(function () {
 
-    $('#file_enable').on('click', function(e){
-        e.preventDefault();
-        hide_upload();
-    });
-
-    var renderer = "";
-    var reset_url = "${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}";
-    var myCodeMirror = initCodeMirror('editor', reset_url, false);
-
-    var modes_select = $('#set_mode');
-    fillCodeMirrorOptions(modes_select);
+        //see: https://www.dropzonejs.com/#configuration
+        myDropzone = new Dropzone("div#file-uploader", {
+            url: "${form_url}",
+            headers: {"X-CSRF-Token": CSRF_TOKEN},
+            paramName: function () {
+                return "files_upload"
+            }, // The name that will be used to transfer the file
+            parallelUploads: 20,
+            maxFiles: 20,
+            uploadMultiple: true,
+            //chunking: true, // use chunking transfer, not supported at the moment
+            //maxFilesize: 2, // in MBs
+            autoProcessQueue: false, // if false queue will not be processed automatically.
+            createImageThumbnails: false,
+            previewTemplate: document.querySelector('#tpl-dropzone').innerHTML,
+            accept: function (file, done) {
+                done();
+            },
+            init: function () {
+                this.on("addedfile", function (file) {
 
-    var filename_selector = '#filename';
-    var callback = function(filename, mimetype, mode){
-        CodeMirrorPreviewEnable(mode);
-    };
-    // on change of select field set mode
-    setCodeMirrorModeFromSelect(
-            modes_select, filename_selector, myCodeMirror, callback);
+                });
+
+                this.on("sending", function (file, xhr, formData) {
+                    formData.append("message", $('#commit').val());
+                    $(file.previewElement).find('.dz-sending').show();
+                });
 
-    // on entering the new filename set mode, from given extension
-    setCodeMirrorModeFromInput(
-        modes_select, filename_selector, myCodeMirror, callback);
+                this.on("success", function (file, response) {
+                    $(file.previewElement).find('.dz-sending').hide();
+                    $(file.previewElement).find('.dz-response').show();
+
+                    if (response.error !== null) {
+                        $('.file-upload-transaction-wrapper .error').html('ERROR: {0}'.format(response.error));
+                        $('.file-upload-transaction-wrapper .error').show();
+                        $('.file-upload-transaction-wrapper i').hide()
+                    }
+
+                    var redirect_url = response.redirect_url || '/';
+                    window.location = redirect_url
 
-    // if the file is renderable set line wraps automatically
-    if (renderer !== ""){
-        var line_wrap = 'on';
-        $($('#line_wrap option[value="'+line_wrap+'"]')[0]).attr("selected", "selected");
-        setCodeMirrorLineWrap(myCodeMirror, true);
-    }
+                });
+
+                this.on("error", function (file, errorMessage, xhr) {
+                    var error = null;
 
-    // on select line wraps change the editor
-    $('#line_wrap').on('change', function(e){
-        var selected = e.currentTarget;
-        var line_wraps = {'on': true, 'off': false}[selected.value];
-        setCodeMirrorLineWrap(myCodeMirror, line_wraps)
-    });
+                    if (xhr !== undefined){
+                        var httpStatus = xhr.status + " " + xhr.statusText;
+                        if (xhr.status >= 500) {
+                            error = httpStatus;
+                        }
+                    }
 
-    // render preview/edit button
-    $('#render_preview').on('click', function(e){
-        if($(this).hasClass('preview')){
-            $(this).removeClass('preview');
-            $(this).html("${_('Edit')}");
-            $('#editor_preview').show();
-            $(myCodeMirror.getWrapperElement()).hide();
+                    if (error === null) {
+                        error = errorMessage.error || errorMessage || httpStatus;
+                    }
+
+                    $(file.previewElement).find('.dz-error-message').html('ERROR: {0}'.format(error));
+                });
+            }
+            });
 
-            var possible_renderer = {
-                'rst':'rst',
-                'markdown':'markdown',
-                'gfm': 'markdown'}[myCodeMirror.getMode().name];
-            var _text = myCodeMirror.getValue();
-            var _renderer = possible_renderer || DEFAULT_RENDERER;
-            var post_data = {'text': _text, 'renderer': _renderer, 'csrf_token': CSRF_TOKEN};
-            $('#editor_preview').html(_gettext('Loading ...'));
-            var url = pyroutes.url('repo_commit_comment_preview',
-                    {'repo_name': '${c.repo_name}',
-                     'commit_id': '${c.commit.raw_id}'});
+        $('#commit_btn').on('click', function(e) {
+            e.preventDefault();
+            var button = $(this);
+            if (button.hasClass('clicked')) {
+                button.attr('disabled', true);
+            } else {
+                button.addClass('clicked');
+            }
 
-            ajaxPOST(url, post_data, function(o){
-                $('#editor_preview').html(o);
-            })
-        }
-        else{
-            $(this).addClass('preview');
-            $(this).html("${_('Preview')}");
-            $('#editor_preview').hide();
-            $(myCodeMirror.getWrapperElement()).show();
-        }
+            var files = myDropzone.getQueuedFiles();
+            if (files.length === 0) {
+                alert("Missing files");
+                e.preventDefault();
+            }
+
+            $('.upload-form').hide();
+            $('.file-upload-transaction-wrapper').show();
+            myDropzone.processQueue();
+
+        });
+
     });
-    $('#filename').focus();
 
 </script>
 </%def>