Use `enctype=“multipart/form-data”` always or neve

Question

I want to write a generic html template.

I know that in the past you needed to set enctype="multipart/form-data" in the <form> tag, if you wanted to upload files.

I would like to avoid this condition in my generic template.

What should I do? I see these solutions:

• use enctype="multipart/form-data" always.
• use enctype="multipart/form-data" never.

Background: I am lucky, I don't need to support old browsers. I don't need to support IE9 or older versions.

It's working

We are using enctype="multipart/form-data" since several month in all forms (even if there are no files to upload).

It works. This makes our templates simpler. For me it is one simple step to the big goal "conditionlesscode".

Answer 1

When uploading a file in your form, you should specify the encoding as "multipart/form-data".

If you want to keep your form generic, omit this attribute in the form and directly override it using formenctype attribute of input or button elements (only possible in browsers with HTML5 support). In your case, change:

<form action="upload.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

to:

<form action="upload.php" method="post">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload" formenctype="multipart/form-data">
  <input type="submit" value="Upload Image" name="submit">
</form>

Also, you can check this question where it was recommended to avoid always using enctype="multipart/form-data".

Answer 2

I think you should opt use enctype="multipart/form-data" always.. As it's capable to send any data type.but as you no need to manage backward compatibility with the old browser then you can go with HTML5 for not only this other functionality also which you want in your generic template.

You can check HTML 5 attributes available at this link HTML5 Attributes

List of supported browsers with version and example is available here: Example and supported browsers.

I recommend you to add a filter/interceptor which will grab all parameters from the request and put in some data structure or a generic function which help them to extract value from the request which will help backend developer to get the data from the request.

<form>
     <input type=submit value=Submit formenctype="application/x-www-form-urlencoded">
 </form>

You also can write a javascript function which will be called on every form submit and submit the request to the server based or attribute or some specified format which will work even client browsers is older.

I hope it's help.

Answer 3

I cannot comment directly so I have to write it as an answer.

The only difference I am aware of is in the backend if the backend is using PHP (have no clue if this affects Java/Python or any other language used in the backend apart from PHP).

If PHP is fetching the data from the $_POST and $_FILES superglobals then there should be no problem, you can always use it, but you might have troubles if you are using :

$post_content = file_get_contents('php://input').

As far as I can remember the content inside $post_content becomes blank, or something similar (it might work with a single file but not multiple files, can't remember correctly...).

Answer 4

You can do it using javascript

var file = document.getElementById('file').files[0]; 
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = sendData;


function sendData(event) {
    var result = event.target.result;
    var fileName = document.getElementById('file').files[0].name; 
    $.post('/api/sendData', { data: result, name: fileName }, continueSubmission);
}

Answer 5

While Uploading a file you are always required to use enctype=" multipart/form-data" in your form tag. But it is not necessary when you are not uploading any file.
Thank's :)
Happy Coding!