Add file drag and drop and asynchronous upload

This commit is contained in:
Frederic Guillot
2016-02-13 19:24:36 -05:00
parent 6161eaef9e
commit 738b6ae583
11 changed files with 222 additions and 33 deletions

View File

@@ -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')),
)));
}

View File

@@ -42,6 +42,29 @@ class Text extends Base
return round(pow(1024, $base - floor($base)), $precision).$suffixes[(int)floor($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
*

View File

@@ -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>
<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-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>
<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>
</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>