diff --git a/media/scripts/app/views/dir.js b/media/scripts/app/views/dir.js
index 0c4ad59d97..cb04517f94 100644
--- a/media/scripts/app/views/dir.js
+++ b/media/scripts/app/views/dir.js
@@ -16,6 +16,8 @@ define([
             el: $('#dir-view'),
             path_bar_template: _.template(PathBarTemplate),
             dir_op_bar_template: _.template(DirOpBarTemplate),
+            newDirTemplate: _.template($("#add-new-dir-form-template").html()),
+            newFileTemplate: _.template($("#add-new-file-form-template").html()),
 
             initialize: function(options) {
                 this.$dirent_list = this.$('.repo-file-list tbody');
@@ -57,29 +59,29 @@ define([
             },
 
             renderPath: function() {
-                var dir = this.dir;
-                var path = dir.path,
-                obj = {
-                    path: path,
-                    repo_name: dir.repo_name,
-                };
+                var dir = this.dir,
+                    path = dir.path,
+                    obj = {path: path, repo_name: dir.repo_name};
+
                 if (path != '/') {
                     $.extend(obj, {
                        path_list: path.substr(1).split('/'),
-                       repo_id: dir.repo_id,
+                       repo_id: dir.repo_id
                     });
                 }
+
                 this.$path_bar.html(this.path_bar_template(obj));
             },
 
             renderDirOpBar: function() {
-                var dir = this.dir;
-                var user_perm = dir.user_perm;
+                var dir = this.dir,
+                    user_perm = dir.user_perm;
+
                 this.$dir_op_bar.html($.trim(this.dir_op_bar_template({
                     user_perm: user_perm,
                     encrypted: dir.encrypted,
                     path: dir.path,
-                    repo_id: dir.repo_id,
+                    repo_id: dir.repo_id
                 })));
             },
 
@@ -99,47 +101,95 @@ define([
             },
 
             newDir: function() {
-              var form = $('#add-new-dir-form'),
-              form_id = form.attr('id');
-              form.modal({appendTo:'#main'});
-              $('#simplemodal-container').css({'height':'auto'});
-              var dir = this.dir;
-              var dirView = this;
-              form.submit(function() {
-                var dirent_name = $.trim($('input[name="name"]', form).val());
-                if (!dirent_name) {
-                  //apply_form_error(form_id, "{% trans "It is required." %}");
-                  //apply_form_error(form_id, "It is required.");
-                  return false;
-                }
-                var post_data = {'dirent_name': dirent_name};
-                var post_url = Common.getUrl({name: "new_dir", repo_id: dir.repo_id})
-                  + '?parent_dir=' + encodeURIComponent(dir.path);
-                var after_op_success = function(data) {
-                  $.modal.close();
-                  var now = new Date().getTime()/1000;
-                  var new_dirent = dir.add({
-                    'is_dir': true,
-                    'obj_name': data['name'],
-                    'last_modified': now,
-                    //'last_update': "{% trans "Just now" %}",
-                    'last_update': "Just now",
-                    'p_dpath': data['p_dpath'],
-                  }, {silent:true});
-                  var view = new DirentView({model: new_dirent, dirView: dirView});
-                  $('tr:first', dirView.$dirent_list).before(view.render().el); // put the new dir as the first one
-                };
-                Common.ajaxPost({
-                  'form': form,
-                  'post_url': post_url,
-                  'post_data': post_data,
-                  'after_op_success': after_op_success,
-                  'form_id': form_id
+                var form = $(this.newDirTemplate()),
+                    form_id = form.attr('id'),
+                    dir = this.dir,
+                    dirView = this;
+
+                form.modal({appendTo:'#main'});
+                $('#simplemodal-container').css({'height':'auto'});
+
+                form.submit(function() {
+                    var dirent_name = $.trim($('input[name="name"]', form).val()),
+                        post_data = {'dirent_name': dirent_name},
+                        post_url = Common.getUrl({name: "new_dir", repo_id: dir.repo_id})
+                                   + '?parent_dir=' + encodeURIComponent(dir.path);
+
+                    if (!dirent_name) {
+                      Common.showFormError(form_id, gettext("It is required."));
+                      return false;
+                    };
+
+                    var after_op_success = function(data) {
+                        $.modal.close();
+
+                        var new_dirent = dir.add({
+                            'is_dir': true,
+                            'obj_name': data['name'],
+                            'last_modified': new Date().getTime() / 1000,
+                            'last_update': gettext("Just now"),
+                            'p_dpath': data['p_dpath']
+                        }, {silent:true});
+
+                        var view = new DirentView({model: new_dirent, dirView: dirView});
+                        $('tr:first', dirView.$dirent_list).before(view.render().el); // put the new dir as the first one
+                    };
+
+                    Common.ajaxPost({
+                        'form': form,
+                        'post_url': post_url,
+                        'post_data': post_data,
+                        'after_op_success': after_op_success,
+                        'form_id': form_id
+                    });
+
+                    return false;
                 });
-                return false;
-              });
             },
 
+            newFile: function() {
+                var form = $(this.newFileTemplate()),
+                    form_id = form.attr('id'),
+                    file_name = form.find('input[name="name"]'),
+                    dir = this.dir,
+                    dirView = this;
+
+                form.modal({appendTo:'#main'});
+                $('#simplemodal-container').css({'height':'auto'});
+
+                form.find('.set-file-type').on('click', function() {
+                    file_name.val('.' + $(this).data('filetype'));
+                    Common.setCaretPos(file_name[0], 0);
+                    file_name.focus();
+                });
+
+                form.submit(function() {
+                    var dirent_name = $.trim(file_name.val()),
+                        post_data = {'dirent_name': dirent_name},
+                        post_url = Common.getUrl({name: "new_file", repo_id: dir.repo_id})
+                                   + '?parent_dir=' + encodeURIComponent(dir.path);
+
+                    if (!dirent_name) {
+                      Common.showFormError(form_id, gettext("It is required."));
+                      return false;
+                    };
+
+                    var after_op_success = function(data) {
+                        location.href = Common.getUrl({name: "repo_new_file", repo_id: dir.repo_id})
+                                        + '?p=' + encodeURIComponent(dir.path) + encodeURIComponent(data['name']);
+                    };
+
+                    Common.ajaxPost({
+                        'form': form,
+                        'post_url': post_url,
+                        'post_data': post_data,
+                        'after_op_success': after_op_success,
+                        'form_id': form_id
+                    });
+
+                    return false;
+                });
+            }
       });
 
       return DirView;
diff --git a/media/scripts/common.js b/media/scripts/common.js
index a04c349728..7b70ebb1b6 100644
--- a/media/scripts/common.js
+++ b/media/scripts/common.js
@@ -53,6 +53,7 @@ define([
               case 'cp_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/cp/';
               case 'new_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/new/';
               case 'new_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/new/';
+              case 'repo_new_file': return siteRoot + 'repo/' + options.repo_id + '/files/';
               case 'del_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/delete/';
               case 'mv_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/move/';
               case 'cp_dirents': return siteRoot + 'ajax/repo/' + options.repo_id + '/dirents/copy/';
@@ -118,6 +119,17 @@ define([
             btn.attr('disabled', 'disabled').addClass('btn-disabled');
         },
 
+        setCaretPos: function(inputor, pos) {
+            var range;
+            if (document.selection) {
+                range = inputor.createTextRange();
+                range.move("character", pos);
+                return range.select();
+            } else {
+                return inputor.setSelectionRange(pos, pos);
+            }
+        },
+
         prepareCSRFToken: function(xhr, settings) {
           function getCookie(name) {
             var cookieValue = null;
diff --git a/seahub/templates/js/lib-op-popups.html b/seahub/templates/js/lib-op-popups.html
index 3aac3881b4..8c8069260d 100644
--- a/seahub/templates/js/lib-op-popups.html
+++ b/seahub/templates/js/lib-op-popups.html
@@ -1,5 +1,6 @@
 {% load i18n %}
 
+    <script type="text/template" id="add-new-dir-form-template">
     <form id="add-new-dir-form" action="" method="post" class="hide">{% csrf_token %}
         <h3>{% trans "New Directory" %}</h3>
         <label>{% trans "Directory Name" %}</label><br />
@@ -8,7 +9,9 @@
         <button type="submit" class="submit">{% trans "Submit" %}</button>
         <button class="simplemodal-close">{% trans "Cancel" %}</button>
     </form>
+    </script>
 
+    <script type="text/template" id="add-new-file-form-template">
     <form id="add-new-file-form" action="" method="post" class="hide">{% csrf_token %}
         <h3>{% trans "New File" %}</h3>
         <div id="featured-filetype">
@@ -32,6 +35,7 @@
         <button type="submit" class="submit">{% trans "Submit" %}</button>
         <button class="simplemodal-close">{% trans "Cancel" %}</button>
     </form>
+    </script>
 
     <script type="text/template" id="rename-form-template">
     <form id="rename-form" action="" method="post" class="hide">{% csrf_token %}