Skip to content
GitLab
Commit 2a66b91f authored by Guillaume Perréal's avatar Guillaume Perréal
Browse files

Mise à jour du frontend pour utiliser la version "UI" du plugin File-Upload.

parent 95ffe933
master 0.1.x 1.x 3.x 4.x 5-migration-vers-la-nouvelle-architecture-basee-sur-webpack-npm 6-supprimer-isdevtools 8-enrichir-le-dossier-test-sur-la-base-de-la-nouvelle-architecture 8-enrichir-le-dossier-test-sur-la-base-de-la-nouvelle-architecture-2 remplacer_assetic_par_webpack symfony3.4_ramsey_compatibility 2.1.0 2.0.2 2.0.1 2.0.0 1.0.1 1.0.0 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 137 additions and 21 deletions
+137 -21
DependencyInjection/IrsteaFileUploadExtension.php
+ 11
− 1
View file @ 2a66b91f
...@@ -27,16 +27,26 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt ...@@ -27,16 +27,26 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt
*/ */
public function prepend(ContainerBuilder $container) public function prepend(ContainerBuilder $container)
{ {
$version = '9.9.2';
$container->prependExtensionConfig( $container->prependExtensionConfig(
'assetic', 'assetic',
[ [
'assets' => [ 'assets' => [
'form_js' => [ 'form_js' => [
'inputs' => [ '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' '@IrsteaFileUploadBundle/Resources/js/widget/file_upload.js'
], ],
], ],
'form_css' => [
'inputs' => [
"https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/$version/css/jquery.fileupload.css",
],
],
], ],
] ]
); );
......
Resources/js/widget/file_upload.js
+ 88
− 18
View file @ 2a66b91f
...@@ -8,35 +8,105 @@ ...@@ -8,35 +8,105 @@
*/ */
$.fn.irsteaFileUpload = function(options) { $.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', type: 'PUT',
autoUpload: true,
formData: {}, formData: {},
add: function (e, data) { multipart: false,
var file = data.files[0]; uploadTemplateId: null,
console.debug('Add', file); 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( $.post(
options.createUrl, createUrl,
{ file: { name: file.name, size: file.size, type: file.type, lastModified: file.lastModified } }, { file: { name: file.name, size: file.size, type: file.type, lastModified: file.lastModified } },
function(response) { function(response) {
if(response.status === 201) { data.url = response.url;
data.url = response.url; data.jqXHR = $this.fileupload('send', data);
data.multipart = false;
data.submit();
}
} }
); );
return false;
}, },
done: function (e, data) { progress: function (e, data) {
console.debug('Done', data); if(!data.context || e.isDefaultPrevented()) {
}, return;
fail: function (e, data) { }
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' }); $.ajax(data.url, { type: 'DELETE' });
}, },
progress: function(e, data) {
console.debug('Progress', data);
},
}); });
}; };
......
Resources/views/Form/file_upload.html.twig
+ 38
− 2
View file @ 2a66b91f
{% 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 %} {% block file_upload_widget %}
{% set type = 'file' %} <div id="{{ id }}"
{{ block('form_widget_simple') }} 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') }}&nbsp;{% 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 %} {% endblock file_upload_widget %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment