Why I get empty file input after submit form?

Question

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

Change all your var to let. See stackoverflow.com/questions/750486/… — Barmar
– Barmar, Commented May 2, 2022 at 16:32
I tried also name="file[]" it ends data as file[]: (binary) — user18923455
– user18923455, Commented May 2, 2022 at 17:22

Apollo79 · Accepted Answer · 2022-05-02 16:23:23Z

1

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">

answered May 2, 2022 at 16:23

Apollo79

7045 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user18923455 Over a year ago

I will check it, because now I use this: <form action="https://modesy.store/add-review-post" method="post">

Apollo79 Over a year ago

Just add enctype="multipart/form-data" to it: <form action="https://modesy.store/add-review-post" method="post" enctype="multipart/form-data">

user18923455 Over a year ago

Should name input be as name="file[]"?

user18923455 Over a year ago

When I submit form with some images I see this in body: file[]: (binary)

Apollo79 Over a year ago

In which language is your backend written in? In PHP there is the $_FILES variable you can use for example

|

Collectives™ on Stack Overflow

Why I get empty file input after submit form?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related