Add file drag and drop and asynchronous upload

3 files changed, 52 insertions, 10 deletions

diff --git a/app/Controller/File.php b/app/Controller/File.php
index 50db3865..4ac45fbd 100644
--- a/app/Controller/File.php
+++ b/app/Controller/File.php
@@ -42,7 +42,7 @@ class File extends Base
 
         $this->response->html($this->helper->layout->task('file/new', array(
             'task' => $task,
-            'max_size' => ini_get('upload_max_filesize'),
+            'max_size' => $this->helper->text->phpToBytes(ini_get('upload_max_filesize')),
         )));
     }
 
diff --git a/app/Helper/Text.php b/app/Helper/Text.php
index 59bfd997..83f1e3f9 100644
--- a/app/Helper/Text.php
+++ b/app/Helper/Text.php
@@ -43,6 +43,29 @@ class Text extends Base
     }
 
     /**
+     * Get the number of bytes from PHP size
+     *
+     * @param  integer  $val        PHP size (example: 2M)
+     * @return integer
+     */
+    public function phpToBytes($val)
+    {
+        $val = trim($val);
+        $last = strtolower($val[strlen($val)-1]);
+
+        switch ($last) {
+            case 'g':
+                $val *= 1024;
+            case 'm':
+                $val *= 1024;
+            case 'k':
+                $val *= 1024;
+        }
+
+        return $val;
+    }
+
+    /**
      * Return true if needle is contained in the haystack
      *
      * @param  string   $haystack   Haystack
diff --git a/app/Template/file/new.php b/app/Template/file/new.php
index 1702638d..e84ef839 100644
--- a/app/Template/file/new.php
+++ b/app/Template/file/new.php
@@ -1,14 +1,33 @@
 <div class="page-header">
     <h2><?= t('Attach a document') ?></h2>
 </div>
+<div id="file-done" style="display:none">
+    <p class="alert alert-success">
+        <?= t('All files have been uploaded successfully.') ?>
+        <?= $this->url->link(t('View uploaded files'), 'task', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>
+    </p>
+</div>
+
+<div id="file-error-max-size" style="display:none">
+    <p class="alert alert-error">
+        <?= t('The maximum allowed file size is %sB.', $this->text->bytes($max_size)) ?>
+        <a href="#" id="file-browser"><?= t('Choose files again') ?></a>
+    </p>
+</div>
 
-<form action="<?= $this->url->href('file', 'save', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>" method="post" enctype="multipart/form-data">
-    <?= $this->form->csrf() ?>
-    <input type="file" name="files[]" multiple />
-    <div class="form-help"><?= t('Maximum size: ') ?><?= is_integer($max_size) ? $this->text->bytes($max_size) : $max_size ?></div>
-    <div class="form-actions">
-        <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue">
-        <?= t('or') ?>
-        <?= $this->url->link(t('cancel'), 'task', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, 'close-popover') ?>
+<div
+    id="file-dropzone"
+    data-max-size="<?= $max_size ?>"
+    data-url="<?= $this->url->href('file', 'save', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
+    <div id="file-dropzone-inner">
+        <?= t('Drag and drop your files here') ?> <?= t('or') ?> <a href="#" id="file-browser"><?= t('choose files') ?></a>
     </div>
-</form>
\ No newline at end of file
+</div>
+
+<input type="file" name="files[]" multiple style="display:none" id="file-form-element">
+
+<div class="form-actions">
+    <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue" id="file-upload-button" disabled>
+    <?= t('or') ?>
+    <?= $this->url->link(t('cancel'), 'task', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, 'close-popover') ?>
+</div>