Add pre remove JS callback

Author: Neil Peyssard

Form/Type/FileType.php

@@ -75,6 +75,7 @@ public function configureOptions(OptionsResolver $resolver)
             'remove_uri_path' => $this->urlGenerator->generate('sherlockode_afb_remove'),
             'remove_tmp_uri_path' => $url = $this->urlGenerator->generate('sherlockode_afb_remove_tmp'),
             'js_callback' => null,
+            'js_pre_remove_callback' => null,
             'js_error_callback' => null,
             'mapped' => function (Options $options) {
                 return $options['upload_mode'] != 'immediate';
@@ -103,6 +104,7 @@ public function buildView(FormView $view, FormInterface $form, array $options)
         $view->vars['multiple'] = $isMultiple;
         $view->vars['async'] = $options['async'];
         $view->vars['jsCallback'] = $options['js_callback'];
+        $view->vars['jsPreRemoveCallback'] = $options['js_pre_remove_callback'];
         $view->vars['jsErrorCallback'] = $options['js_error_callback'];
         $view->vars['subject'] = $subject;
         $view->vars['mapping'] = $options['mapping'];

Resources/doc/options_overview.md

@@ -12,6 +12,7 @@ Options overview
 ## Optional options
 
 * `js_callback`: A string representing a JavaScript function name for a callback after an upload. `null` by default.
+* `js_pre_remove_callback`: A string representing a JavaScript function name for a callback before removing a file. `null` by default.
 * `js_error_callback`: A string representing a JavaScript function name for a callback after an error on upload. `null` by default.
 * `image_preview`: A boolean which determine the default callback after an upload. Set it to true if you want a preview for your pictures. `false` by default.
 * `remove_uri_path`: The url for removing files. It can be useful if you want to override the default controller.

Resources/public/js/ajax-uploader.js

@@ -11,6 +11,7 @@ if (typeof module === "object" && module.exports) {
         let settings = $.extend({
             onXhrFail: baseOnXhrFail,
             uploadCallback: null,
+            onPreRemove: null,
         }, options);
 
         function baseOnXhrFail(jqXhr){
@@ -28,6 +29,7 @@ if (typeof module === "object" && module.exports) {
         return this.each(function(){
             var container = $(this),
                 uploadCallback = container.data('callback') ? container.data('callback') : settings.uploadCallback,
+                preRemoveCallback = container.data('preRemoveCallback'),
                 ajaxErrorCallback = container.data('errorcallback'),
                 isImgPreview = container.data('imgpreview'),
                 uploadMode = container.data('uploadMode'),
@@ -43,6 +45,7 @@ if (typeof module === "object" && module.exports) {
                 isAsync = container.data('async');
 
             let onXhrFail = ajaxErrorCallback && "function" === typeof(window[ajaxErrorCallback]) ? window[ajaxErrorCallback] : settings.onXhrFail;
+            let onPreRemove = preRemoveCallback && "function" === typeof(window[preRemoveCallback]) ? window[preRemoveCallback] : settings.onPreRemove;
 
             function onDropFile(event) {
                 var files = event.dataTransfer.files;
@@ -193,6 +196,16 @@ if (typeof module === "object" && module.exports) {
                 }
             }
 
+            function triggerRemove(element, next) {
+                if (onPreRemove && "function" === typeof(onPreRemove)) {
+                    onPreRemove.call(null, element, function() {
+                        return next();
+                    });
+                } else {
+                    return next();
+                }
+            }
+
             function removeFile(id, isTmp){
                 var formData = new FormData();
                 var url = removeUrl;
@@ -231,7 +244,10 @@ if (typeof module === "object" && module.exports) {
             });
             container.find('.afb_upload_container').on('click', '.afb_remove_file', function(event) {
                 event.preventDefault();
-                deletePreview($(this), true);
+                let element = $(this);
+                triggerRemove(element, function() {
+                    return deletePreview(element, true);
+                });
             });
         });
     };

Resources/views/Form/upload_file.html.twig

@@ -33,6 +33,9 @@
     {% if jsCallback %}
         data-callback="{{ jsCallback|e }}"
     {% endif %}
+    {% if jsPreRemoveCallback %}
+        data-pre-remove-callback="{{ jsPreRemoveCallback|e }}"
+    {% endif %}
     {% if jsErrorCallback %}
         data-errorcallback="{{ jsErrorCallback|e }}"
     {% endif %}