Jquery file upload check box additional form

Bonjour,

Pour mon site j'utilise jquery file upload (https://github.com/blueimp/jQuery-File-Upload/) et j'essaie d'ajouter 2 variables (la valeur false ou true des checkbox) à mon .fileupload.

Le soucis étant que je débute en JS et j'ai du mal.

J'ai vu ça :

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

J'ai donc ajouté un "FormData" à mon fileupload cependant la valeur qui est récupérée et envoyée est la valeur de base lors du chargement de la page (false).

Voici mon code html :

<input id="fileupload" style="display:none;" type="file" name="files[]" multiple>

<input type="checkbox" id="guest" name="guest" value="1">

<input type="checkbox" id="signed" name="signed" value="1">

<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="/js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/js/jquery.fileupload-validate.js"></script>
<script>
$(function() {
    "use strict";
    var e = $("<button/>").addClass("intimity-button-dark").prop("disabled", !0).text("Processing...").on("click", function() {
        var param1 = $('#guest').is("checked");
        console.log(param1);
        var e = $(this),a = e.data();
        e.off("click").text("Abort").on("click", function() {
            e.remove(), a.abort()
        }), a.submit().always(function() {
            e.remove()
        })
    });
    $("#fileupload").fileupload({
        url: "/server/php/",
        dataType: "json",
        autoUpload: !1,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|mp4|avi)$/i,
        maxFileSize: 5e6,
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
        previewMaxWidth: 200,
        previewMaxHeight: 300,
        formData: {guest: $("#guest").prop('checked'), signed : $("#signed").prop('checked')},
        previewCrop: !0
    }).on("fileuploadadd", function(a, n) {
        n.context = $("<div/>").addClass('col-xs-6 col-sm-4').appendTo("#files"), $.each(n.files, function(a, t) {
            var r = $("<p/>").append($("<span/>").text(t.name));
            a || r.append("<br>").append(e.clone(!0).data(n)), r.appendTo(n.context)
        })
    }).on("fileuploadprocessalways", function(e, a) {
        var n = a.index,
            t = a.files[n],
            r = $(a.context.children()[n]);
        t.preview && r.prepend("<br>").prepend(t.preview), t.error && r.append("<br>").append($('<span class="text-danger"/>').text(t.error)), n + 1 === a.files.length && a.context.find("button").text("Upload").prop("disabled", !!a.files.error)
    }).on("fileuploadprogressall", function(e, a) {
        var n = parseInt(a.loaded / a.total * 100, 10);
        $("#progress .progress-bar").css("width", n + "%")
    }).on("fileuploaddone", function(e, a) {
        $.each(a.result.files, function(e, n) {
            if (n.url) {
                var t = $("<a>").attr("target", "_blank").prop("href", n.url);
                $(a.context.children()[e]).wrap(t)
            } else if (n.error) {
                var r = $('<span class="text-danger"/>').text(n.error);
                $(a.context.children()[e]).append("<br>").append(r)
            }
        })
    }).on("fileuploadfail", function(e, a) {
        $.each(a.files, function(e) {
            var n = $('<span class="text-danger"/>').text("File upload failed.");
            $(a.context.children()[e]).append("<br>").append(n)
        })
    }).prop("disabled", !$.support.fileInput).parent().addClass($.support.fileInput ? void 0 : "disabled")
});
</script>

Tout ce passe ici :

formData: {guest: $("#guest").prop('checked'), signed : $("#signed").prop('checked')},

J'ai essayé avec un .is(':checked') mais toujours le même résultat.

J'imagine que la raison est simple, le fileupload (qui permet de configurer le "Jquery file upload" dans sa globalité) et la valeur des checkbox assigné aux deux checkbox sera la valeur de mes checkbox lors du chargement de la page.

Je ne sais pas trop comment faire, à l'aide !

Merci !

Bon, j'ai réussi avec ceci :

    var e = $("<button/>").addClass("intimity-button-dark").prop("disabled", !0).text("Processing...").on("click", function() {
        $('#fileupload').bind('fileuploadsubmit', function (e, data) {
            data.formData = {guest: $('#guest').is(":checked"), signed: $('#signed').is(":checked")};
            console.log($('#guest').is("checked")+" | "+$('#signed').is("checked"))
        });
        var param1 = $('#guest').is("checked");
        console.log(param1);
        var e = $(this),a = e.data();
        e.off("click").text("Abort").on("click", function() {
            e.remove(), a.abort()
        }), a.submit().always(function() {
            e.remove()
        })
    });
    $("#fileupload").fileupload({
        url: "/server/php/",
        dataType: "json",
        autoUpload: !1,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|mp4|avi)$/i,
        maxFileSize: 5e6,
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
        previewMaxWidth: 200,
        previewMaxHeight: 300,
        previewCrop: !0
    })

le .bind('fileuploadsubmit' me permet de reconfigurer le fileupload, lorsque je clic sur un bouton "upload" ca modifie la configuration en y envoyant directement la valeur actuel des checkbox.