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

Validation HTML5.

parent ad78be86
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 69 additions and 44 deletions
+69 -44
Resources/js/widget/file_upload.js
+ 68
− 43
View file @ 37b88945
...@@ -2,25 +2,26 @@ ...@@ -2,25 +2,26 @@
* Copyright (C) 2015 IRSTEA * Copyright (C) 2015 IRSTEA
* All rights reserved. * All rights reserved.
*/ */
(function($, Translator) { (function ($, Translator) {
var formatFileSize = function(size) { var formatFileSize = function (size) {
var unit; var unit;
if(size > 1000000000) { if (size > 1000000000) {
size = (size/1000000000).toFixed(2); size = (size / 1000000000).toFixed(2);
unit = 'Gi'; unit = 'Gi';
} else if(size > 1000000) { } else if (size > 1000000) {
size = (size/1000000).toFixed(2); size = (size / 1000000).toFixed(2);
unit = 'Mi'; unit = 'Mi';
} else if(size > 1000) { } else if (size > 1000) {
size = (size/1000).toFixed(2); size = (size / 1000).toFixed(2);
unit ='Ki'; unit = 'Ki';
} else { } else {
unit = ''; unit = '';
} }
return Translator.trans('file_size(%size%,%unit%)', {size:size, unit:unit}, 'file_upload'); 'UPLOADING !'
return Translator.trans('file_size(%size%,%unit%)', {size: size, unit: unit}, 'file_upload');
}, },
formatBitrate = function(rate) { formatBitrate = function (rate) {
return formatFileSize(rate) + '/s'; return formatFileSize(rate) + '/s';
}; };
...@@ -29,29 +30,52 @@ ...@@ -29,29 +30,52 @@
/** Plugin irsteaFileUpload. /** Plugin irsteaFileUpload.
*/ */
$.fn.irsteaFileUpload = function(options) { $.fn.irsteaFileUpload = function (options) {
var $this = $(this), var $this = $(this),
$button = $this.find('.fileinput-button'), $button = $this.find('.fileinput-button'),
$entries = $this.find('.fileinput-entries'), input = $this.find(':file')[0],
nextIndex = $entries.find('.fileinput-entry').length, $entries = $this.find('.fileinput-entries'),
createUrl = options.createUrl, nextIndex = $entries.find('.fileinput-entry').length,
uploadPrototype = options.uploadPrototype, createUrl = options.createUrl,
uploadPrototype = options.uploadPrototype,
downloadPrototype = options.downloadPrototype, downloadPrototype = options.downloadPrototype,
csrfQuery = '?token=' + options.csrfToken; csrfQuery = '?token=' + options.csrfToken;
delete options.createUrl; delete options.createUrl;
delete options.uploadPrototype; delete options.uploadPrototype;
delete options.downloadPrototype; delete options.downloadPrototype;
delete options.csrfToken; delete options.csrfToken;
if(options.acceptFileTypes) { if (options.acceptFileTypes) {
options.acceptFileTypes = new RegExp('^' + options.acceptFileTypes + '$'); options.acceptFileTypes = new RegExp('^' + options.acceptFileTypes + '$');
} }
var showError = function(entry, message) { var checkValidity = function () {
var counts = {
upload: $entries.find('.template-upload').length,
download: $entries.find('.template-download').length,
error: $entries.find('.alert-danger').length,
},
error = '';
if (counts.upload > 0) {
error = Translator.trans('file_upload.running_upload');
} else if (counts.error > 0) {
error = Translator.trans('file_upload.upload_error');
} else if (options.required && counts.download < 1) {
error = Translator.trans('file_upload.required_file');
}
input.setCustomValidity(error);
// console.debug(input, counts, input.validationMessage, input.validity);
},
showError = function (entry, message) {
var $this = $(entry); var $this = $(entry);
if(message) { if (message) {
$this.find('.error').text(Translator.trans(message)); $this.find('.error').text(Translator.trans(message));
} }
$this.addClass('alert alert-danger'); $this.addClass('alert alert-danger');
...@@ -62,20 +86,19 @@ ...@@ -62,20 +86,19 @@
$this.find('.description').remove(); $this.find('.description').remove();
$this.find('.id').remove(); $this.find('.id').remove();
}, },
updateDisplay = function() { updateDisplay = function (event) {
var hasEntry = false; var hasEntry = false;
$entries.find('.fileinput-entry').each(function() { $entries.find('.fileinput-entry').each(function () {
var data = $(this).data('data'); var data = $(this).data('data');
if(data && data.files.error) { if (data && data.files.error) {
showError(this, data.files[0].error); showError(this, data.files[0].error);
} }
hasEntry = true; hasEntry = true;
}); });
$button.toggle(options.multiple || !hasEntry); $button.toggle(options.multiple || !hasEntry);
checkValidity();
}; };
updateDisplay();
// Activation // Activation
$button.fileupload($.extend( $button.fileupload($.extend(
options, options,
...@@ -89,7 +112,7 @@ ...@@ -89,7 +112,7 @@
filesContainer: $this.find('.fileinput-entries'), filesContainer: $this.find('.fileinput-entries'),
dropZone: $this, dropZone: $this,
i18n: Translator.trans, i18n: Translator.trans,
uploadTemplate: function(data) { uploadTemplate: function (data) {
var rows = $(); var rows = $();
$.each(data.files, function (index, file) { $.each(data.files, function (index, file) {
var row = $(uploadPrototype); var row = $(uploadPrototype);
...@@ -103,7 +126,7 @@ ...@@ -103,7 +126,7 @@
}); });
return rows; return rows;
}, },
downloadTemplate: function(data) { downloadTemplate: function (data) {
var rows = $(); var rows = $();
$.each(data.files, function (index, file) { $.each(data.files, function (index, file) {
var row = $(downloadPrototype.replace(/__index__/g, nextIndex++)); var row = $(downloadPrototype.replace(/__index__/g, nextIndex++));
...@@ -122,10 +145,10 @@ ...@@ -122,10 +145,10 @@
.attr('data-url', file.delete_url + csrfQuery); .attr('data-url', file.delete_url + csrfQuery);
row.find('input.id') row.find('input.id')
.val(file.id); .val(file.id);
if(file.icon && file.icon !== 'file') { if (file.icon && file.icon !== 'file') {
row.find('.icon') row.find('.icon')
.removeClass('fa-file-o') .removeClass('fa-file-o')
.addClass('fa-file-'+file.icon+'-o'); .addClass('fa-file-' + file.icon + '-o');
} }
}); });
return rows; return rows;
...@@ -135,8 +158,8 @@ ...@@ -135,8 +158,8 @@
file = data.files[0]; file = data.files[0];
$.post( $.post(
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) {
file.icon = response.icon; file.icon = response.icon;
data.url = response.put_url + csrfQuery; data.url = response.put_url + csrfQuery;
data.delete_url = response.delete_url; data.delete_url = response.delete_url;
...@@ -144,7 +167,7 @@ ...@@ -144,7 +167,7 @@
data.jqXHR = $this.fileupload('send', data); data.jqXHR = $this.fileupload('send', data);
} }
) )
.fail(function(jqXHR, textStatus, errorThrown) { .fail(function (jqXHR, textStatus, errorThrown) {
file.error = textStatus === "error" ? errorThrown : ('Error #' + jqXHR.status); file.error = textStatus === "error" ? errorThrown : ('Error #' + jqXHR.status);
data.files.error = true; data.files.error = true;
showError(data.context, file.error); showError(data.context, file.error);
...@@ -153,7 +176,7 @@ ...@@ -153,7 +176,7 @@
return false; return false;
}, },
progress: function (e, data) { progress: function (e, data) {
if(!data.context || e.isDefaultPrevented()) { if (!data.context || e.isDefaultPrevented()) {
return; return;
} }
var percent = data.loaded / data.total * 100, var percent = data.loaded / data.total * 100,
...@@ -162,21 +185,22 @@ ...@@ -162,21 +185,22 @@
var $this = $(data.context); var $this = $(data.context);
$this.find('.progress').show(); $this.find('.progress').show();
$this.find('.progress-bar').css('width', percent + '%').attr('aria-valuenow', percentText); $this.find('.progress-bar').css('width', percent + '%').attr('aria-valuenow', percentText);
$this.find('.progress-text').show().html(percentText + '% ('+formatBitrate(data.bitrate)+')'); $this.find('.progress-text').show().html(percentText + '% (' + formatBitrate(data.bitrate) + ')');
}); });
}, },
getFilesFromResponse: function(data) { getFilesFromResponse: function (data) {
var files = []; var files = [];
$.each(data.files, function(index, file) { $.each(data.files, function (index, file) {
files.push($.extend(file, data.result.files[index])); files.push($.extend(file, data.result.files[index]));
}); });
return files; return files;
}, },
} }
)).bind({ )).bind({
fileuploadfailed: function (e, data) { fileuploadfailed: function (event, data) {
if(data.delete_url) { if (data.delete_url) {
$.ajax(data.delete_url + csrfQuery, { type: data.delete_type }); $.ajax(data.delete_url + csrfQuery, {type: data.delete_type});
checkValidity();
} }
}, },
fileuploadadded: updateDisplay, fileuploadadded: updateDisplay,
...@@ -185,10 +209,11 @@ ...@@ -185,10 +209,11 @@
fileuploadprocessalways: updateDisplay fileuploadprocessalways: updateDisplay
}); });
if(options.disabled || options.readonly) { if (options.disabled || options.readonly) {
$button.fileupload('disable'); $button.fileupload('disable');
} }
updateDisplay();
}; };
})(jQuery, Translator); })(jQuery, Translator);
Resources/views/Form/file_upload.html.twig
+ 1
− 1
View file @ 37b88945
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</div> </div>
<div class="fileinput-button btn btn-default btn-xs"> <div class="fileinput-button btn btn-default btn-xs">
<span>{{ irstea_icon('upload') }}&nbsp;{% trans %}button.upload{% endtrans %}</span> <span>{{ irstea_icon('upload') }}&nbsp;{% trans %}button.upload{% endtrans %}</span>
<input type="file" name="_hack_{{ full_name }}" <input type="file" name="_hack_{{ full_name }}" data-map-errors-to="#{{ id }}"
{%- if multiple %} multiple="multiple"{% endif -%} {%- if multiple %} multiple="multiple"{% endif -%}
{%- if disabled or read_only %} disabled="disabled"{% endif -%} {%- if disabled or read_only %} disabled="disabled"{% endif -%}
/> />
......
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