From 583e9c6e24236a4e8e244753b22f6228ea11611b Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Sun, 12 May 2019 10:24:53 +0300
Subject: [PATCH] Litespeed.js version upgrade and JS cleanups

---
 app/views/console/account/index.phtml      |  28 +--
 app/views/console/comps/header.phtml       |  24 +--
 app/views/console/home/index.phtml         |  10 +-
 app/views/console/index.phtml              |   4 +-
 app/views/console/settings/index.phtml     |  48 ++---
 app/views/console/storage/index.phtml      |   4 +-
 app/views/console/users/index.phtml        |  16 +-
 app/views/console/users/view.phtml         |  24 +--
 app/views/home/auth/confirm.phtml          |   2 +-
 app/views/home/auth/join.phtml             |   6 +-
 app/views/home/auth/recovery.phtml         |   2 +-
 app/views/home/auth/recovery/reset.phtml   |   2 +-
 app/views/home/auth/signin.phtml           |   2 +-
 app/views/home/auth/signup.phtml           |   2 +-
 gulpfile.js                                |   5 -
 public/dist/scripts/app-all.js             |   2 +-
 public/dist/scripts/app.js                 |   2 +-
 public/scripts/views/forms/draft.js        |  26 ---
 public/scripts/views/forms/recaptcha.js    |  45 ----
 public/scripts/views/forms/upload-multi.js | 228 ---------------------
 public/scripts/views/forms/upload.js       | 186 +++++++++++------
 public/scripts/views/service.js            |   8 +-
 public/scripts/views/ui/scrollTo.js        |  17 --
 public/scripts/views/ui/slide.js           |  64 ------
 24 files changed, 221 insertions(+), 536 deletions(-)
 delete mode 100644 public/scripts/views/forms/draft.js
 delete mode 100644 public/scripts/views/forms/recaptcha.js
 delete mode 100644 public/scripts/views/forms/upload-multi.js
 delete mode 100644 public/scripts/views/ui/scrollTo.js
 delete mode 100644 public/scripts/views/ui/slide.js

diff --git a/app/views/console/account/index.phtml b/app/views/console/account/index.phtml
index e8706f41bc..d1e98f7364 100644
--- a/app/views/console/account/index.phtml
+++ b/app/views/console/account/index.phtml
@@ -11,9 +11,9 @@ use Utopia\Locale\Locale;
     <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
         <li data-state="/console/account">
             <div class=""
-                 data-appwrite="account.get"
+                 data-service="account.get"
                  data-scope="console"
-                 data-service="account"
+                 data-name="account"
                  data-event="load"
                  data-success="render"
                  data-error="trigger"
@@ -25,7 +25,7 @@ use Utopia\Locale\Locale;
                         <div class="box margin-bottom-xl">
                             <div>
                                 <form name="account.update" onsubmit="return false;"
-                                      data-appwrite="account.updateName"
+                                      data-service="account.updateName"
                                       data-scope="console"
                                       data-event="submit"
                                       data-success="trigger,alert"
@@ -53,7 +53,7 @@ use Utopia\Locale\Locale;
                             <hr />
 
                             <form name="update-email"
-                                  data-appwrite="account.updateEmail"
+                                  data-service="account.updateEmail"
                                   data-scope="console"
                                   data-event="submit"
                                   data-success="trigger,alert"
@@ -86,7 +86,7 @@ use Utopia\Locale\Locale;
                                 <h1><?php echo Locale::getText('console.account.section.overview.actions.update-password'); ?></h1>
 
                                 <form name="update-password"
-                                      data-appwrite="account.updatePassword"
+                                      data-service="account.updatePassword"
                                       data-scope="console"
                                       data-event="submit"
                                       data-success="trigger,alert"
@@ -110,7 +110,7 @@ use Utopia\Locale\Locale;
                             <hr />
 
                             <form class="margin-top"
-                                  data-appwrite="auth.logout"
+                                  data-service="auth.logout"
                                   data-scope="console"
                                   data-event="submit"
                                   data-success="trigger"
@@ -149,7 +149,7 @@ use Utopia\Locale\Locale;
                             <p><?php echo Locale::getText('console.account.section.overview.danger.note'); ?></p>
 
                             <form class="inline"
-                                  data-appwrite="account.deactivate"
+                                  data-service="account.deactivate"
                                   data-scope="console"
                                   data-event="submit"
                                   data-confirm="Are you sure you want to delete your account?"
@@ -171,16 +171,16 @@ use Utopia\Locale\Locale;
             <h3><?php echo Locale::getText('console.account.section.security.devices.title'); ?></h3>
 
             <div class="box margin-bottom"
-                 data-appwrite="account.sessions"
+                 data-service="account.sessions"
                  data-scope="console"
-                 data-service="sessions"
+                 data-name="sessions"
                  data-event="load">
 
                 <ul data-ls-loop="sessions" data-ls-as="session" class="list">
                     <li class="clear">
                         <span data-ls-if="true != {{session.current}}" style="display: none;"> <!-- From remote session (-logout event) -->
                             <form class="pull-end"
-                                  data-appwrite="auth.logoutById"
+                                  data-service="auth.logoutById"
                                   data-scope="console"
                                   data-event="submit"
                                   data-loading="<?php echo $this->escape(Locale::getText('general.loading')); ?>"
@@ -195,7 +195,7 @@ use Utopia\Locale\Locale;
 
                         <span data-ls-if="true == {{session.current}}" style="display: none;"> <!-- From current session (+logout event) -->
                             <form class="pull-end"
-                                  data-appwrite="auth.logoutById"
+                                  data-service="auth.logoutById"
                                   data-scope="console"
                                   data-event="submit"
                                   data-loading="<?php echo $this->escape(Locale::getText('general.loading')); ?>"
@@ -226,7 +226,7 @@ use Utopia\Locale\Locale;
             </div>
 
             <form class="inline margin-bottom-large"
-                  data-appwrite="auth.logoutById"
+                  data-service="auth.logoutById"
                   data-scope="console"
                   data-event="submit"
                   data-success="trigger,redirect"
@@ -239,9 +239,9 @@ use Utopia\Locale\Locale;
             </form>
 
             <div class="account"
-                 data-appwrite="account.security"
+                 data-service="account.security"
                  data-scope="console"
-                 data-service="securityLogs"
+                 data-name="securityLogs"
                  data-event="load">
                 <span data-ls-bind="{{securityLogs}}"></span>
 
diff --git a/app/views/console/comps/header.phtml b/app/views/console/comps/header.phtml
index 2b388ac4c1..53a86a219a 100644
--- a/app/views/console/comps/header.phtml
+++ b/app/views/console/comps/header.phtml
@@ -12,8 +12,8 @@ use Utopia\Locale\Locale;
     <button style="width: 40px; height: 40px; line-height: 40px; overflow: visible;" id="setup" class="tooltip round down project-only" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
 
     <div class="account-box clear pull-end"
-         data-appwrite="account.get"
-         data-service="account"
+         data-service="account.get"
+         data-name="account"
          data-scope="console"
          data-event="load">
 
@@ -99,38 +99,38 @@ use Utopia\Locale\Locale;
 </header>
 
 <div class="list pull-start project-only"
-     data-appwrite="projects.list"
+     data-service="projects.list"
      data-event="load"
-     data-service="projects"
+     data-name="projects"
      data-scope="console"
      data-singleton="true">
 </div>
 
 <div data-ls-if="({{router.params.project}} != undefined)">
-    <div data-appwrite="projects.get"
+    <div data-service="projects.get"
          data-event="load"
-         data-service="console-project"
+         data-name="console-project"
          data-param-project-id="{{router.params.project}}">
     </div>
 </div>
 
 <div class=""
-     data-appwrite="geo.get"
-     data-service="geo"
+     data-service="geo.get"
+     data-name="geo"
      data-event="load"
      data-singleton="true">
 </div>
 
 <div class=""
-     data-appwrite="geo.countries.list"
-     data-service="geo-countries"
+     data-service="geo.countries.list"
+     data-name="geo-countries"
      data-event="load"
      data-singleton="true">
 </div>
 
 <div class=""
-     data-appwrite="geo.countries.phones"
-     data-service="geo-countries-phones"
+     data-service="geo.countries.phones"
+     data-name="geo-countries-phones"
      data-event="load"
      data-singleton="true">
 </div>
diff --git a/app/views/console/home/index.phtml b/app/views/console/home/index.phtml
index 2e7894582f..4187d79829 100644
--- a/app/views/console/home/index.phtml
+++ b/app/views/console/home/index.phtml
@@ -19,9 +19,9 @@
     <div class="zone xxl margin-top-negative-large">
         <div>
             <div class="box margin-bottom dashboard"
-                 data-appwrite="projects.getProjectUsage"
+                 data-service="projects.getProjectUsage"
                  data-event="load"
-                 data-service="usage"
+                 data-name="usage"
                  data-param-project-id="{{router.params.project}}"
                  data-success="render,trigger"
                  data-error="render"
@@ -91,7 +91,7 @@
                     </div>
 
                     <form class="pull-end margin-end"
-                          data-appwrite="projects.platforms.delete"
+                          data-service="projects.platforms.delete"
                           data-scope="console"
                           data-event="submit"
                           data-confirm="Are you sure you want to delete this platform?"
@@ -151,7 +151,7 @@
 
     <h1>New Website</h1>
 
-    <form data-appwrite="projects.platforms.create"
+    <form data-service="projects.platforms.create"
           data-scope="console"
           data-event="submit"
           data-success="alert,trigger,reset"
@@ -200,7 +200,7 @@
 </div>
 
 <script type="text/html" id="template-web-update">
-    <form data-appwrite="projects.platforms.update"
+    <form data-service="projects.platforms.update"
           data-scope="console"
           data-event="submit"
           data-success="alert,trigger,reset"
diff --git a/app/views/console/index.phtml b/app/views/console/index.phtml
index 5ff87931b1..d360a7ae9e 100644
--- a/app/views/console/index.phtml
+++ b/app/views/console/index.phtml
@@ -15,10 +15,10 @@
 </div>
 
 <section class="zone xl margin-bottom-large margin-top-negative-large">
-    <div data-appwrite="projects.list"
+    <div data-service="projects.list"
          data-scope="console"
          data-event="load"
-         data-service="console-projects"
+         data-name="console-projects"
          data-success="render,trigger"
          data-error="render"
          data-success-rerender="project.new"
diff --git a/app/views/console/settings/index.phtml b/app/views/console/settings/index.phtml
index b588e9f931..27a62db1d7 100644
--- a/app/views/console/settings/index.phtml
+++ b/app/views/console/settings/index.phtml
@@ -44,9 +44,9 @@ $scopes = [ // TODO sync with project list
 </div>
 
 <div class="zone xl"
-     data-appwrite="projects.get"
+     data-service="projects.get"
      data-scope="console"
-     data-service="console-project"
+     data-name="console-project"
      data-event="load"
      data-param-project-id="{{router.params.project}}"
      data-success="render,trigger"
@@ -60,7 +60,7 @@ $scopes = [ // TODO sync with project list
             <li data-state="/console/settings?project={{router.params.project}}">
                 <h2><?php echo Locale::getText('console.settings.section.overview.title'); ?></h2>
 
-                <form data-appwrite="projects.update"
+                <form data-service="projects.update"
                       data-scope="console"
                       data-event="submit"
                       data-param-project-id="{{router.params.project}}"
@@ -175,10 +175,10 @@ $scopes = [ // TODO sync with project list
                 <h2><?php echo Locale::getText('console.settings.section.keys.title'); ?></h2>
 
                 <div class="zone xl"
-                     data-appwrite="projects.keys.list"
+                     data-service="projects.keys.list"
                      data-scope="console"
                      data-event="load"
-                     data-service="console-keys"
+                     data-name="console-keys"
                      data-param-project-id="{{router.params.project}}"
                      data-success="render,trigger"
                      data-success-rerender="key.new,key.update,key.delete"
@@ -200,7 +200,7 @@ $scopes = [ // TODO sync with project list
 
                                     <h1>Update API Key</h1>
 
-                                    <form data-appwrite="projects.keys.update"
+                                    <form data-service="projects.keys.update"
                                           data-scope="console"
                                           data-event="submit"
                                           data-success="alert,trigger,reset"
@@ -236,7 +236,7 @@ $scopes = [ // TODO sync with project list
                                 </div>
 
                                 <form class="pull-end margin-end"
-                                      data-appwrite="projects.keys.delete"
+                                      data-service="projects.keys.delete"
                                       data-scope="console"
                                       data-event="submit"
                                       data-confirm="Are you sure you want to delete this API key?"
@@ -278,7 +278,7 @@ $scopes = [ // TODO sync with project list
 
                             <h1>Add API Keys</h1>
 
-                            <form data-appwrite="projects.keys.create"
+                            <form data-service="projects.keys.create"
                                   data-scope="console"
                                   data-event="submit"
                                   data-success="alert,trigger,reset"
@@ -320,10 +320,10 @@ $scopes = [ // TODO sync with project list
                 <h2><?php echo Locale::getText('console.settings.section.webhooks.title'); ?></h2>
 
                 <div class="zone xl"
-                     data-appwrite="projects.webhooks.list"
+                     data-service="projects.webhooks.list"
                      data-scope="console"
                      data-event="load"
-                     data-service="console-webhooks"
+                     data-name="console-webhooks"
                      data-param-project-id="{{router.params.project}}"
                      data-success="render,trigger"
                      data-success-rerender="webhook.new,webhook.update,webhook.delete"
@@ -346,7 +346,7 @@ $scopes = [ // TODO sync with project list
 
                                     <h1>Update Webhook</h1>
 
-                                    <form data-appwrite="projects.webhooks.update"
+                                    <form data-service="projects.webhooks.update"
                                           data-scope="console"
                                           data-event="submit"
                                           data-success="alert,trigger,reset"
@@ -414,7 +414,7 @@ $scopes = [ // TODO sync with project list
                                 </div>
 
                                 <form class="pull-end margin-end"
-                                      data-appwrite="projects.webhooks.delete"
+                                      data-service="projects.webhooks.delete"
                                       data-scope="console"
                                       data-event="submit"
                                       data-confirm="Are you sure you want to delete this webhook?"
@@ -445,7 +445,7 @@ $scopes = [ // TODO sync with project list
 
                             <h1>Add Webhook</h1>
 
-                            <form data-appwrite="projects.webhooks.create"
+                            <form data-service="projects.webhooks.create"
                                   data-scope="console"
                                   data-event="submit"
                                   data-success="alert,trigger,reset"
@@ -518,10 +518,10 @@ $scopes = [ // TODO sync with project list
                 <h2><?php echo Locale::getText('console.settings.section.tasks.title'); ?></h2>
 
                 <div class="zone xl"
-                     data-appwrite="projects.tasks.list"
+                     data-service="projects.tasks.list"
                      data-scope="console"
                      data-event="load"
-                     data-service="console-tasks"
+                     data-name="console-tasks"
                      data-param-project-id="{{router.params.project}}"
                      data-success="render,trigger"
                      data-success-rerender="task.new,task.update,task.delete"
@@ -591,7 +591,7 @@ $scopes = [ // TODO sync with project list
 
                                             <h1>Update Task</h1>
 
-                                            <form data-appwrite="projects.tasks.update"
+                                            <form data-service="projects.tasks.update"
                                                   data-scope="console"
                                                   data-event="submit"
                                                   data-success="alert,trigger,reset"
@@ -695,7 +695,7 @@ $scopes = [ // TODO sync with project list
                                             </form>
 
                                             <form class="margin-top"
-                                                  data-appwrite="projects.tasks.delete"
+                                                  data-service="projects.tasks.delete"
                                                   data-scope="console"
                                                   data-event="submit"
                                                   data-confirm="Are you sure you want to delete this task?"
@@ -723,7 +723,7 @@ $scopes = [ // TODO sync with project list
 
                             <h1>Add Task</h1>
 
-                            <form data-appwrite="projects.tasks.create"
+                            <form data-service="projects.tasks.create"
                                   data-scope="console"
                                   data-event="submit"
                                   data-success="alert,trigger,reset"
@@ -737,7 +737,7 @@ $scopes = [ // TODO sync with project list
                                 <label for="name">Name</label>
                                 <input type="text" class="full-width" id="name" name="name" required autocomplete="off" />
 
-                                <label data-ls-attrs="for=status-{{task.$uid}}" class="margin-bottom">Status
+                                <label data-ls-attrs="for=status" class="margin-bottom">Status
                                     <div class="margin-top-small">
                                         <input name="status" type="radio" value="play" checked="checked" required /> &nbsp; <span>Play</span>
                                         <input name="status" type="radio" value="pause" required /> &nbsp; <span>Pause</span>
@@ -819,10 +819,10 @@ $scopes = [ // TODO sync with project list
                 <h2><?php echo Locale::getText('console.settings.section.members.title'); ?></h2>
 
                 <div class="zone xl"
-                     data-appwrite="teams.getMembers"
+                     data-service="teams.getMembers"
                      data-scope="console"
                      data-event="load,auth.invite,auth.leave"
-                     data-service="members"
+                     data-name="members"
                      data-param-team-id="{{console-project.teamId}}"
                      data-success="render,trigger"
                      data-success-triggers="members.load"
@@ -833,7 +833,7 @@ $scopes = [ // TODO sync with project list
                         <ul data-ls-loop="members" data-ls-as="member" class="list">
                             <li class="clear">
                                 <form class="pull-end"
-                                      data-appwrite="auth.leave"
+                                      data-service="auth.leave"
                                       data-scope="console"
                                       data-event="submit"
                                       data-success="alert,trigger"
@@ -849,7 +849,7 @@ $scopes = [ // TODO sync with project list
 
                                 <div data-ls-if="false === {{member.confirm}}" class="pull-end margin-end" style="display: none;">
                                     <form
-                                            data-appwrite="auth.inviteResend"
+                                            data-service="auth.inviteResend"
                                             data-scope="console"
                                             data-event="submit"
                                             data-success="alert,trigger"
@@ -879,7 +879,7 @@ $scopes = [ // TODO sync with project list
                         <h1><?php echo Locale::getText('console.settings.section.members.labels.invite'); ?></h1>
 
                         <form name="auth.invite"
-                              data-appwrite="auth.invite"
+                              data-service="auth.invite"
                               data-scope="console"
                               data-event="submit"
                               data-success="alert,trigger,reset"
diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index 6059f12bff..bef3a0cfdd 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -27,13 +27,13 @@ $providers = $this->getParam('providers', []);
             <div class="col span-4"></div>
         </form>
 
-        <div data-appwrite="storage.files.list"
+        <div data-service="storage.files.list"
              data-param-search="{{filter-files.keys.search}}"
              data-param-limit="{{filter-files.keys.limit}}"
              data-param-offset="{{filter-files.keys.offset}}"
              data-param-order-type="DESC"
              data-scope="sdk"
-             data-service="project-files"
+             data-name="project-files"
              data-event="filter-files-changed"
              data-success="render,trigger"
              data-error="render"
diff --git a/app/views/console/users/index.phtml b/app/views/console/users/index.phtml
index f1bc98a3b7..4bbb344df9 100644
--- a/app/views/console/users/index.phtml
+++ b/app/views/console/users/index.phtml
@@ -25,7 +25,7 @@ $providers = $this->getParam('providers', []);
 
                                 <h1>Create User</h1>
 
-                                <form data-appwrite="users.create"
+                                <form data-service="users.create"
                                       data-event="submit"
                                       data-success="alert,trigger,reset"
                                       data-success-alert="Created user successfully"
@@ -59,12 +59,12 @@ $providers = $this->getParam('providers', []);
                     </div>
                 </div>
 
-                <div data-appwrite="users.list"
+                <div data-service="users.list"
                      data-param-search="{{filter-users.keys.search}}"
                      data-param-limit="{{filter-users.keys.limit}}"
                      data-param-offset="{{filter-users.keys.offset}}"
                      data-scope="sdk"
-                     data-service="project-users"
+                     data-name="project-users"
                      data-event="filter-users-changed"
                      data-success="render,trigger"
                      data-error="render"
@@ -152,7 +152,7 @@ $providers = $this->getParam('providers', []);
 
                             <h1>Create Team</h1>
 
-                            <form data-appwrite="teams.create"
+                            <form data-service="teams.create"
                                   data-event="submit"
                                   data-success="alert,trigger,reset"
                                   data-success-alert="Created team successfully"
@@ -180,9 +180,9 @@ $providers = $this->getParam('providers', []);
                 </div>
 
                 <div class="zone xl"
-                     data-appwrite="teams.list"
+                     data-service="teams.list"
                      data-scope="sdk"
-                     data-service="project-teams"
+                     data-name="project-teams"
                      data-event="filter-teams-changed"
                      data-param-search="{{filter-teams.keys.search}}"
                      data-param-limit="{{filter-teams.keys.limit}}"
@@ -216,7 +216,7 @@ $providers = $this->getParam('providers', []);
                                         <div data-ui-modal class="modal close" data-button-text="{{team.name}}" data-button-class="link">
                                             <h1>Update Team</h1>
 
-                                            <form data-appwrite="teams.update"
+                                            <form data-service="teams.update"
                                                   data-scope="sdk"
                                                   data-event="submit"
                                                   data-success="alert,trigger"
@@ -275,7 +275,7 @@ $providers = $this->getParam('providers', []);
                             <div data-ui-modal class="modal close" data-button-text="Settings" data-button-class="pull-end">
                                 <h1><?php echo ucfirst($provider); ?> OAuth Settings</h1>
 
-                                <form data-appwrite="projects.updateOauth"
+                                <form data-service="projects.updateOauth"
                                       data-scope="console"
                                       data-event="submit"
                                       data-param-project-id="{{router.params.project}}"
diff --git a/app/views/console/users/view.phtml b/app/views/console/users/view.phtml
index 995885dd40..91d470dc0f 100644
--- a/app/views/console/users/view.phtml
+++ b/app/views/console/users/view.phtml
@@ -2,8 +2,8 @@
 use Utopia\Locale\Locale;
 
 ?>
-<div data-appwrite="users.get"
-     data-service="user"
+<div data-service="users.get"
+     data-name="user"
      data-event="load"
      data-param-user-id="{{router.params.id}}"
      data-success="render,trigger"
@@ -52,8 +52,8 @@ use Utopia\Locale\Locale;
                         <h3 class="margin-bottom">Preferences</h3>
 
                         <div class="box margin-bottom"
-                             data-appwrite="users.getPrefs"
-                             data-service="user-prefs"
+                             data-service="users.getPrefs"
+                             data-name="user-prefs"
                              data-event="load"
                              data-param-user-id="{{router.params.id}}"
                              data-success="render,trigger"
@@ -96,7 +96,7 @@ use Utopia\Locale\Locale;
 
                         <div data-ls-if="{{user.status}} !== <?php echo \Auth\Auth::USER_STATUS_BLOCKED; ?>" style="display: none">
                             <form name="users.updateStatus" class="margin-bottom"
-                                  data-appwrite="users.updateStatus"
+                                  data-service="users.updateStatus"
                                   data-event="submit"
                                   data-param-user-id="{{router.params.id}}"
                                   data-success="alert,trigger"
@@ -110,7 +110,7 @@ use Utopia\Locale\Locale;
 
                         <div data-ls-if="{{user.status}} === <?php echo \Auth\Auth::USER_STATUS_BLOCKED; ?>" style="display: none">
                             <form name="users.updateStatus" class="margin-bottom"
-                                  data-appwrite="users.updateStatus"
+                                  data-service="users.updateStatus"
                                   data-event="submit"
                                   data-param-user-id="{{router.params.id}}"
                                   data-success="alert,trigger"
@@ -128,8 +128,8 @@ use Utopia\Locale\Locale;
             <li data-state="/console/users/view/devices?id={{router.params.id}}&project={{router.params.project}}">
                 <h2>Devices</h2>
 
-                <div data-appwrite="users.getSessions"
-                     data-service="sessions"
+                <div data-service="users.getSessions"
+                     data-name="sessions"
                      data-param-user-id="{{router.params.id}}"
                      data-event="load"
                      data-success="render"
@@ -145,7 +145,7 @@ use Utopia\Locale\Locale;
                             <ul data-ls-loop="sessions" data-ls-as="session" class="list">
                                 <li class="clear">
                                     <form class="pull-end"
-                                          data-appwrite="users.deleteSession"
+                                          data-service="users.deleteSession"
                                           data-event="submit"
                                           data-loading="Loading..."
                                           data-success="trigger"
@@ -170,7 +170,7 @@ use Utopia\Locale\Locale;
                         </div>
 
                         <form class="inline margin-bottom-large"
-                              data-appwrite="users.deleteSessions"
+                              data-service="users.deleteSessions"
                               data-param-user-id="{{router.params.id}}"
                               data-event="submit"
                               data-success="trigger"
@@ -186,8 +186,8 @@ use Utopia\Locale\Locale;
             <li data-state="/console/users/view/audit?id={{router.params.id}}&project={{router.params.project}}">
                 <h2>Audit Log</h2>
 
-                <div data-appwrite="users.getLogs"
-                     data-service="logs"
+                <div data-service="users.getLogs"
+                     data-name="logs"
                      data-param-user-id="{{router.params.id}}"
                      data-event="load"
                      data-success="render"
diff --git a/app/views/home/auth/confirm.phtml b/app/views/home/auth/confirm.phtml
index 431bd7faac..7507e24c5b 100644
--- a/app/views/home/auth/confirm.phtml
+++ b/app/views/home/auth/confirm.phtml
@@ -2,7 +2,7 @@
 use Utopia\Locale\Locale;
 ?>
 <section class="zone xl">
-    <form data-appwrite="auth.confirm"
+    <form data-service="auth.confirm"
       data-scope="console"
       data-event="load"
       data-param-token="{{router.params.token}}"
diff --git a/app/views/home/auth/join.phtml b/app/views/home/auth/join.phtml
index ca23dff41f..ac900095ba 100644
--- a/app/views/home/auth/join.phtml
+++ b/app/views/home/auth/join.phtml
@@ -3,7 +3,7 @@ use Utopia\Locale\Locale;
 ?>
 <section class="zone medium">
     <form class="box margin-top-large"
-          data-appwrite="auth.join"
+          data-service="auth.join"
           data-scope="console"
           data-event="submit"
           data-param-invite-id="{{router.params.inviteId}}"
@@ -22,9 +22,9 @@ use Utopia\Locale\Locale;
         <input name="failure" type="hidden" data-ls-bind="https://{{env.DOMAIN}}/auth/join?failure=1&company={{router.params.company}}&inviteId={{router.params.inviteId}}&secret={{router.params.secret}}&userId={{router.params.userId}}">
 
         <div class=""
-             data-appwrite="companies.getPreview"
+             data-service="companies.getPreview"
              data-scope="api"
-             data-service="api-company"
+             data-name="api-company"
              data-param-id="{{router.params.company}}"
              data-event="load"
              data-success="render,trigger"
diff --git a/app/views/home/auth/recovery.phtml b/app/views/home/auth/recovery.phtml
index d43ad6992c..d97ddcea99 100644
--- a/app/views/home/auth/recovery.phtml
+++ b/app/views/home/auth/recovery.phtml
@@ -9,7 +9,7 @@ use Utopia\Locale\Locale;
     <small class="pull-end">* <?php echo $this->escape(Locale::getText('home.auth.recovery.required')); ?></small>
 
     <form name="recovery"
-          data-appwrite="auth.recovery"
+          data-service="auth.recovery"
           data-scope="console"
           data-event="submit"
           data-success="alert"
diff --git a/app/views/home/auth/recovery/reset.phtml b/app/views/home/auth/recovery/reset.phtml
index 4956a87dff..65300fff4b 100644
--- a/app/views/home/auth/recovery/reset.phtml
+++ b/app/views/home/auth/recovery/reset.phtml
@@ -12,7 +12,7 @@ use Utopia\Locale\Locale;
     <br />
 
     <form name="recovery-reset"
-          data-appwrite="auth.recoveryReset"
+          data-service="auth.recoveryReset"
           data-scope="console"
           data-event="submit"
           data-success="alert,redirect"
diff --git a/app/views/home/auth/signin.phtml b/app/views/home/auth/signin.phtml
index 347b0b860d..55ae757486 100644
--- a/app/views/home/auth/signin.phtml
+++ b/app/views/home/auth/signin.phtml
@@ -23,7 +23,7 @@ use Utopia\Locale\Locale;
             <p class="note"><?php echo $this->escape(Locale::getText('home.auth.signin.regular.title')); ?></p>
 
             <form name="login"
-                  data-appwrite="auth.login"
+                  data-service="auth.login"
                   data-scope="console"
                   data-event="submit"
                   data-success="trigger,redirect"
diff --git a/app/views/home/auth/signup.phtml b/app/views/home/auth/signup.phtml
index d8e8f72c5d..e371d48cdd 100644
--- a/app/views/home/auth/signup.phtml
+++ b/app/views/home/auth/signup.phtml
@@ -13,7 +13,7 @@ use Utopia\Locale\Locale;
             <small class="pull-end">* <?php echo $this->escape(Locale::getText('home.auth.signup.required')); ?></small>
 
             <form name="register"
-                  data-appwrite="auth.register"
+                  data-service="auth.register"
                   data-scope="console"
                   data-event="submit"
                   data-success="trigger,redirect"
diff --git a/gulpfile.js b/gulpfile.js
index cbfcd13dab..646d33c4c3 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -36,21 +36,18 @@ const configApp  = {
         'public/scripts/views/forms/clone.js',
         'public/scripts/views/forms/color.js',
         'public/scripts/views/forms/copy.js',
-        'public/scripts/views/forms/draft.js',
         'public/scripts/views/forms/filter.js',
         'public/scripts/views/forms/parent-down.js',
         'public/scripts/views/forms/parent-remove.js',
         'public/scripts/views/forms/parent-up.js',
         'public/scripts/views/forms/password-meter.js',
         'public/scripts/views/forms/pell.js',
-        'public/scripts/views/forms/recaptcha.js',
         'public/scripts/views/forms/remove.js',
         'public/scripts/views/forms/switch.js',
         'public/scripts/views/forms/text-count.js',
         'public/scripts/views/forms/text-direction.js',
         'public/scripts/views/forms/text-resize.js',
         'public/scripts/views/forms/upload.js',
-        'public/scripts/views/forms/upload-multi.js',
 
         'public/scripts/views/general/page-title.js',
         'public/scripts/views/general/setup.js',
@@ -62,8 +59,6 @@ const configApp  = {
         'public/scripts/views/ui/open.js',
         'public/scripts/views/ui/paging.js',
         'public/scripts/views/ui/phases.js',
-        'public/scripts/views/ui/scrollTo.js',
-        'public/scripts/views/ui/slide.js'
     ],
     dest: './public/dist/scripts'
 };
diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index bd093d727c..07f9e0efa0 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -2188,7 +2188,7 @@ window.getSelection().removeAllRanges();});element.parentNode.parentNode.appendC
 document.body.classList.add(prefix+'-'+value);cookie.set('language-'+prefix,value,365);document.dispatchEvent(new CustomEvent('updated-language-'+prefix));};document.addEventListener('updated-language-'+prefix,function(){element.value=cookie.get('language-'+prefix);});let def=cookie.get('language-'+prefix)||element.options[0].value;select(def);element.value=def;}}).add({selector:'data-ls-ui-chart',repeat:false,controller:function(element,container,date,document){let child=document.createElement('canvas');child.width=500;child.height=175;let stats=container.get('usage');if(!stats||!stats['requests']||!stats['requests']['data']){return;}
 let config={type:'line',data:{labels:[],datasets:[{label:'Requests',backgroundColor:'rgba(230, 248, 253, 0.3)',borderColor:'#29b5d9',borderWidth:2,data:[0,0,0,0,0,0,0],fill:true}]},options:{responsive:true,title:{display:false,text:'Stats'},legend:{display:false},tooltips:{mode:'index',intersect:false,caretPadding:0},hover:{mode:'nearest',intersect:true},scales:{xAxes:[{display:false}],yAxes:[{display:false,}]}}};for(let i=0;i<stats['requests']['data'].length;i++){config.data.datasets[0].data[i]=stats['requests']['data'][i].value;config.data.labels[i]=date.format('d F Y',stats['requests']['data'][i].date);}
 let chart=container.get('chart');if(chart){}
-element.innerHTML='';element.appendChild(child);container.set('chart',new Chart(child.getContext('2d'),config),true);element.dataset['canvas']=true;}});(function(window){"use strict";window.ls.container.get('view').add({selector:'data-appwrite',repeat:true,controller:function(element,view,container,form,alerts,expression,window,di,state){let action=element.dataset['appwrite'];let singleton=element.dataset['singleton'];let loaded=element.dataset['loaded'];let service=element.dataset['service']||action;let event=element.dataset['event'];let success=element.dataset['success']||'';let error=element.dataset['error']||'';let confirm=element.dataset['confirm']||'';let loading=element.dataset['loading']||'';let loaderId=null;let scope=element.dataset['scope']||'sdk';let debug=!!(element.dataset['debug']);if(debug)console.log('%c[service init]: '+action+' ('+service+')','color:red');if(loaded){return true;}
+element.innerHTML='';element.appendChild(child);container.set('chart',new Chart(child.getContext('2d'),config),true);element.dataset['canvas']=true;}});(function(window){"use strict";window.ls.container.get('view').add({selector:'data-service',repeat:true,controller:function(element,view,container,form,alerts,expression,window,di,state){let action=element.dataset['service'];let singleton=element.dataset['singleton'];let loaded=element.dataset['loaded'];let service=element.dataset['name']||action;let event=element.dataset['event'];let success=element.dataset['success']||'';let error=element.dataset['error']||'';let confirm=element.dataset['confirm']||'';let loading=element.dataset['loading']||'';let loaderId=null;let scope=element.dataset['scope']||'sdk';let debug=!!(element.dataset['debug']);if(debug)console.log('%c[service init]: '+action+' ('+service+')','color:red');if(loaded){return true;}
 success=success.trim().split(',');error=error.trim().split(',');let resolve=function(target){let FN_ARGS=/^function\s*[^\(]*\(\s*([^\)]*)\)/m;let text=target.toString();let args=text.match(FN_ARGS)[1].split(',');let data=('FORM'===element.tagName)?form.toJson(element):{};if(debug)console.log('%c[form data]: ','color:green',data);return target.apply(target,args.map(function(value){let result=null;if(!value){return null;}
 if(element.dataset['param'+value.charAt(0).toUpperCase()+value.slice(1)]){result=expression.parse(element.dataset['param'+value.charAt(0).toUpperCase()+value.slice(1)]);}
 if(data[value]){result=data[value];}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index 0e02b261d9..9247d3540e 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -246,7 +246,7 @@ window.getSelection().removeAllRanges();});element.parentNode.parentNode.appendC
 document.body.classList.add(prefix+'-'+value);cookie.set('language-'+prefix,value,365);document.dispatchEvent(new CustomEvent('updated-language-'+prefix));};document.addEventListener('updated-language-'+prefix,function(){element.value=cookie.get('language-'+prefix);});let def=cookie.get('language-'+prefix)||element.options[0].value;select(def);element.value=def;}}).add({selector:'data-ls-ui-chart',repeat:false,controller:function(element,container,date,document){let child=document.createElement('canvas');child.width=500;child.height=175;let stats=container.get('usage');if(!stats||!stats['requests']||!stats['requests']['data']){return;}
 let config={type:'line',data:{labels:[],datasets:[{label:'Requests',backgroundColor:'rgba(230, 248, 253, 0.3)',borderColor:'#29b5d9',borderWidth:2,data:[0,0,0,0,0,0,0],fill:true}]},options:{responsive:true,title:{display:false,text:'Stats'},legend:{display:false},tooltips:{mode:'index',intersect:false,caretPadding:0},hover:{mode:'nearest',intersect:true},scales:{xAxes:[{display:false}],yAxes:[{display:false,}]}}};for(let i=0;i<stats['requests']['data'].length;i++){config.data.datasets[0].data[i]=stats['requests']['data'][i].value;config.data.labels[i]=date.format('d F Y',stats['requests']['data'][i].date);}
 let chart=container.get('chart');if(chart){}
-element.innerHTML='';element.appendChild(child);container.set('chart',new Chart(child.getContext('2d'),config),true);element.dataset['canvas']=true;}});(function(window){"use strict";window.ls.container.get('view').add({selector:'data-appwrite',repeat:true,controller:function(element,view,container,form,alerts,expression,window,di,state){let action=element.dataset['appwrite'];let singleton=element.dataset['singleton'];let loaded=element.dataset['loaded'];let service=element.dataset['service']||action;let event=element.dataset['event'];let success=element.dataset['success']||'';let error=element.dataset['error']||'';let confirm=element.dataset['confirm']||'';let loading=element.dataset['loading']||'';let loaderId=null;let scope=element.dataset['scope']||'sdk';let debug=!!(element.dataset['debug']);if(debug)console.log('%c[service init]: '+action+' ('+service+')','color:red');if(loaded){return true;}
+element.innerHTML='';element.appendChild(child);container.set('chart',new Chart(child.getContext('2d'),config),true);element.dataset['canvas']=true;}});(function(window){"use strict";window.ls.container.get('view').add({selector:'data-service',repeat:true,controller:function(element,view,container,form,alerts,expression,window,di,state){let action=element.dataset['service'];let singleton=element.dataset['singleton'];let loaded=element.dataset['loaded'];let service=element.dataset['name']||action;let event=element.dataset['event'];let success=element.dataset['success']||'';let error=element.dataset['error']||'';let confirm=element.dataset['confirm']||'';let loading=element.dataset['loading']||'';let loaderId=null;let scope=element.dataset['scope']||'sdk';let debug=!!(element.dataset['debug']);if(debug)console.log('%c[service init]: '+action+' ('+service+')','color:red');if(loaded){return true;}
 success=success.trim().split(',');error=error.trim().split(',');let resolve=function(target){let FN_ARGS=/^function\s*[^\(]*\(\s*([^\)]*)\)/m;let text=target.toString();let args=text.match(FN_ARGS)[1].split(',');let data=('FORM'===element.tagName)?form.toJson(element):{};if(debug)console.log('%c[form data]: ','color:green',data);return target.apply(target,args.map(function(value){let result=null;if(!value){return null;}
 if(element.dataset['param'+value.charAt(0).toUpperCase()+value.slice(1)]){result=expression.parse(element.dataset['param'+value.charAt(0).toUpperCase()+value.slice(1)]);}
 if(data[value]){result=data[value];}
diff --git a/public/scripts/views/forms/draft.js b/public/scripts/views/forms/draft.js
deleted file mode 100644
index da9e2f1ad3..0000000000
--- a/public/scripts/views/forms/draft.js
+++ /dev/null
@@ -1,26 +0,0 @@
-(function (window) {
-    "use strict";
-
-    window.ls.container.get('view').add(
-        {
-            selector: 'data-forms-draft',
-            repeat: false,
-            controller: function(element, expression) {
-                var key = expression.parse(element.dataset['formsDraft'] || '');
-
-                if(element.value === '') {
-                    element.value = window.localStorage.getItem(key);
-                }
-
-                element.addEventListener('input', function () {
-                    window.localStorage.setItem(key, element.value);
-                });
-
-                element.form.addEventListener('submit', function () {
-                    window.localStorage.removeItem(key);
-                });
-            }
-        }
-    );
-
-})(window);
\ No newline at end of file
diff --git a/public/scripts/views/forms/recaptcha.js b/public/scripts/views/forms/recaptcha.js
deleted file mode 100644
index 31431fc279..0000000000
--- a/public/scripts/views/forms/recaptcha.js
+++ /dev/null
@@ -1,45 +0,0 @@
-(function (window) {
-    "use strict";
-
-    window.ls.container.get('view').add(
-        {
-            selector: 'data-forms-recaptcha',
-            repeat: false,
-            controller: function(element, document, window) {
-                var form    = document.getElementById(element.dataset['formsRecaptcha'] || '');
-                var captcha = document.createElement('input');
-
-                captcha.type = 'hidden';
-                captcha.name = 'g-recaptcha-response';
-                element.parentNode.insertBefore(captcha, element.nextSibling);
-
-                var render = function() {
-                    window.grecaptcha.render(element, {
-                        'sitekey': element.dataset['sitekey'] || '',
-                        'size': 'invisible',
-                        'badge': 'inline',
-                        'callback': function (token) {
-                            captcha.value = token;
-                            form.submit();
-                        }
-                    });
-                };
-
-                if(window.grecaptchaReady) {
-                    render();
-                }
-                else {
-                    document.addEventListener('recaptcha-loaded', render);
-                }
-
-                form.addEventListener('submit', function () {
-                    if('' === captcha.value) {
-                        event.preventDefault(); //prevent form submit before captcha is completed
-                        window.grecaptcha.execute();
-                    }
-                });
-            }
-        }
-    );
-
-})(window);
\ No newline at end of file
diff --git a/public/scripts/views/forms/upload-multi.js b/public/scripts/views/forms/upload-multi.js
deleted file mode 100644
index 79eb68f71d..0000000000
--- a/public/scripts/views/forms/upload-multi.js
+++ /dev/null
@@ -1,228 +0,0 @@
-(function (window) {
-    "use strict";
-
-    window.ls.container.get('view').add(
-        {
-            selector: 'data-forms-upload-multi',
-            repeat: false,
-            controller: function(element, window, container, alerts, expression) {
-                var scope           = element.dataset['scope'];
-                var labelButton     = element.dataset['labelButton'] || 'Upload';
-                var labelLoading    = element.dataset['labelLoading'] || 'Uploading...';
-                var previewWidth    = element.dataset['previewWidth'] || null;
-                var previewHeight   = element.dataset['previewHeight'] || 200;
-                var accept          = element.dataset['accept'] || '';
-                var required        = (element.dataset['required'] || false);
-                var multiple        = (element.dataset['multiple'] || false);
-                var className       = (element.dataset['class'] || 'upload');
-                var max             = parseInt((element.dataset['max'] || 4));
-                var sdk             = (scope === 'sdk') ? container.get('sdk') : container.get('console');
-                var output          = (element.value) ? ((multiple) ? JSON.parse(element.value) : [element.value]) : [];
-                var total           = 0;
-
-                var wrapper         = document.createElement('div');
-                var input           = document.createElement('input');
-                var upload          = document.createElement('div'); // Fake button
-                var preview         = document.createElement('ul');
-                var progress        = document.createElement('div');
-                var count           = document.createElement('div');
-
-                wrapper.className = className;
-
-                input.type = 'file';
-                input.accept = accept;
-                input.required = required;
-                input.multiple = multiple;
-                input.tabIndex = -1;
-
-                count.className = 'count';
-
-                upload.className = 'button reverse margin-bottom';
-                upload.innerHTML = '<i class="icon icon-upload"></i> ' + labelButton;
-                upload.tabIndex = 0;
-
-                preview.className = 'preview';
-
-                progress.className = 'progress';
-                progress.style.width = '0%';
-                progress.style.display = 'none';
-
-                var humanFileSize = function (bytes, si) {
-                    var thresh = si ? 1000 : 1024;
-
-                    if(Math.abs(bytes) < thresh) {
-                        return bytes + ' B';
-                    }
-
-                    var units = si
-                        ? ['KB','MB','GB','TB','PB','EB','ZB','YB']
-                        : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
-
-                    var u = -1;
-
-                    do {
-                        bytes /= thresh;
-                        ++u;
-                    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
-
-                    return bytes.toFixed(1)+' '+units[u];
-                };
-
-                var onComplete = function (message) {
-                    alerts.remove(message);
-
-                    input.disabled = false;
-                    upload.classList.remove('disabled');
-                    progress.style.width = '0%';
-                    progress.style.display = 'none';
-                };
-
-                var onProgress = function (event) {
-                    var percentage = (event.lengthComputable) ? Math.round(event.loaded * 100 / event.total) : '0';
-                    progress.style.display = (percentage !== 0) ? 'block' : 'none';
-                    progress.style.width = percentage + '%';
-                };
-
-                var render = function (files) { // Generate image previews + remove buttons + input array (array only when multiple is on)
-
-                    if(!Array.isArray(files)) { // Support single file
-                        files = [files];
-                    }
-
-                    preview.innerHTML = '';
-
-                    count.innerHTML = '0 / ' + max;
-
-                    files.map(function(obj) {
-                        var file = document.createElement('li');
-                        var image = document.createElement('img');
-
-                        image.src = image.src = sdk.storage.getPreview(obj, null, previewWidth, previewHeight);
-
-                        file.className = 'file';
-                        file.tabIndex = 0;
-                        file.appendChild(image);
-
-                        count.innerHTML = files.length + ' / ' + max;
-
-                        preview.appendChild(file);
-
-                        if((files.length >= max)) {
-                            input.disabled = true;
-                            upload.classList.add('disabled');
-                        }
-                        else {
-                            input.disabled = false;
-                            upload.classList.remove('disabled');
-                        }
-
-                        var remove = (function (obj) {
-                            return function (event) {
-                                output = (Array.isArray(output)) ? output.filter(function(e) {return e !== obj}) : [];
-
-                                render(output);
-                            }
-                        })(obj);
-
-                        file.addEventListener('click', remove);
-                        file.addEventListener('keypress', remove);
-
-                        element.value = (multiple) ? JSON.stringify(output) : output[0];
-
-                        /*title.addEventListener('click', function () {
-                            setTab(i);
-                        });
-
-                        title.addEventListener('keyup', function () {
-                            if(event.which === 13) {
-                                setTab(i);
-                            }
-                        });*/
-                    });
-                };
-
-                input.addEventListener('change', function() {
-                    var message     = alerts.send({text: labelLoading, class: ''}, 0);
-                    var files       = input.files;
-                    var formData    = new FormData();
-                    var read        = JSON.parse(expression.parse(element.dataset['read'] || '[]'));
-                    var write       = JSON.parse(expression.parse(element.dataset['write'] || '[]'));
-
-                    if(!multiple) {
-                        output = [];
-                    }
-
-                    for (var i = 0; i < files.length; i++) {
-                        if(output.length + (i + 1) > max) {
-                            break;
-                        }
-
-                        var file = files[i];
-
-                        formData.append('files[]', file);
-
-                        total = total + file.size;
-                    }
-
-                    for (var x = 0; x < read.length; x++) {
-                        formData.append('read[]', read[x]);
-                    }
-
-                    for (var y = 0; y < write.length; y++) {
-                        formData.append('write[]', write[y]);
-                    }
-
-                    sdk.storage.create(formData, onProgress)
-                        .then(function (response) {
-                            // parse array of $id's and assign to input value
-                            response = JSON.parse(response);
-
-                            response.map(function(obj) {
-                                if(!Array.isArray(output)) { // Support single file
-                                    throw new Error('Can\'t append new file to non array value');
-                                }
-
-                                output[output.length] = obj['$uid'];
-                            });
-
-                            onComplete(message);
-
-                            render(output);
-                        }, function (error) {
-                            alerts.send({text: 'An error occurred!', class: ''}, 3000); // File(s) uploaded.
-                            onComplete(message);
-                        });
-
-                    input.disabled = true;
-                });
-
-                element.addEventListener('change', function () {
-                    if(!element.value) {
-                        return;
-                    }
-                    output = (multiple) ? JSON.parse(element.value) : [element.value];
-                    render(output);
-                });
-
-                upload.addEventListener('keypress', function () {
-                    input.click();
-                });
-
-                element.parentNode.insertBefore(wrapper, element);
-
-                wrapper.appendChild(preview);
-                wrapper.appendChild(progress);
-                wrapper.appendChild(upload);
-
-                if(multiple) {
-                    wrapper.appendChild(count);
-                }
-
-                upload.appendChild(input);
-
-                render(output);
-            }
-        }
-    );
-
-})(window);
\ No newline at end of file
diff --git a/public/scripts/views/forms/upload.js b/public/scripts/views/forms/upload.js
index 1926a6c782..318cdec323 100644
--- a/public/scripts/views/forms/upload.js
+++ b/public/scripts/views/forms/upload.js
@@ -6,41 +6,46 @@
             selector: 'data-forms-upload',
             repeat: false,
             controller: function(element, window, container, alerts, expression) {
-                var scope       = element.dataset['scope'];
-                var label       = element.dataset['label'] || 'Upload';
-                var labelRemove = element.dataset['labelRemove'] || 'Remove';
-                var accept      = element.dataset['accept'] || '';
-                var required    = (element.dataset['required'] || false);
-                var sdk         = (scope === 'sdk') ? container.get('sdk') : container.get('console');
-                var input       = document.createElement('input');
-                var upload      = document.createElement('div');
-                var progress    = document.createElement('div');
-                var image       = document.createElement('img');
-                var info        = document.createElement('div');
-                var reset       = document.createElement('button');
+                var scope           = element.dataset['scope'];
+                var labelButton     = element.dataset['labelButton'] || 'Upload';
+                var labelLoading    = element.dataset['labelLoading'] || 'Uploading...';
+                var previewWidth    = element.dataset['previewWidth'] || null;
+                var previewHeight   = element.dataset['previewHeight'] || 200;
+                var accept          = element.dataset['accept'] || '';
+                var required        = (element.dataset['required'] || false);
+                var multiple        = (element.dataset['multiple'] || false);
+                var className       = (element.dataset['class'] || 'upload');
+                var max             = parseInt((element.dataset['max'] || 4));
+                var sdk             = (scope === 'sdk') ? container.get('sdk') : container.get('console');
+                var output          = (element.value) ? ((multiple) ? JSON.parse(element.value) : [element.value]) : [];
+                var total           = 0;
 
-                element.value = '';
+                var wrapper         = document.createElement('div');
+                var input           = document.createElement('input');
+                var upload          = document.createElement('div'); // Fake button
+                var preview         = document.createElement('ul');
+                var progress        = document.createElement('div');
+                var count           = document.createElement('div');
+
+                wrapper.className = className;
 
                 input.type = 'file';
                 input.accept = accept;
                 input.required = required;
+                input.multiple = multiple;
+                input.tabIndex = -1;
 
-                upload.className = 'button margin-bottom';
-                upload.innerHTML = '<i class="icon icon-upload"></i> ' + label;
+                count.className = 'count';
 
-                progress.style.background = 'green';
+                upload.className = 'button reverse margin-bottom';
+                upload.innerHTML = '<i class="icon icon-upload"></i> ' + labelButton;
+                upload.tabIndex = 0;
+
+                preview.className = 'preview';
+
+                progress.className = 'progress';
                 progress.style.width = '0%';
-                progress.style.height = '5px';
-
-                image.src = '';
-                image.className = 'file-preview avatar huge margin-bottom-small';
-
-                info.innerHTML = '';
-
-                reset.type = 'button';
-                reset.className = 'tag pull-start';
-                reset.innerHTML = '<i class="icon icon-cancel"></i> ' + labelRemove + '&nbsp;';
-                reset.style.display = 'none';
+                progress.style.display = 'none';
 
                 var humanFileSize = function (bytes, si) {
                     var thresh = si ? 1000 : 1024;
@@ -66,91 +71,156 @@
                 var onComplete = function (message) {
                     alerts.remove(message);
 
-                    input.disabled = '';
+                    input.disabled = false;
+                    upload.classList.remove('disabled');
                     progress.style.width = '0%';
+                    progress.style.display = 'none';
                 };
 
                 var onProgress = function (event) {
                     var percentage = (event.lengthComputable) ? Math.round(event.loaded * 100 / event.total) : '0';
+                    progress.style.display = (percentage !== 0) ? 'block' : 'none';
                     progress.style.width = percentage + '%';
                 };
 
-                var preview = function () {
-                    if(element.value === element.getAttribute('data-old-value')) { // No change from last input
-                        return null;
+                var render = function (files) { // Generate image previews + remove buttons + input array (array only when multiple is on)
+
+                    if(!Array.isArray(files)) { // Support single file
+                        files = [files];
                     }
 
-                    element.setAttribute('data-old-value', element.value);
+                    preview.innerHTML = '';
 
-                    if(element.value) {
-                        //image.src = element.value + '&width=300&height=300';
-                        image.src = sdk.storage.getPreview(element.value, null, 300, 300);
-                        reset.style.display = 'inline-block';
-                    }
-                    else {
-                        image.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
-                        info.innerHTML = '';
-                    }
+                    count.innerHTML = '0 / ' + max;
+
+                    files.map(function(obj) {
+                        var file = document.createElement('li');
+                        var image = document.createElement('img');
+
+                        image.src = image.src = sdk.storage.getPreview(obj, null, previewWidth, previewHeight);
+
+                        file.className = 'file';
+                        file.tabIndex = 0;
+                        file.appendChild(image);
+
+                        count.innerHTML = files.length + ' / ' + max;
+
+                        preview.appendChild(file);
+
+                        if((files.length >= max)) {
+                            input.disabled = true;
+                            upload.classList.add('disabled');
+                        }
+                        else {
+                            input.disabled = false;
+                            upload.classList.remove('disabled');
+                        }
+
+                        var remove = (function (obj) {
+                            return function (event) {
+                                output = (Array.isArray(output)) ? output.filter(function(e) {return e !== obj}) : [];
+
+                                render(output);
+                            }
+                        })(obj);
+
+                        file.addEventListener('click', remove);
+                        file.addEventListener('keypress', remove);
+
+                        element.value = (multiple) ? JSON.stringify(output) : output[0];
+
+                        /*title.addEventListener('click', function () {
+                            setTab(i);
+                        });
+
+                        title.addEventListener('keyup', function () {
+                            if(event.which === 13) {
+                                setTab(i);
+                            }
+                        });*/
+                    });
                 };
 
                 input.addEventListener('change', function() {
-                    var message     = alerts.send({text: 'Uploading...', class: ''}, 0);
+                    var message     = alerts.send({text: labelLoading, class: ''}, 0);
                     var files       = input.files;
                     var formData    = new FormData();
                     var read        = JSON.parse(expression.parse(element.dataset['read'] || '[]'));
                     var write       = JSON.parse(expression.parse(element.dataset['write'] || '[]'));
 
+                    if(!multiple) {
+                        output = [];
+                    }
+
                     for (var i = 0; i < files.length; i++) {
+                        if(output.length + (i + 1) > max) {
+                            break;
+                        }
+
                         var file = files[i];
 
                         formData.append('files[]', file);
+
+                        total = total + file.size;
                     }
 
                     for (var x = 0; x < read.length; x++) {
                         formData.append('read[]', read[x]);
                     }
 
-                    for (var y = 0; y < read.length; y++) {
+                    for (var y = 0; y < write.length; y++) {
                         formData.append('write[]', write[y]);
                     }
 
                     sdk.storage.create(formData, onProgress)
                         .then(function (response) {
-                            response = JSON.parse(response)[0];
+                            // parse array of $id's and assign to input value
+                            response = JSON.parse(response);
 
-                            element.value = sdk.storage.getPreview(response.$uid, response.token);
-                            element.value = response.$uid;
-                            element.dispatchEvent(new window.Event('change'));
+                            response.map(function(obj) {
+                                if(!Array.isArray(output)) { // Support single file
+                                    throw new Error('Can\'t append new file to non array value');
+                                }
+
+                                output[output.length] = obj['$uid'];
+                            });
 
                             onComplete(message);
 
+                            render(output);
                         }, function (error) {
                             alerts.send({text: 'An error occurred!', class: ''}, 3000); // File(s) uploaded.
                             onComplete(message);
                         });
 
-                    input.value = '';
                     input.disabled = true;
                 });
 
                 element.addEventListener('change', function () {
-                    preview();
+                    if(!element.value) {
+                        return;
+                    }
+                    output = (multiple) ? JSON.parse(element.value) : [element.value];
+                    render(output);
                 });
 
-                reset.addEventListener('click', function () {
-                    element.value = '';
-                    element.dispatchEvent(new window.Event('change'));
+                upload.addEventListener('keypress', function () {
+                    input.click();
                 });
 
-                element.parentNode.insertBefore(image, element);
-                element.parentNode.insertBefore(upload, element);
-                element.parentNode.insertBefore(reset, element);
-                element.parentNode.insertBefore(info, element);
-                element.parentNode.insertBefore(progress, element);
+                element.parentNode.insertBefore(wrapper, element);
+
+                wrapper.appendChild(preview);
+                wrapper.appendChild(progress);
+                wrapper.appendChild(upload);
+
+                if(multiple) {
+                    wrapper.appendChild(count);
+                }
 
                 upload.appendChild(input);
 
-                preview();
+                render(output);
             }
         }
     );
diff --git a/public/scripts/views/service.js b/public/scripts/views/service.js
index fd6e261c31..9fb2efa331 100644
--- a/public/scripts/views/service.js
+++ b/public/scripts/views/service.js
@@ -3,13 +3,13 @@
 
     window.ls.container.get('view').add(
         {
-            selector: 'data-appwrite',
+            selector: 'data-service',
             repeat: true,
-            controller: function(element, view, container, form, alerts, expression, window, di, state) {
-                let action      = element.dataset['appwrite'];
+            controller: function(element, view, container, form, alerts, expression, window) {
+                let action      = element.dataset['service'];
                 let singleton   = element.dataset['singleton'];
                 let loaded      = element.dataset['loaded'];
-                let service     = element.dataset['service'] || action;
+                let service     = element.dataset['name'] || action;
                 let event       = element.dataset['event'];   // load, click, change, submit
                 let success     = element.dataset['success'] || ''; // render, alert, redirect
                 let error       = element.dataset['error'] || '';  // alert, redirect, page
diff --git a/public/scripts/views/ui/scrollTo.js b/public/scripts/views/ui/scrollTo.js
deleted file mode 100644
index bd1d8052f8..0000000000
--- a/public/scripts/views/ui/scrollTo.js
+++ /dev/null
@@ -1,17 +0,0 @@
-(function (window) {
-    window.ls.container.get('view').add({
-        selector: 'data-ls-ui-scroll-to',
-        repeat: false,
-        controller: function(element, document, expression) {
-            var id = element.dataset['lsUiScrollTo'] || '';
-
-            element.addEventListener('click', function () {
-                var anchorId = expression.parse(id) || null;
-
-                if(anchorId) {
-                    document.getElementById(anchorId).scrollIntoView({behavior: 'smooth'});
-                }
-            });
-        }
-    });
-})(window);
\ No newline at end of file
diff --git a/public/scripts/views/ui/slide.js b/public/scripts/views/ui/slide.js
deleted file mode 100644
index 74863d7471..0000000000
--- a/public/scripts/views/ui/slide.js
+++ /dev/null
@@ -1,64 +0,0 @@
-(function (window) {
-    window.ls.container.get('view').add(
-        {
-            repeat: true,
-            selector: 'data-ui-slide',
-            controller: function(element, window) {
-                var slides = element.getElementsByTagName('img');
-                var paging = document.createElement('div');
-                var interval = null;
-                var auto = true;
-
-                paging.className = 'paging';
-
-                element.appendChild(paging);
-
-                for (var i = 0; i < slides.length; i++) {
-                    var button = document.createElement('button');
-                    button.type = 'button';
-                    button.innerHTML = i.toString();
-                    button.className = 'dot';
-                    paging.appendChild(button);
-
-                    button.addEventListener('click', (function (i) {
-                        return function (event) {
-                            auto = false;
-                            window.clearTimeout(interval);
-                            move(i);
-                        }
-                    })(i));
-                }
-
-                function move(index) {
-                    for (var i = 0; i < slides.length; i++) {
-                        if (index === i) {
-                            slides[index].classList.add('visible-fade');
-                            slides[index].classList.remove('hidden-fade');
-                            paging.children[i].className = 'selected';
-                        }
-                        else {
-                            slides[i].classList.remove('visible-fade');
-                            slides[i].classList.add('hidden-fade');
-                            paging.children[i].className = '';
-                        }
-                    }
-
-                    index++;
-
-                    if(index >= i) {
-                        index = 0;
-                    }
-
-                    if(auto) {
-                        interval = window.setTimeout(function () {
-                            move(index++)
-                        }, 7000); // Change image every 2 seconds
-                    }
-                }
-
-                move(0);
-            }
-        }
-    );
-
-})(window);
\ No newline at end of file