Submitting data and file at the same time using HTML form

Question

I am trying to get some user input and also have the user upload a file at the same time. Can this be done ? I am posting my HTML file content below. The problem is enctype parameter. When set to multipart/form-data, it does not accept the usual text fields. If removed, it works.

HTML Form :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UI_Automation</title>
</head>
<body>
<form action = "DataBridge" method = "POST" ><!-- enctype = "multipart/form-data" -->
    Select area for automation :
    <select id="section" name = "section_select">
            <option value = "Section1" selected>UPI</option>
            <option value = "Section2">Bank</option>
    </select> 
    Select OS Type :
    <select id="os" name = "os_select">
            <option value = "Android" selected>Android</option>
            <option value = "iOS">iOS</option>
    </select>
<!--    <h2>Upload Test cases:</h2>
    Select an Excel file to upload: <br />
    <input type = "file" id="testcase" name = "file" size = "50" />
    <br /> -->
    <input type = "submit" value = "Submit" />
</form>
</body>
</html>

Yes, uncomment the enctype and file type field. Your server needs to be able to handle the multipart — mplungjan, Feb 16 '21 at 11:58
https://www.google.com/search?q=handle+multipart+form+site:stackoverflow.com — mplungjan, Feb 16 '21 at 11:59

Srinath Kamath · Answer 1 · 2021-02-16T12:24:02.220

It is very easy.

In your HTML

<form id="applyform" method="POST">
    <label>Name</label>
    <input class="form-control" type="text" name="name" placeholder="Enter your name" id="c_name" required>
    Attach your resume:&nbsp;
    <input type="file" name="resume" id="resume" accept="application/pdf,application/vnd.ms-excel">
    
    <button type="submit" class="btn btn-info2 btn-footer">Submit</button>
</form>

Now the JS function mentioned in the form-action

$('#applyform').on('submit', function (e) {
            e.preventDefault();

            var reader = new FileReader(),
                file = $('#resume')[0];

            if (!file.files.length) {
                Toast('no file uploaded');
                return false;
            }

            reader.onload = function () {
                var data = reader.result,
                    base64 = data.replace(/^[^,]*,/, ''),
                    info = {
                        name: $('#c_name').val(),
                        resume: base64
                    };

                    
                $.ajax({
                    url: "submitApplication.php",
                    type: "POST",
                    dataType: "JSON",
                    data: info,
                    success: function (response) {
                        if (response.result == "successful") {
                            Toast("Application submitted successfully!");
                            resetForm();
                            setTimeout(function () {
                                window.location.replace("careers.html");
                            }, 2000);


                        } else {
                            Toast("Error uploading! Try after sometime.")
                        }
                    }
                });
            };

            reader.readAsDataURL(file.files[0]);
        });

Bonus: Limit the file upload size.

var uploadField = document.getElementById("resume");
        uploadField.onchange = function () {
            if (this.files[0].size > 2097152) {
                Toast("File must be less than 2mb!");
                this.value = "";
            };
        };

I had already consulted this answer but I dont want to use JavaScript. Purely personal reasons. Any other way of doing it ? I am using a servlet class to read this data — Rajas Pandharkar, Feb 16 '21 at 12:05
There is no particular reason to use AJAX here. Just figure out how to receive the data on the server — mplungjan, Feb 16 '21 at 12:14
Also if you AJAX the form content, then no need for the enctype — mplungjan, Feb 16 '21 at 12:15

Submitting data and file at the same time using HTML form

1 Answers1