Basic template to make a button to upload a file.

snippets

Published: 12 Feb 2024 › Updated: 12 Feb 2024 Basic template to make a button to upload a file.

Basic template to make a button to upload a file.

This is pretty common requirement. I often have to ask user to upload a file.

The code below does that.

Once uploaded, the filename is shown.

Still just a template. For record.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  .upload-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .upload-btn {
    display: inline-block;
    padding: 15px 30px; /* Increased padding */
    background-color: #007bff;
    color: #fff;
    font-size: 20px; /* Increased font size */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .upload-btn:hover {
    background-color: #0056b3;
  }
  .upload-btn:focus {
    outline: none;
  }
  #file-upload {
    display: none;
  }
  #file-name {
    margin-left: 10px;
    font-size: 16px; /* Adjusted for visibility */
  }
</style>
</head>
<body>

<div class="upload-container">
  <label for="file-upload" class="upload-btn">Choose File</label>
  <input id="file-upload" type="file"/>
  <span id="file-name">No file chosen</span>
</div>

<script>
  document.getElementById('file-upload').addEventListener('change', function() {
    var fileName = document.getElementById('file-upload').files[0].name;
    document.getElementById('file-name').textContent = fileName;
  });
</script>

</body>
</html>

Leave Basic template to make a button to upload a file. to:

Written by snippets

A place for code snippets and everything else on programming that are useful.

Best Posts From snippets

We have not curated any of snippets's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

Basic template to make a button to upload a file.