dropzone.js handle upload of document for a better UX

This commit is contained in:
2018-09-13 21:01:47 +02:00
parent 823aee2264
commit e55d654675
9 changed files with 275 additions and 104 deletions

View File

@@ -1,5 +1,17 @@
{% block stored_object_widget %}
<div data-stored-object="data-stored-object">
<div
data-stored-object="data-stored-object"
data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}"
data-label-quiet-button="{{ 'Download'|trans|escape('html_attr') }}"
data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}"
data-dict-file-too-big="{{ 'File too big'|trans|escape('html_attr') }}"
data-dict-default-message="{{ "Drop your file or click here"|trans|escape('html_attr') }}"
data-dict-remove-file="{{ 'Remove file in order to upload a new one'|trans|escape('html_attr') }}"
data-dict-max-files-exceeded="{{ 'Max files exceeded. Remove previous files'|trans|escape('html_attr') }}"
data-dict-cancel-upload="{{ 'Cancel upload'|trans|escape('html_attr') }}"
data-dict-cancel-upload-confirm="{{ 'Are you sure you want to cancel this upload ?'|trans|escape('html_attr') }}"
data-dict-upload-canceled="{{ 'Upload canceled'|trans|escape('html_attr') }}"
data-temp-url-generator="{{ path('async_upload.generate_url', { 'method': 'GET' })|escape('html_attr') }}">
{{ form_widget(form.filename) }}
{{ form_widget(form.keyInfos, { 'attr': { 'data-stored-object-key': 1 } }) }}
{{ form_widget(form.iv, { 'attr': { 'data-stored-object-iv': 1 } }) }}

View File

@@ -2,6 +2,14 @@
{% if storedObject is null %}
<!-- No document to download -->
{% else %}
<a class="sc-button bt-download" data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}" data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}" data-download-button data-key="{{ storedObject.keyInfos|json_encode|escape('html_attr') }}" data-iv="{{ storedObject.iv|json_encode|escape('html_attr') }}" data-temp-url-get-generator="{{ storedObject|generate_url|escape('html_attr') }}" data-mime-type="{{ storedObject.type|escape('html_attr') }}" {% if filename is not null %}data-filename="{{ filename|escape('html_attr') }}"{% endif %}>{{ 'Download'|trans }}</a>
<a class="sc-button bt-download"
data-label-preparing="{{ ('Preparing'|trans ~ '...')|escape('html_attr') }}"
data-label-ready="{{ 'Ready to show'|trans|escape('html_attr') }}"
data-download-button
data-key="{{ storedObject.keyInfos|json_encode|escape('html_attr') }}"
data-iv="{{ storedObject.iv|json_encode|escape('html_attr') }}"
data-temp-url-get-generator="{{ storedObject|generate_url|escape('html_attr') }}"
data-mime-type="{{ storedObject.type|escape('html_attr') }}" {% if filename is not null %}data-filename="{{ filename|escape('html_attr') }}"{% endif %}>
{{ 'Download'|trans }}</a>
{% endif %}
{% endmacro %}

View File

@@ -17,8 +17,6 @@
{% extends "ChillPersonBundle::layout.html.twig" %}
{% import "@ChillDocStore/Macro/macro.html.twig" as m %}
{% set activeRouteKey = '' %}
{% block title %}{{ 'Editing document for %name%'|trans({ '%name%': person.firstName|capitalize ~ ' ' ~ person.lastName } )|capitalize }}{% endblock %}
@@ -34,14 +32,6 @@
{{ form_row(form.category) }}
{{ form_row(form.scope) }}
{{ form_row(form.description) }}
<div class="container">
<div class="grid-4 clear">
<label>{{ 'Existing document'|trans }}</label>
</div>
<div class="grid-8">
{{ m.download_button(document.object, document.title) }}
</div>
</div>
{{ form_row(form.object, { 'label': 'Document', 'existing': document.object }) }}
<ul class="record_actions">
@@ -68,3 +58,7 @@
{% block js %}
<script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
{% endblock %}

View File

@@ -50,3 +50,7 @@
{% block js %}
<script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
{% endblock %}
{% block css %}
<link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
{% endblock %}