https://www.saint-georges.ca/plugins/blanko/forms/assets/js/file-multi.js

1var MultiFileUploader = function (element, options) {
2
3    this.options = options
4    this.$container = $(element)
5    this.$el = $('.content', element)
6    this.$clickable = $('.clickable', element)
7    this.$template = $('.template', element)
8    this.$fileHolder = $('div.img', this.$el)
9
10    var acceptedFiles = this.options.fileTypes
11    if (acceptedFiles == '*') acceptedFiles = null
12    var maxFiles = (this.options.maxFiles == '1') ? 1 : null
13
14    this.dropzone = new Dropzone(this.$container.get(0), {
15        url: window.location,
16        uploadHanlder: 'renderForm::onUploadFile',
17        clickable: this.$clickable.get(0),
18        previewsContainer: this.$el.get(0),
19        previewTemplate: this.$template.html(),
20        acceptedFiles: acceptedFiles,
21        maxFilesize: this.options.maxSize,
22        paramName: 'file_data',
23        maxFiles: maxFiles,
24        dictFileTooBig: this.options.dictFileTooBig,
25        dictDefaultMessage: this.options.dictDefaultMessage,
26        dictFallbackMessage: this.options.dictFallbackMessage,
27        dictFallbackText: this.options.dictFallbackText,
28        dictInvalidFileType: this.options.dictInvalidFileType,
29        dictResponseError: this.options.dictResponseError,
30        dictCancelUpload: this.options.dictCancelUpload,
31        dictCancelUploadConfirmation: this.options.dictCancelUploadConfirmation,
32        dictRemoveFile: this.options.dictRemoveFile,
33        dictRemoveFileConfirmation: null,
34        dictMaxFilesExceeded: this.options.dictMaxFilesExceeded,
35    })
36
37    var self = this
38
39    this.dropzone.on('error', function(file, error){
40        alert(error)
41    })
42
43    this.dropzone.on('sending', function(file, xhr, formData) {
44        formData.append('fieldId', self.options.fieldId)
45        self.addExtraFormData(formData)
46    })
47
48    this.dropzone.on('success', function(file, response){
49        self.updateFile(file, response)
50    })
51
52    this.dropzone.on('removedfile', function(file){
53
54        console.log('MultiFileUploader.removedfile')
55        self.removeFile(file)
56    })
57}
58
59MultiFileUploader.prototype.addExtraFormData = function(formData) {
60    if (this.options.extraData) {
61        $.each(this.options.extraData, function (name, value) {
62            formData.append(name, value)
63        })
64    }
65
66    var $form = this.$el.closest('form')
67    if ($form.length > 0) {
68        $.each($form.serializeArray(), function (index, field) {
69            formData.append(field.name, field.value)
70        })
71    }
72}
73
74MultiFileUploader.prototype.updateFile = function(file, response) {
75
76    var $preview = $(file.previewElement)
77
78    if (response.id) {
79        $preview.data('fileId', response.id)
80
81        // No thumbs is returned.
82        //$img = $('.thumbnail', $preview)
83        //$img.attr('src', response.thumb)
84    }
85}
86
87MultiFileUploader.prototype.removeFile = function($file) {
88
89    var $preview = $($file.previewElement)
90    var fileId = $preview.data('fileId')
91    if (fileId) {
92        var request = this.$container.closest('form').request(this.options.handler, {
93            data: {
94                fileId: fileId,
95                mode: 'delete'
96            },
97            redirect: false
98        })
99    }
100}
101
102MultiFileUploader.DEFAULTS = {
103    handler: 'onUpdateFile',
104    maxSize: null,
105    fileTypes: null
106}
107
108var old = $.fn.multiFileUploader
109
110$.fn.multiFileUploader = function (option) {
111    return this.each(function () {
112        var $this = $(this)
113        var data  = $this.data('oc.multiFileUploader')
114        var options = $.extend({}, MultiFileUploader.DEFAULTS, $this.data(), typeof option == 'object' && option)
115
116        if (!data) $this.data('oc.multiFileUploader', (data = new MultiFileUploader(this, options)))
117        if (typeof option == 'string') data[option].call($this)
118    })
119}
120
121$.fn.multiFileUploader.Constructor = MultiFileUploader
122
123$.fn.multiFileUploader.noConflict = function () {
124    $.fn.multiFileUploader = old
125    return this
126}
127
128function initFileUpload(classeContainerFormBuilder) {
129
130  $(classeContainerFormBuilder + ' [data-control=multi-file-uploader]').multiFileUploader()
131}
132
133// ---------------------------
134// Google Recaptch
135// ---------------------------
136function recaptchaFormsCallback() {
137

138    if ( $('.form-builder-recaptcha').length ) {
139
140        // Disabling submit Button.
141        $('.form-builder-recaptcha').each(function() {
142            formId = $(this).data('form');
143            $('.form-builder-submit').addClass('disabled').prop('disabled', true);
144        });
145
146        // À cause de barba, on peut pas utiliser le callBack de la librairie.
147        // Il se peut donc qu'on load de la page, la librairie soit pas complètement chargé
148        // avant l'éxécution de grecaptcha.render.
149        // On doit attendre son chargement complet.
150        if (grecaptcha && grecaptcha.render) {
151
152            $('.form-builder-recaptcha').each(function(){
153                formId = $(this).data('form');
154                recaptchaId = $(this).attr('id');
155                form_expireCaptcha(formId);
156                grecaptcha.render(recaptchaId, {
157                    'callback': function() {
158                        form_correctCaptcha(formId)
159                    },
160                    'expired-callback': function() {
161                        form_correctCaptcha(formId)
162                    },
163                });
164            })
165        }
166        else {
167            setTimeout(() => {
168                recaptchaFormsCallback()
169            }, 500)
170        }
171    }
172}
173
174function form_correctCaptcha(formId) {
175
176    $('#' + formId + ' .form-builder-submit').removeClass('disabled').prop('disabled', false);
177}
178
179function form_expireCaptcha(formId) {
180
181    $('#' + formId + ' .form-builder-submit').addClass('disabled').prop('disabled', true);
182}