Fix Admin forms behavior with input[type=files]

* Changes in file inputs are now detected when leaving the page
* Text of file input labels is now restored when removing files
This commit is contained in:
Giuseppe Criscione 2018-07-08 16:03:00 +02:00
parent 330d8ed3cc
commit 70e143bfa2
4 changed files with 37 additions and 7 deletions

21
admin/assets/js/app.js Normal file → Executable file
View File

@ -206,6 +206,14 @@ Formwork.Form = function(form) {
});
function hasChanged() {
var $fileInputs = $form.find(':file');
if ($fileInputs.length > 0) {
for (var i = 0; i < $fileInputs.length; i++) {
if ($fileInputs[i].files.length > 0) {
return true;
}
}
}
return $form.serialize() != $form.data('original-data');
}
};
@ -229,10 +237,17 @@ Formwork.Forms = {
$target.change();
});
$('input:file').change(function() {
var files = $(this).prop('files');
$('input:file').each(function() {
var $this = $(this);
var labelHTML = $('label[for="' + $(this).attr('id') + '"] span').html();
$this.data('originalLabel', labelHTML);
}).on('change input', function() {
var $this = $(this);
var files = $this.prop('files');
if (files.length) {
$('label[for="' + $(this).attr('id') + '"] span').text(files[0].name);
$('label[for="' + $this.attr('id') + '"] span').text(files[0].name);
} else {
$('label[for="' + $this.attr('id') + '"] span').html($this.data('originalLabel'));
}
});

2
admin/assets/js/app.min.js vendored Normal file → Executable file

File diff suppressed because one or more lines are too long

View File

@ -26,6 +26,14 @@ Formwork.Form = function(form) {
});
function hasChanged() {
var $fileInputs = $form.find(':file');
if ($fileInputs.length > 0) {
for (var i = 0; i < $fileInputs.length; i++) {
if ($fileInputs[i].files.length > 0) {
return true;
}
}
}
return $form.serialize() != $form.data('original-data');
}
};

View File

@ -17,10 +17,17 @@ Formwork.Forms = {
$target.change();
});
$('input:file').change(function() {
var files = $(this).prop('files');
$('input:file').each(function() {
var $this = $(this);
var labelHTML = $('label[for="' + $(this).attr('id') + '"] span').html();
$this.data('originalLabel', labelHTML);
}).on('change input', function() {
var $this = $(this);
var files = $this.prop('files');
if (files.length) {
$('label[for="' + $(this).attr('id') + '"] span').text(files[0].name);
$('label[for="' + $this.attr('id') + '"] span').text(files[0].name);
} else {
$('label[for="' + $this.attr('id') + '"] span').html($this.data('originalLabel'));
}
});