10

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

3
  • 3
    Using it always has no harm.
    – Mr. Alien
    Jul 17, 2017 at 13:26
  • @Mr.Alien using it always has no harm. Nice. Is it still needed for modern web browsers ?
    – guettli
    Jul 17, 2017 at 13:32
  • I assume yes.. haven't worked with form uploads since a long time but mentioning multipart/form-data explicitly states that you are having a file upload field. Think of it like websites having form uploads as optional but even if the file is not provided.. attribute stays there as is. So no harm in defining it on all the forms.
    – Mr. Alien
    Jul 17, 2017 at 13:34

5 Answers 5

14
+100

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

4
  • This is a way to never use enctype="multipart/form-data" in the form, which answers his question. Jul 17, 2017 at 16:07
  • @Mr.Alien you think I know this already? I know a bit, but not much. It was new for me that you can set the formenctype per input element.
    – guettli
    Jul 18, 2017 at 7:31
  • well @guettli it is HTML5 standard
    – Sagar V
    Jul 18, 2017 at 10:34
  • This answer is actually incorrect. The formenctype attribute on input elements can only be used with type="submit" and type="image" otherwise it won't work. Oct 25, 2022 at 20:43
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...).

1
  • AFIK this question is language-agnostic. It is about modern html.
    – guettli
    Jul 18, 2017 at 7:29
1

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);
}
1
  • Thank you for this answer. My high level goal is to do less, not more. But you are right, executing this javascript snippet works around the uncertainty (if somebody is still unsure)
    – guettli
    Jul 24, 2017 at 8:09
1
+200

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.

2
  • You said "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 ..." I use the web framework django. I see no difference (with or without enctyp), except I look at the wire. The framework handles these two ways to interchange data.
    – guettli
    Apr 5, 2018 at 9:10
  • @guettli You are right but I write down this regardless of technology/framework. In few languages, you need to explicitly handle the same while in others/or in case of the framework it's smartly handled by the framework itself.but again in that case framework is doing the same what I am asking you to do explicitly. Apr 5, 2018 at 9:15
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.