--- a/mouchak/server.py
+++ b/mouchak/server.py
@@ -34,8 +34,11 @@
 
 PLUGIN_UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__))
                                     + '/static/user_plugins')
-PLUGIN_ALLOWED_EXTENSIONS = set(['js', 'css'])
 
+ALLOWED_EXTENSIONS = set(['js', 'css', 'jpg', 'JPG', 'png', 'gif', 'PNG',
+                          'svg', 'pdf'])
+#ALLOWED_EXTENSIONS = set(['js', 'css'])
+
 FILE_UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)) +
                                   '/static/uploads')
 
@@ -92,7 +95,7 @@
 
 def allowed_file(filename):
     return '.' in filename and \
-            filename.rsplit('.', 1)[1] in PLUGIN_ALLOWED_EXTENSIONS
+            filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
 
 
 @app.errorhandler(404)

@@ -299,9 +302,43 @@
             #return flask.redirect(flask.url_for('uploaded_file',
             #            filename=filename))
             return flask.jsonify(uploaded = True,
-                                 path=flask.url_for('static', filename =
+                                 path=flask.url_for('static', filename =\
                                                     'user_plugins/'+ filename))
 
+@app.route('/upload', methods=['GET', 'POST'])
+def upload():
+    if flask.request.method == 'POST':
+        print flask.request.files
+        file = flask.request.files['upload-file']
+        if file and allowed_file(file.filename):
+            print 'file ok'
+            filename = secure_filename(file.filename)
+            file.save(os.path.join(app.config['FILE_UPLOAD_FOLDER'], filename))
+
+            return flask.jsonify(uploaded = True, path =\
+                                 flask.url_for('static', filename =\
+                                               'uploads/' + filename))
+
+        else:
+            resp = flask.make_response()
+            print 'file not ok'
+            resp.status_code = 400
+            return resp
+
+    if flask.request.method == 'GET':
+        uploaded_files = os.listdir(app.config['FILE_UPLOAD_FOLDER'])
+        print uploaded_files
+        return flask.jsonify({'uploaded_files': uploaded_files})
+
+@app.route('/upload/<filename>', methods=['DELETE'])
+def removeFile(filename):
+    filepath = os.path.join(app.config['FILE_UPLOAD_FOLDER'], filename)
+    print filepath
+    res = os.remove(filepath)
+    print res
+    return '200 OK'
+
+
 @app.route('/robots.txt')
 @app.route('/crossdomain.xml')
 def static_from_root():
@@ -310,6 +347,7 @@
 
 app.config.from_object(conf)
 app.config['PLUGIN_UPLOAD_FOLDER'] = PLUGIN_UPLOAD_FOLDER
+app.config['FILE_UPLOAD_FOLDER'] = FILE_UPLOAD_FOLDER
 
 import logging,os
 from logging import FileHandler
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -11,7 +11,8 @@
       'click .pagename .remove': 'removePage',
       'click #menu-config': 'showMenu',
       'click #footer-config': 'showFooterConfig',
-      'click #header-config': 'showHeaderConfig'
+      'click #header-config': 'showHeaderConfig',
+      'click #uploads': 'uploads'
     },
     initialize: function() {
       _.bindAll.apply(_, [this].concat(_.functions(this)));
@@ -30,6 +31,7 @@
       this.footerconfigview = new FooterConfigView({model: this.footerconfig});
       this.headerconfig = new M.types.model.header(M.site_content.header);
       this.headerconfigview = new HeaderConfigView({model: this.headerconfig});
+      this.uploadview = new UploadView();
     },
     render: function() {
       // append the page list
@@ -102,6 +104,11 @@
       this.headerconfigview.render();
       return false;
     },
+    uploads: function(event) {
+      event.preventDefault();
+      this.uploadview.render();
+      return false;
+    },
     // validate the page list with menu order list
     validate: function()  {
       //TODO: validate if the menu order list matches with the list of pages
@@ -669,6 +676,97 @@
              ' will be rendered'+
              '\n@delay: (optional) a delay time, after which the notification'+
              ' will be hidden';
+    }
+  });
+
+  /* Upload View */
+  var UploadView = Backbone.View.extend({
+    tagName: 'div',
+    className: 'prettybox-lg',
+    id: 'page',
+    events: {
+      'click #upload-new-file': 'uploadFile',
+      'click .uploaded-item .remove': 'removeFile'
+    },
+    initialize: function() {
+      _.bindAll.apply(_, [this].concat(_.functions(this)));
+      this.template = _.template($('#uploads-template').html());
+    },
+    render: function() {
+      $('#page').remove();
+      $('#content-container').append(this.$el);
+      //console.log('rendering..', this.$el);
+      var uploaded_files, self = this;
+      M.editor.showOverlay();
+      $.ajax({
+        url: '/upload',
+        type: 'GET',
+        success: function(data) {
+          M.editor.hideOverlay();
+          self.$el.html(self.template({
+          }));
+          self.appendFileListTemplate(data.uploaded_files);
+          self.delegateEvents();
+        }
+      });
+    },
+    appendFileListTemplate: function(files) {
+      var template = _.template($('#uploaded-item-template').html());
+      if(files.length) {
+        _.each(files, function(file) {
+          $('#uploads-list').append(template({
+            filename: file
+          }));
+        });
+      }
+      else {
+        $('#uploads-list').html('<b> No files uploaded yet </b>');
+      }
+    },
+    uploadFile: function() {
+      //console.log('upload file');
+      var self = this;
+      M.editor.showOverlay();
+      var $form = $('#file-upload-form')[0];
+      var formdata = new FormData($form);
+      $.ajax({
+        type: 'POST',
+        url: '/upload',
+        data: formdata,
+        processData: false,
+        contentType: false,
+        success: function(response) {
+          M.editor.hideOverlay();
+          M.editor.notifs.show('success', 'Success', 'File uploaded');
+          self.render();
+        },
+        error: function(jqxhr, status, error) {
+          M.editor.hideOverlay();
+          if(error === 'BAD REQUEST') {
+            var msg = 'File format not allowed. Please contact your administrator to allow this kind of file.'
+          } else {
+            var msg = 'Something went wrong. Please try again!';
+          }
+          M.editor.notifs.show('fail', 'Error!', msg);
+        }
+      });
+    },
+    removeFile: function(event) {
+      M.editor.showOverlay();
+      //console.log('remove file');
+      var self = this;
+      var filename = $(event.currentTarget).attr('for');
+      $.ajax({
+        type: 'DELETE',
+        url: '/upload/' + filename,
+        success: function(data) {
+          M.editor.hideOverlay();
+          self.render();
+        },
+        error: function(jqxhr, status, error) {
+          console.log(arguments);
+        }
+      });
     }
   });
 
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -26,6 +26,7 @@
     M.HeaderURL = function() { return "{{ url_for('insertHeader') }}"; };
     M.PageURL = function() { return "{{ url_for('insertPage') }}"; };
     M.PluginUploadURL = function() { return "{{ url_for('uploadPlugin') }}"; };
+    M.UploadsURL = function() { return "{{ url_for('static', filename='uploads/') }}"; };
     M.site_content = {{ content|tojson|safe }};
     window.onload = function() {
       M.editor.init();
@@ -143,6 +144,7 @@
       <p> <a href="#" id="header-config"> Header </a> </p>
       <p> <a href="#" id="footer-config"> Footer </a> </p>
       <p> <a href="#" id="menu-config"> Navigation Menu </a> </p>
+      <p> <a href="#" id="uploads"> Uploads </a> </p>
       <p><a href="{{ url_for('index') }}"> Go to site </a></p>
     </div>
   </script>
@@ -194,7 +196,7 @@
             <small>title of the page</small>
           </span>
         </div>
-        <div class="form-group">
+        <!--div class="form-group">
           <div class="input-group">
             <span class="input-group-addon"> <strong>Children</strong> </span>
             <input class="form-control"  id="children" type="text" placeholder="csv of child pages"
@@ -203,7 +205,7 @@
           <span class="help-block">
             <small> leave this blank for now</small>
           </span>
-        </div>
+        </div-->
         <div class="form-group">
           <div class="input-group">
               <span class="input-group-addon">
@@ -334,7 +336,7 @@
         <div class="row">
           <div class="form-group col-lg-6">
             <form id="plugin-upload-form" action="" method="post" enctype="multipart/form-data">
-              <input type="file" name="plugin-file" id="select-plugin"> 
+              <input type="file" name="plugin-file" id="select-plugin">
               <input type="button" id="upload-plugin" class="btn btn-info" value="Upload Plugin">
             </form>
           </div>
@@ -402,6 +404,41 @@
       <button type="button" class="close" data-dismiss="alert">&times;</button>
       <h4> <%= title %> </h4>
       <%= msg %>
+    </div>
+  </script>
+
+  <script type="text/template" id="uploads-template">
+    <div class="page">
+      <div><h4> All your uploads </h4></div>
+      <div id="uploads-list" class="well">
+      </div>
+      <hr>
+      <div class="row">
+        <div> <h4> New Upload </h4> </div>
+        <form id="file-upload-form" action="" method="post" enctype="multipart/form-data">
+          <input type="file" name="upload-file" id="select-file">
+          <input type="button" id="upload-new-file" class="btn btn-sm btn-primary update-btn" value="Upload File">
+        </form>
+      </div>
+      <div class="clearfix"></div>
+    </div>
+  </script>
+
+  <script type="text/template" id="uploaded-item-template">
+    <div class="uploaded-item row">
+      <span> &lt;icon here&gt; </span>
+      <!--span class="uploaded-item-name"> <%= filename %> </span-->
+      <span class="uploaded-item-path">
+        <a href="<%= M.UploadsURL() + filename %>">
+          <%= M.UploadsURL() + filename %>
+        </a>
+      </span>
+      <span class="pull-right">
+        <a href="javascript:void(0);" class="remove" for="<%= filename %>">
+          <span class="glyphicon glyphicon-trash"></span>
+        </a>
+      </span>
+      <span class="clearfix"></span>
     </div>
   </script>