Hello there!
Are you in need of a user-friendly file upload system for your website or application? Look no further! Our team has developed a file upload dropzone UI using Bootstrap that makes the entire process easy and seamless for your users.
Our Bootstrap-based dropzone UI is highly customizable and can be easily integrated into any web project. With its sleek design and intuitive user experience, it is sure to enhance your website or application and make file uploading a breeze.
So, why wait? Try our file upload dropzone UI today and improve your user experience!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File upload dropbox UI using bootstrap</title>
<!-- bootstrap 5 stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome 6 stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.dropzone {
border: dashed 4px #ddd !important ;
background-color: #f2f6fc;
border-radius: 15px;
}
.dropzone .dropzone-container {
padding: 2rem 0;
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #8c96a8;
z-index: 20;
}
.dropzone .file-input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
cursor: pointer;
}
.file-icon{
font-size: 60px;
}
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
margin: 8px 0px;
}
.hr-sect:before,
.hr-sect:after {
content: "";
flex-grow: 1;
background: #ddd;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
</style>
</head>
<body>
<div class="container p-5">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 mt-5">
<div class="bg-white p-5 rounded shadow-sm border">
<div class="dropzone d-block">
<label for="files" class="dropzone-container">
<div class="file-icon"><i class="fa-solid fa-file-circle-plus text-primary"></i></div>
<div class="text-center pt-3 px-5">
<p class="w-80 h5 text-dark fw-bold">Drag your documents, photos or videos here to start uploading.</p>
<div class="hr-sect">or</div>
<button class="btn btn-primary mb-2">Browse Files</button>
</div>
</label>
<input id="files" name="files[]" type="file" class="file-input" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
