diff --git a/DependencyInjection/IrsteaFileUploadExtension.php b/DependencyInjection/IrsteaFileUploadExtension.php
index f86d2e3a24fb11395f5d99bdea0ac1036d2a146c..d3f8b862c7b3905800706e3898cefdca46c853eb 100644
--- a/DependencyInjection/IrsteaFileUploadExtension.php
+++ b/DependencyInjection/IrsteaFileUploadExtension.php
@@ -27,16 +27,26 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt
*/
public function prepend(ContainerBuilder $container)
{
+ $version = '9.9.2';
+
$container->prependExtensionConfig(
'assetic',
[
'assets' => [
'form_js' => [
'inputs' => [
- 'https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/9.9.2/js/jquery.fileupload.js',
+ "https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/$version/js/jquery.fileupload.js",
+ "https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/$version/js/jquery.fileupload-process.js",
+ "https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/$version/js/jquery.fileupload-validate.js",
+ "https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/$version/js/jquery.fileupload-ui.js",
'@IrsteaFileUploadBundle/Resources/js/widget/file_upload.js'
],
],
+ 'form_css' => [
+ 'inputs' => [
+ "https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/$version/css/jquery.fileupload.css",
+ ],
+ ],
],
]
);
diff --git a/Resources/js/widget/file_upload.js b/Resources/js/widget/file_upload.js
index db8dc1b3fb928d4731d7c95ab17f715cb2a3ae8a..0028c3ff813573522b91f94e05f739ea6c8f77e3 100644
--- a/Resources/js/widget/file_upload.js
+++ b/Resources/js/widget/file_upload.js
@@ -8,35 +8,105 @@
*/
$.fn.irsteaFileUpload = function(options) {
- console.debug('Init', options);
+ var $this = $(this),
+ prototype = options.prototype,
+ createUrl = options.createUrl,
+ uploadPrototype = options.uploadPrototype,
+ downloadPrototype = options.downloadPrototype;
- $(this).fileupload({
+ delete options.prototype;
+ delete options.createUrl;
+ delete options.uploadPrototype;
+ delete options.downloadPrototype;
+
+ var formatSize = function(size) {
+ if(size > 1000000000) {
+ return (size/1000000000).toFixed(2) + ' Gio';
+ }
+ if(size > 1000000) {
+ return (size/1000000).toFixed(2) + ' Mio';
+ }
+ if(size > 1000) {
+ return (size/1000).toFixed(2)+ ' Kio';
+ }
+ return size + ' o';
+ };
+
+ var formatBitrate = function(rate) { return formatSize(rate) + '/s'; };
+
+ // Activation
+ $this.fileupload({
type: 'PUT',
+ autoUpload: true,
formData: {},
- add: function (e, data) {
- var file = data.files[0];
- console.debug('Add', file);
+ multipart: false,
+ uploadTemplateId: null,
+ downloadTemplateId: null,
+ filesContainer: $this.find('.fileinput-entries'),
+ maxChunkSize: 1000000,
+ uploadTemplate: function(data) {
+ var rows = $();
+ $.each(data.files, function (index, file) {
+ var row = $(uploadPrototype);
+ row.find('.name').text(file.name);
+ row.find('.size').text(formatSize(file.size));
+ if (file.error) {
+ row.find('.error').text(file.error);
+ }
+ rows = rows.add(row);
+ });
+ return rows;
+ },
+ downloadTemplate: function(data) {
+ var rows = $();
+ $.each(data.files, function (index, file) {
+ var row = $(downloadPrototype);
+ row.find('.size').html(formatSize(file.size));
+ if (file.error) {
+ row.find('.name').text(file.name);
+ row.find('.error').text(file.error);
+ } else {
+ row.find('.name a')
+ .text(file.name)
+ .attr('data-gallery', '')
+ .prop('href', file.url);
+ row.find('button.delete')
+ .attr('data-type', file.delete_type)
+ .attr('data-url', file.delete_url);
+ }
+ rows = rows.add(row);
+ });
+ return rows;
+ },
+ submit: function (e, data) {
+ var $this = $(this),
+ file = data.files[0];
$.post(
- options.createUrl,
+ createUrl,
{ file: { name: file.name, size: file.size, type: file.type, lastModified: file.lastModified } },
function(response) {
- if(response.status === 201) {
- data.url = response.url;
- data.multipart = false;
- data.submit();
- }
+ data.url = response.url;
+ data.jqXHR = $this.fileupload('send', data);
}
);
+ return false;
},
- done: function (e, data) {
- console.debug('Done', data);
- },
- fail: function (e, data) {
+ progress: function (e, data) {
+ if(!data.context || e.isDefaultPrevented()) {
+ return;
+ }
+ var progress = Math.floor(data.loaded / data.total * 100);
+ data.context.each(function () {
+ $(this).find('.progress')
+ .attr('aria-valuenow', progress)
+ .children().first().css('width',progress + '%');
+ $(this).find('.progress-text').html(progress + '% ('+formatBitrate(data.bitrate)+')');
+ });
+ }
+ }).bind({
+ fileuploadfailed: function (e, data) {
$.ajax(data.url, { type: 'DELETE' });
},
- progress: function(e, data) {
- console.debug('Progress', data);
- },
});
};
diff --git a/Resources/views/Form/file_upload.html.twig b/Resources/views/Form/file_upload.html.twig
index 12be133b6917db24bb3c06272fdf1a155ba9ff3c..faf6290954fae22c52e730b1e1c571aa517a5d10 100644
--- a/Resources/views/Form/file_upload.html.twig
+++ b/Resources/views/Form/file_upload.html.twig
@@ -1,5 +1,41 @@
+{% block file_upload_progress_prototype %}
+ <div class="template-upload">
+ <button class="btn btn-sm btn-danger cancel">{{ irstea_icon('remove') }}</button>
+ <span class="name"></a></span>
+ <span class="size"></a></span>
+ <span class="error danger"></span>
+ <div class="progress">
+ <span class="progress-text pull-right"></span>
+ <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+{% endblock %}
+
+{% macro fu_download(fieldName, file) %}
+ <div class="template-download">
+ <input type="hidden" name="{{ fieldName }}" value="{{ file.id|default }}"/>
+ <button class="btn btn-sm btn-danger delete">{{ irstea_icon('trash') }}</button>
+ <span class="name"><a{% if file %} href="{{ path('file_upload_get', {id: file.id}) }}"{% endif %}>{{ file.originalFilename|default }}</a></span>
+ <span class="size">{{ file.size|default }}</span>
+ <span class="error danger"></span>
+ </div>
+{% endmacro %}
+
{% block file_upload_widget %}
- {% set type = 'file' %}
- {{ block('form_widget_simple') }}
+ <div id="{{ id }}"
+ data-widget="irsteaFileUpload"
+ data-create-url="{{ widget_attr['data-create-url'] }}"
+ data-download-prototype="{{ _self.fu_download(name, null)|e }}"
+ data-upload-prototype="{{ block('file_upload_progress_prototype')|e }}">
+ <span class="btn btn-primary fileinput-button">
+ <span>{{ irstea_icon('upload') }} {% trans %}button.upload{% endtrans %}</span>
+ <input type="file" name="_dummy_{{ name }}" multiple="multiple"/>
+ </span>
+ <div class="fileinput-entries">
+ {% if value is not empty %}
+ {{ _self.fu_download(name, value) }}
+ {% endif %}
+ </div>
+ </div>
{% endblock file_upload_widget %}