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 @@
* Copyright (C) 2015 IRSTEA
* All rights reserved.
*/
(function($, Translator) {
(function ($, Translator) {
var formatFileSize = function(size) {
var formatFileSize = function (size) {
var unit;
if(size > 1000000000) {
size = (size/1000000000).toFixed(2);
if (size > 1000000000) {
size = (size / 1000000000).toFixed(2);
unit = 'Gi';
} else if(size > 1000000) {
size = (size/1000000).toFixed(2);
} else if (size > 1000000) {
size = (size / 1000000).toFixed(2);
unit = 'Mi';
} else if(size > 1000) {
size = (size/1000).toFixed(2);
unit ='Ki';
} else if (size > 1000) {
size = (size / 1000).toFixed(2);
unit = 'Ki';
} else {
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';
};
......@@ -29,29 +30,52 @@
/** Plugin irsteaFileUpload.
*/
$.fn.irsteaFileUpload = function(options) {
var $this = $(this),
$button = $this.find('.fileinput-button'),
$entries = $this.find('.fileinput-entries'),
nextIndex = $entries.find('.fileinput-entry').length,
createUrl = options.createUrl,
uploadPrototype = options.uploadPrototype,
$.fn.irsteaFileUpload = function (options) {
var $this = $(this),
$button = $this.find('.fileinput-button'),
input = $this.find(':file')[0],
$entries = $this.find('.fileinput-entries'),
nextIndex = $entries.find('.fileinput-entry').length,
createUrl = options.createUrl,
uploadPrototype = options.uploadPrototype,
downloadPrototype = options.downloadPrototype,
csrfQuery = '?token=' + options.csrfToken;
csrfQuery = '?token=' + options.csrfToken;
delete options.createUrl;
delete options.uploadPrototype;
delete options.downloadPrototype;
delete options.csrfToken;
if(options.acceptFileTypes) {
if (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);
if(message) {
if (message) {
$this.find('.error').text(Translator.trans(message));
}
$this.addClass('alert alert-danger');
......@@ -62,20 +86,19 @@
$this.find('.description').remove();
$this.find('.id').remove();
},
updateDisplay = function() {
updateDisplay = function (event) {
var hasEntry = false;
$entries.find('.fileinput-entry').each(function() {
$entries.find('.fileinput-entry').each(function () {
var data = $(this).data('data');
if(data && data.files.error) {
if (data && data.files.error) {
showError(this, data.files[0].error);
}
hasEntry = true;
});
$button.toggle(options.multiple || !hasEntry);
checkValidity();
};
updateDisplay();
// Activation
$button.fileupload($.extend(
options,
......@@ -89,7 +112,7 @@
filesContainer: $this.find('.fileinput-entries'),
dropZone: $this,
i18n: Translator.trans,
uploadTemplate: function(data) {
uploadTemplate: function (data) {
var rows = $();
$.each(data.files, function (index, file) {
var row = $(uploadPrototype);
......@@ -103,7 +126,7 @@
});
return rows;
},
downloadTemplate: function(data) {
downloadTemplate: function (data) {
var rows = $();
$.each(data.files, function (index, file) {
var row = $(downloadPrototype.replace(/__index__/g, nextIndex++));
......@@ -122,10 +145,10 @@
.attr('data-url', file.delete_url + csrfQuery);
row.find('input.id')
.val(file.id);
if(file.icon && file.icon !== 'file') {
if (file.icon && file.icon !== 'file') {
row.find('.icon')
.removeClass('fa-file-o')
.addClass('fa-file-'+file.icon+'-o');
.addClass('fa-file-' + file.icon + '-o');
}
});
return rows;
......@@ -135,8 +158,8 @@
file = data.files[0];
$.post(
createUrl,
{ file: { name: file.name, size: file.size, type: file.type, lastModified: file.lastModified } },
function(response) {
{file: {name: file.name, size: file.size, type: file.type, lastModified: file.lastModified}},
function (response) {
file.icon = response.icon;
data.url = response.put_url + csrfQuery;
data.delete_url = response.delete_url;
......@@ -144,7 +167,7 @@
data.jqXHR = $this.fileupload('send', data);
}
)
.fail(function(jqXHR, textStatus, errorThrown) {
.fail(function (jqXHR, textStatus, errorThrown) {
file.error = textStatus === "error" ? errorThrown : ('Error #' + jqXHR.status);
data.files.error = true;
showError(data.context, file.error);
......@@ -153,7 +176,7 @@
return false;
},
progress: function (e, data) {
if(!data.context || e.isDefaultPrevented()) {
if (!data.context || e.isDefaultPrevented()) {
return;
}
var percent = data.loaded / data.total * 100,
......@@ -162,21 +185,22 @@
var $this = $(data.context);
$this.find('.progress').show();
$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 = [];
$.each(data.files, function(index, file) {
$.each(data.files, function (index, file) {
files.push($.extend(file, data.result.files[index]));
});
return files;
},
}
)).bind({
fileuploadfailed: function (e, data) {
if(data.delete_url) {
$.ajax(data.delete_url + csrfQuery, { type: data.delete_type });
fileuploadfailed: function (event, data) {
if (data.delete_url) {
$.ajax(data.delete_url + csrfQuery, {type: data.delete_type});
checkValidity();
}
},
fileuploadadded: updateDisplay,
......@@ -185,10 +209,11 @@
fileuploadprocessalways: updateDisplay
});
if(options.disabled || options.readonly) {
if (options.disabled || options.readonly) {
$button.fileupload('disable');
}
updateDisplay();
};
})(jQuery, Translator);
Resources/views/Form/file_upload.html.twig
+ 1
− 1
View file @ 37b88945
......@@ -49,7 +49,7 @@
</div>
<div class="fileinput-button btn btn-default btn-xs">
<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 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