diff --git a/js/controllers/website-controller.js b/js/controllers/website-controller.js
index 714bf43..6c4d208 100644
--- a/js/controllers/website-controller.js
+++ b/js/controllers/website-controller.js
@@ -25,6 +25,20 @@ function handleFiles(ev) {
 }
 window.document.body.addEventListener('change', handleFiles);
 
+app.directive('daplieFileChange', function () {
+  return {
+    restrict: 'A',
+    require:"ngModel",
+    link: function (scope, element, attrs, ngModel) {
+      element.bind('change', function (event) {
+        var files = event.target.files;
+        ngModel.$setViewValue(files[0]);
+        scope.$eval(attrs.daplieFileChange);
+      });
+    }
+  };
+});
+
 app.controller('websiteCtrl', [
   '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout'
 , function ($scope, $q, Auth, Oauth3, $timeout) {
@@ -140,26 +154,26 @@ app.controller('websiteCtrl', [
     vm.currentHost = record.host; // .replace(new RegExp('\\.' + vm.domain.domain.replace(/\./g, '\\.') + '$', ''));
   };
 
-  vm._createWebsite = function (pkg) {
+  vm._uploadFile = function (pkg, opts) {
     return pkg.add({
-      hostname: vm.currentHost
-    , domain: vm.currentHost
-    , tld: vm.domain.tld
-    , sld: vm.domain.sld
-    //, sub: vm.record.sub
-    , multipart: { site: vm.currentFiles[0] }
+      hostname: opts.currentHost
+    , domain: opts.currentHost
+    , tld: opts.domain.tld
+    , sld: opts.domain.sld
+    //, sub: opts.record.sub
+    , multipart: { site: opts.currentFiles[0] }
     , progress: function (ev) {
         // TODO must digest
-        vm.uploadPercent = Math.round((ev.loaded / ev.total) * 100);
+        opts.uploadPercent = Math.round((ev.loaded / ev.total) * 100);
         // TODO GiB, MiB, KiB, etc
-        vm.uploadTotal = (ev.total / (1024 * 1024)).toFixed(2);
-        vm.uploadProgress = (ev.loaded / (1024 * 1024)).toFixed(2);
+        opts.uploadTotal = (ev.total / (1024 * 1024)).toFixed(2);
+        opts.uploadProgress = (ev.loaded / (1024 * 1024)).toFixed(2);
       }
-    , unzip: vm.unzip
-    , strip: vm.stripZip
-    , path: vm.webPath
+    , unzip: opts.unzip
+    , strip: opts.stripZip
+    , path: opts.webPath
     }).then(function (result) {
-      vm.uploadTotal = 0;
+      opts.uploadTotal = 0;
       window.alert(JSON.stringify(result));
     });
   };
@@ -211,7 +225,7 @@ app.controller('websiteCtrl', [
     if (vm.sites.some(function (r) {
       return -1 !== ('.' + vm.currentHost).indexOf(('.' + r.domain));
     })) {
-      vm._createWebsite(pkg);
+      vm._uploadFile(pkg, vm);
       return;
     }
 
@@ -256,13 +270,20 @@ app.controller('websiteCtrl', [
 
       return prom.then(function () {
         return pkg.claim(domainReq).then(function (result) {
-          return vm._createWebsite(pkg);
+          return vm._uploadFile(pkg, vm);
         });
       });
 
     });
   };
-  vm.createWebsite = vm.Sites.create;
+  vm.Sites.setUpload = function (r) {
+    console.log("Hey! At least it can tell if there's a change!");
+    console.log(r);
+  };
+  vm.Sites.upload = function (r) {
+    var pkg = Auth.oauth3.pkg('www@daplie.com');
+    vm._uploadFile(pkg, r);
+  };
   vm.Sites.archive = function (r) {
     var pkg = Auth.oauth3.pkg('www@daplie.com');
 
diff --git a/templates/website.html b/templates/website.html
index 125fdc3..4a5a5a1 100644
--- a/templates/website.html
+++ b/templates/website.html
@@ -75,7 +75,7 @@
     -->
     <!-- <div class="form-group">
       <div class="pull-right"> -->
-            <button ng-click="vm.createWebsite()" type="button" name="button" class="btn btn-default">Create Website</button>
+            <button ng-click="vm.Sites.create()" type="button" name="button" class="btn btn-default">Create Website</button>
         <!-- </div>
     </div> -->
         <div class="input-group">
@@ -85,27 +85,44 @@
   </div>
   <div class="white-well">
     <h1>Your Websites</h1>
-    <table class="table">
-      <tbody>
-        <tr ng-repeat="r in vm.sites">
-          <td><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a>
-            <a ng-href="{{r.download}}" target="_blank">Download</a>
-            <!-- button class="btn btn-link" ng-click="vm.Sites.archive(r)">download</button -->
-            <button class="btn btn-link" ng-click="vm.Sites.remove(r)">Clear</button></td>
-          <td>
-            <input type="text" ng-model="r.newPath" placeholder="/" />
-            <button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
-          </td>
-          <td ng-bind="r.path">Sites > blogs > blog.jane.smith.net</td>
-          <td ng-bind="r.users">jane@smith.net, jack@smith.net, friend@gmail.com</td>
-          <td>
-            <input type="text" ng-model="r.shareEmail" placeholder="ex: john@example.com" />
-            <input type="text" ng-model="r.sharePath" placeholder="/" />
-            <input type="text" ng-model="r.shareMode" placeholder="rwx (read, write, invite)" />
-            <button class="btn btn-default" ng-click="vm.Shares.invite(r)">Invite</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div ng-repeat="r in vm.sites">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a>
+              <a ng-href="{{r.download}}" target="_blank">Download</a>
+              <!-- button class="btn btn-link" ng-click="vm.Sites.archive(r)">download</button -->
+              <button class="btn btn-link" ng-click="vm.Sites.remove(r)">Clear</button></td>
+            <td>
+              <input type="text" ng-model="r.newPath" placeholder="/" />
+              <button class="btn btn-default" ng-click="vm.Sites.contents(r)">List Files</button>
+            </td>
+            <td ng-bind="r.path">Sites > blogs > blog.jane.smith.net</td>
+            <td ng-bind="r.users">jane@smith.net, jack@smith.net, friend@gmail.com</td>
+            <td>
+              <input type="text" ng-model="r.shareEmail" placeholder="ex: john@example.com" />
+              <input type="text" ng-model="r.sharePath" placeholder="/" />
+              <input type="text" ng-model="r.shareMode" placeholder="rwx (read, write, invite)" />
+              <button class="btn btn-default" ng-click="vm.Shares.invite(r)">Invite</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="input-group">
+        <div><label>Select upload</label> <input type="file" ng-model="r.newFile" daplie-file-change="vm.Sites.setUpload(r)" /></div>
+
+        <div ng-if="r.isZip" ><label><input type="checkbox" ng-model="r.unzip" /> Unpack .zip</label></div>
+
+        <div ng-if="r.unzip" ><label><input type="checkbox" ng-model="r.stripZip" /> Strip zip directory root</label></div>
+
+        <!-- div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
+
+        <div ng-if="r.uploadTotal"><span ng-bind="r.uploadPercent">99</span>% | <span ng-bind="r.uploadProgress">1</span> MiB / <span ng-bind="r.uploadTotal">100</span> MiB</div>
+
+        <div><label>Web path</label> <input type="text" ng-model="r.webPath" /></div>
+
+        <button ng-click="vm.Sites.upload(r)" type="button" name="button" class="btn btn-default">Add File</button>
+      </div>
+    </div>
   </div>
 </div>