Custom File Upload Button With Image Preview
Mohammad Azad
Verified
Here is how I created a custom file upload button.
var fileInput = document.getElementById('fileInput');
var deleteImage = document.getElementById('deleteImage');
var previewImage = document.getElementById('previewImage');
var fileName = document.getElementById('fileName');
// image preview
function fileUpload() {
//it will show image path
let text = fileInput.value;
fileName.innerHTML = text;
//show the image
previewImage.style.display = 'flex';
imageFile.src=window.URL.createObjectURL(fileInput.files[0]);
}
// delete image
deleteImage.addEventListener('click', function () {
fileInput.value = null;
previewImage.style.display = "none";
});
body{
font-family: 'Roboto', sans-serif;
}
.file-upload {
max-width: 300px;
background-color: #f8fafd;
border: 2px dashed rgba(231,234,243,.7);
padding: 60px;
border-radius: 12px;
margin: 60px auto;
}
.file-upload .input-group{
text-align: center;
}
.file-upload .input-group input[type="file"]{
display: none;
}
.file-upload .input-group .browse-btn{
background-color: #fff;
border: 1px solid rgba(231,234,243,.7);
display: inline-block;
padding: 12px 25px;
border-radius: 8px;
cursor: pointer;
margin-top: 15px;
transition: .5s;
}
.file-upload .input-group .browse-btn:hover{
padding: 12px 35px;
background-color: rgba(231,234,243,.7);
}
.file-upload .preview-image{
position: relative;
background-color: #fff;
border-radius: 10px;
padding: 20px 30px 20px 20px;
box-shadow: 0 0.375rem 0.75rem rgba(140,152,164,.075);
margin-top: 25px;
gap: 12px;
align-items: center;
display: none;
}
.file-upload .preview-image .img{
display: inline-flex;
min-width: 50px;
min-height: 50px;
max-width: 50px;
max-height: 50px;
background: #f8fafd;
border-radius: 6px;
overflow: hidden;
}
.file-upload .preview-image .img img{
width: 100%;
}
.file-upload .preview-image .img-details{
width: calc(100% - 60px);
}
.file-upload .preview-image .file-progress-bar{
background: #00c9a7;
width: 100%;
height: 5px;
border-radius: 20px;
margin-top: 10px;
}
.file-upload .preview-image .img-details h6{
margin: 0px 0px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-upload .preview-image .img-details .btn-delete{
position: absolute;
right: 8px;
top: 8px;
border: unset;
background: unset;
cursor: pointer;
}
<div class="file-upload">
<div class="input-group">
<!-- start input -->
<input type="file" id="fileInput" oninput="fileUpload();">
<!-- end input -->
<!-- start upload icon -->
<div class="file-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="#d4d8e1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0z"/>
</svg>
</div>
<!-- end upload icon -->
<!-- start browse files buttton -->
<label for="fileInput" class="browse-btn">Browse files</label>
<!-- end browse files buttton -->
</div>
<!-- start image preview -->
<div class="preview-image" id="previewImage">
<span class="img"><img id="imageFile" /></span>
<div class="img-details">
<h6 id="fileName">File name</h6>
<div class="file-progress-bar"></div>
<button class="btn-delete" id="deleteImage">x</button>
</div>
</div>
<!-- end image preview -->
</div>
<!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100&display=swap" rel="stylesheet">
How to create a custom file upload button
Browsers don’t want us to customize file inputs but we do. There is simple trick to do this with pure CSS without any library or framework.
Here is how I created a custom file upload button.
Comments
tokop48651 2024-02-28 08:54:02
zxcfghj
menulist 2023-08-30 07:11:46
this is a good web.
Leave a Comment