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.

References and Credits

Comments

la

layek59612 2024-05-22 11:26:28

good

Leave a Reply Cancel reply


to

tokop48651 2024-02-28 08:54:02

zxcfghj

Leave a Reply Cancel reply


me

menulist 2023-08-30 07:11:46

this is a good web.

Leave a Reply Cancel reply


Leave a Comment