File Upload in HTML Forms - input type='file' with Multiple and Accept Attributes

File Upload in HTML Forms: Let Users Send Their Files

Whether it’s uploading a resume, a photo of a cherry, or a PDF recipe, HTML's <input type="file"> makes it possible. This control allows users to select one or more files from their device and send them through a form.

Basic Syntax for File Upload

The simplest file input accepts a single file of any type:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Upload a file:</label><br>
  <input type="file" id="file" name="fruitFile"><br><br>
  <input type="submit" value="Upload">
</form>

Upload a file: [Choose File] No file chosen  
[Upload]

Important: Always use enctype="multipart/form-data" in the form tag when uploading files. This tells the browser to send binary data correctly.

Accepting Specific File Types

To limit what users can upload, use the accept attribute with file extensions or MIME types.

Images only:

<input type="file" name="fruitImage" accept="image/*">

PDFs only:

<input type="file" name="doc" accept=".pdf">

CSV or Text files:

<input type="file" name="dataFile" accept=".csv, .txt">

Choose File: Only matching types are selectable

This prevents accidental uploads of unsupported file types and streamlines user choices.

Uploading Multiple Files

To allow users to select more than one file, add the multiple attribute:

<input type="file" name="fruitPhotos" accept="image/*" multiple>

Choose File: (you can select multiple images)

All selected files will be submitted under the same input name.

Real-World Example: Upload Fruit Photos

<form action="/submit-fruit-gallery" method="post" enctype="multipart/form-data">

  <label for="applePic">Upload an apple photo:</label><br>
  <input type="file" id="applePic" name="applePic" accept="image/*"><br><br>

  <label for="bananaFiles">Upload multiple banana images:</label><br>
  <input type="file" id="bananaFiles" name="bananaPhotos" accept="image/*" multiple><br><br>

  <label for="cherryPDF">Upload cherry info (PDF only):</label><br>
  <input type="file" id="cherryPDF" name="cherryDoc" accept=".pdf"><br><br>

  <input type="submit" value="Submit Gallery">

</form>

[Choose File] Apple photo  
[Choose Files] Banana images  
[Choose File] Cherry PDF  
[Submit Gallery]

Best Practices

• Always use enctype="multipart/form-data" on the form
• Use accept to limit file types and prevent user confusion
• Apply multiple only when needed to avoid clutter
• Label clearly so users know what file they’re uploading

Browser Support

All major modern browsers support file input fields. If unsupported, users may see a basic text field — but this is rare today.

Summary

HTML file inputs make it easy for users to send images, documents, and more. You’ve now learned how to:

• Use <input type="file">
• Restrict file types using accept
• Enable multiple file uploads
• Structure forms for file transmission

What’s Next?

Next, let’s discover how Datalist inputs offer flexible suggestions without limiting user freedom — the perfect blend of control and creativity.