File Upload Form
A file upload HTML form is a way of uploading files from a user's computer to the server that they're connected. This form is free to download and use also availabe in HTML and Tailwind CSS.
Preview

<div class="main-wrapper"> <div class="form-wrapper"> <form action="https://formbold.com/s/YOUR_KEY" method="POST"> <div class="mb-5"> <label for="email" class="form-label"> Send files to this email: </label> <input type="email" name="email" id="email" placeholder="Enter your email" class="form-input" /> </div>
<div class="mb-6 pt-4"> <label class="form-label form-label-2"> Upload File </label>
<div class="mb-5 file-input"> <input type="file" name="file" id="file" /> <label for="file"> <div> <span class="drop-file"> Drop files here </span> <span class="or"> Or </span> <span class="browse"> Browse </span> </div> </label> </div>
<div class="file-list mb-5"> <div class="file-item"> <span class="file-name"> banner-design.png </span> <button> <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0.279337 0.279338C0.651787 -0.0931121 1.25565 -0.0931121 1.6281 0.279338L9.72066 8.3719C10.0931 8.74435 10.0931 9.34821 9.72066 9.72066C9.34821 10.0931 8.74435 10.0931 8.3719 9.72066L0.279337 1.6281C-0.0931125 1.25565 -0.0931125 0.651788 0.279337 0.279338Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.279337 9.72066C-0.0931125 9.34821 -0.0931125 8.74435 0.279337 8.3719L8.3719 0.279338C8.74435 -0.0931127 9.34821 -0.0931123 9.72066 0.279338C10.0931 0.651787 10.0931 1.25565 9.72066 1.6281L1.6281 9.72066C1.25565 10.0931 0.651787 10.0931 0.279337 9.72066Z" fill="currentColor" /> </svg> </button> </div> </div>
<div class="file-list mb-5"> <div class="file-item"> <span class="file-name"> banner-design.png </span> <button> <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0.279337 0.279338C0.651787 -0.0931121 1.25565 -0.0931121 1.6281 0.279338L9.72066 8.3719C10.0931 8.74435 10.0931 9.34821 9.72066 9.72066C9.34821 10.0931 8.74435 10.0931 8.3719 9.72066L0.279337 1.6281C-0.0931125 1.25565 -0.0931125 0.651788 0.279337 0.279338Z" fill="currentColor" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.279337 9.72066C-0.0931125 9.34821 -0.0931125 8.74435 0.279337 8.3719L8.3719 0.279338C8.74435 -0.0931127 9.34821 -0.0931123 9.72066 0.279338C10.0931 0.651787 10.0931 1.25565 9.72066 1.6281L1.6281 9.72066C1.25565 10.0931 0.651787 10.0931 0.279337 9.72066Z" fill="currentColor" /> </svg> </button> </div> <div class="progress-bar"> <div class="progress"></div> </div> </div> </div>
<div> <button class="btn w-full">Send File</button> </div> </form> </div></div><style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Inter", sans-serif; } .mb-5 { margin-bottom: 20px; } .pt-3 { padding-top: 12px; } .main-wrapper { display: flex; align-items: center; justify-content: center; padding: 48px; }
.form-wrapper { margin: 0 auto; max-width: 550px; width: 100%; background: white; } .form-label { display: block; font-weight: 500; font-size: 16px; color: #07074d; margin-bottom: 12px; } .form-label-2 { font-weight: 600; font-size: 20px; margin-bottom: 20px; }
.form-input { width: 100%; padding: 12px 24px; border-radius: 6px; border: 1px solid #e0e0e0; background: white; font-weight: 500; font-size: 16px; color: #6b7280; outline: none; resize: none; } .form-input:focus { border-color: #6a64f1; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); }
.btn { text-align: center; font-size: 16px; border-radius: 6px; padding: 14px 32px; border: none; font-weight: 600; background-color: #6a64f1; color: white; cursor: pointer; } .btn:hover { box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); }
.-mx-3 { margin-left: -12px; margin-right: -12px; } .px-3 { padding-left: 12px; padding-right: 12px; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; }
.file-input input { opacity: 0; position: absolute; width: 100%; height: 100%; }
.file-input label { position: relative; border: 1px dashed #e0e0e0; border-radius: 6px; min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 48px; text-align: center; } .drop-file { display: block; font-weight: 600; color: #07074d; font-size: 20px; margin-bottom: 8px; }
.or { font-weight: 500; font-size: 16px; color: #6b7280; display: block; margin-bottom: 8px; } .browse { font-weight: 500; font-size: 16px; color: #07074d; display: inline-block; padding: 8px 28px; border: 1px solid #e0e0e0; border-radius: 4px; }
.file-list { border-radius: 6px; background: #f5f7fb; padding: 16px 32px; }
.file-item { display: flex; align-items: center; justify-content: space-between; }
.file-item button { color: #07074d; border: none; background: transparent; cursor: pointer; }
.file-name { font-weight: 500; font-size: 16px; color: #07074d; padding-right: 12px; } .progress-bar { margin-top: 20px; position: relative; width: 100%; height: 6px; border-radius: 8px; background: #e2e5ef; }
.progress { position: absolute; width: 75%; height: 100%; left: 0; top: 0; background: #6a64f1; border-radius: 8px; }
@media (min-width: 540px) { .sm\:w-half { width: 50%; } }</style>