diff --git a/docs/en/reference/uploadfield.md b/docs/en/reference/uploadfield.md index aec8b5a53..17fdd39f1 100644 --- a/docs/en/reference/uploadfield.md +++ b/docs/en/reference/uploadfield.md @@ -193,6 +193,19 @@ selected files that you can then upload manually one by one: :::php $uploadField->setAutoUpload(false); +### Change Detection + +The CMS interface will automatically notify the form containing +an UploadField instance of changes, such as a new upload, +or the removal of an existing upload (through a `dirty` event). +The UI can then choose an appropriate response (e.g. highlighting the "save" button). +If the UploadField doesn't save into a relation, there's +technically no saveable change (the upload has already happened), +which is why this feature can be disabled on demand. + + :::php + $uploadField->setConfig('changeDetection', false); + ### Build a simple gallery A gallery most times needs more then simple images. You might want to add a diff --git a/forms/UploadField.php b/forms/UploadField.php index bfc6bf176..227b37f41 100644 --- a/forms/UploadField.php +++ b/forms/UploadField.php @@ -118,6 +118,13 @@ class UploadField extends FileField { * @var boolean|string */ 'canPreviewFolder' => true, + /** + * Indicate a change event to the containing form if an upload + * or file edit/delete was performed. + * + * @var boolean + */ + 'changeDetection' => true, /** * Maximum width of the preview thumbnail * diff --git a/javascript/UploadField.js b/javascript/UploadField.js index d08758547..640ea8a6d 100644 --- a/javascript/UploadField.js +++ b/javascript/UploadField.js @@ -50,7 +50,10 @@ }, _onDone: function (result, textStatus, jqXHR, options) { // Mark form as dirty on completion of successful upload - this.element.closest('form').trigger('dirty'); + if(this.options.changeDetection) { + this.element.closest('form').trigger('dirty'); + } + $.blueimpUI.fileupload.prototype._onDone.call(this, result, textStatus, jqXHR, options); }, _onSend: function (e, data) { @@ -103,7 +106,9 @@ this._adjustMaxNumberOfFiles(0); }, attach: function(data) { - this.element.closest('form').trigger('dirty'); + if(this.options.changeDetection) { + this.element.closest('form').trigger('dirty'); + } // Handles attachment of already uploaded files, similar to add var self = this, @@ -338,12 +343,16 @@ $('div.ss-upload .ss-uploadfield-item-remove:not(.ui-state-disabled), .ss-uploadfield-item-delete:not(.ui-state-disabled)').entwine({ onclick: function(e) { - var fileupload = this.closest('div.ss-upload').data('fileupload'), + var field = this.closest('div.ss-upload'), + config = field.getConfig('changeDetection'), + fileupload = field.data('fileupload'), item = this.closest('.ss-uploadfield-item'), msg = ''; if(this.is('.ss-uploadfield-item-delete')) { if(confirm(ss.i18n._t('UploadField.ConfirmDelete'))) { - this.closest('form').trigger('dirty'); + if(config.changeDetection) { + this.closest('form').trigger('dirty'); + } fileupload._trigger('destroy', e, { context: item, url: this.data('href'), @@ -353,7 +362,9 @@ } } else { // Removed files will be applied to object on save - this.closest('form').trigger('dirty'); + if(config.changeDetection) { + this.closest('form').trigger('dirty'); + } fileupload._trigger('destroy', e, {context: item}); }