0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-12-01 11:41:20 +01:00

Perform client side validation on image upload form, so that the selected file is not lost in the submission - fixes #92

This commit is contained in:
Jack P 2016-04-28 15:27:39 +01:00 committed by Matt Westcott
parent 0965daf738
commit 78168ba824
4 changed files with 36 additions and 27 deletions

View File

@ -4,6 +4,8 @@ Changelog
1.6 (xx.xx.xxxx) - IN DEVELOPMENT
~~~~~~~~~~~~~~~~
* Image upload form in image chooser now performs client side validation so that the selected file is not lost in the submission (Jack Paine)
1.5 (xx.xx.xxxx)
~~~~~~~~~~~~~~~~

View File

@ -14,6 +14,8 @@ What's new
Minor features
~~~~~~~~~~~~~~
* Image upload form in image chooser now performs client side validation so that the selected file is not lost in the submission (Jack Paine)
Bug fixes
~~~~~~~~~

View File

@ -221,15 +221,23 @@ $(function() {
var $self = $(this);
var $replacementElem = $('em', $self);
var reEnableAfter = 30;
var dataName = 'disabledtimeout'
var dataName = 'disabledtimeout';
// Check the form this submit button belongs to (if any)
// Perform client-side validation on the form this submit button belongs to (if any)
var form = $self.closest('form').get(0);
if (form && form.checkValidity && (form.checkValidity() == false)) {
// ^ Check form.checkValidity returns something as it may not be browser compatible
if (form && form.checkValidity && (!form.checkValidity())) {
// form exists, browser provides a checkValidity method and checkValidity returns false
return;
}
window.cancelSpinner = function() {
$self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active');
if ($self.data('clicked-text')) {
$replacementElem.text($self.data('original-text'));
}
};
// Disabling a button prevents it submitting the form, so disabling
// must occur on a brief timeout only after this function returns.
@ -240,11 +248,7 @@ $(function() {
$self.data(dataName, setTimeout(function() {
clearTimeout($self.data(dataName));
$self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active')
if ($self.data('clicked-text')) {
$replacementElem.text($self.data('original-text'));
}
cancelSpinner();
}, reEnableAfter * 1000));

View File

@ -59,25 +59,26 @@ function(modal) {
$('form.image-upload', modal.body).submit(function() {
var formdata = new FormData(this);
$.ajax({
url: this.action,
data: formdata,
processData: false,
contentType: false,
type: 'POST',
dataType: 'text',
success: function(response){
modal.loadResponseText(response);
},
error: function(response, textStatus, errorThrown) {
{% trans "Server Error" as error_label %}
{% trans "Report this error to your webmaster with the following information:" as error_message %}
message = '{{ error_message|escapejs }}<br />' + errorThrown + ' - ' + response.status;
$('#upload').append(
'<div class="help-block help-critical">' +
'<strong>{{ error_label|escapejs }}: </strong>' + message + '</div>');
if ($('#id_title', modal.body).val() == '') {
var li = $('#id_title', modal.body).closest('li');
if (!li.hasClass('error')) {
li.addClass('error');
$('#id_title', modal.body).closest('.field-content').append('<p class="error-message"><span>This field is required.</span></p>')
}
});
setTimeout(cancelSpinner, 500);
} else {
$.ajax({
url: this.action,
data: formdata,
processData: false,
contentType: false,
type: 'POST',
dataType: 'text',
success: function(response){
modal.loadResponseText(response);
}
});
}
return false;
});