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

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