CODEWITHSUNDEEP
javascriptjquery
user18923455
user18923455

Reputation:

Why I get empty file input after submit form?

There is a function that triggers the input file and shows previews:

$(document).on("change", "#Multifileupload", function() {
    var MultifileUpload = document.getElementById("Multifileupload");

    if (typeof FileReader != "undefined") {
        var MultidvPreview = document.getElementById("MultidvPreview");

        console.log(MultifileUpload.files);

        var images = Array.prototype.slice.call(
            MultifileUpload.files,
            0,
            upload_product_images_comment_total
        );

        for (
            var i = 0; i < images.length &&
            upload_product_images_comment_loaded <=
            upload_product_images_comment_total; i++
        ) {
            var file = images[i];
            var reader = new FileReader();

            reader.onload = function(e) {
                var img = document.createElement("img");
                var span = document.createElement("span");

                span.classList.add("remove_image");
                span.classList.add("icon-close");

                img.src = e.target.result;
                img.classList.add("Multifileupload_image");

                var position = upload_product_images_comment_loaded + 1;

                if (position > upload_product_images_comment_total - 1) {
                    var li = document.createElement("li");
                    $(".upload-photo-thumb").hide();
                    MultidvPreview.prepend(li);
                    MultidvPreview.children[0].appendChild(img);
                    MultidvPreview.children[0].appendChild(span);
                } else {
                    MultidvPreview.children[position].appendChild(img);
                    MultidvPreview.children[position].appendChild(span);
                }

                upload_product_images_comment_loaded++;
            };
            reader.readAsDataURL(file);
        }

        MultifileUpload.value = '';

    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

The HTML input is:

<input type="file" id="Multifileupload" multiple="" name="file" size="40" accept=".png, .jpg, .jpeg, .gif">

Problem is when I choose some images and submit form I get empty file field in request:

csrf_mds_token=b2c47be75606853053acbbcf48c6280c&review=wreewrewrewrwrwrwrwr&rating=5&product_id=6&file=&sys_lang_id=1

Upvotes: 0

Views: 1339

Answers (1)

Apollo79
Apollo79

Reputation: 704

You can not send files with the GET method, you have to use POST and add enctype="multipart/form-data" to your form tag:

<form method="POST" enctype="multipart/form-data">

Upvotes: 1

Related Questions