< SnipShot />

Get started with JN Snippets

Step-by-Step Guide to Implement and Use the Custom File Upload Code

Step 1: Add HTML Structure

Copy and paste the following HTML code into your webpage where you want the file upload feature to appear.

<div class="ap_label_wrap">
    <label class="customInput_ap" for="uploadInput">
        <input type="file" name="" id="uploadInput">
        <div>
            <img src="https://i.imgur.com/QJyy55M.png" alt="">
            <span class="fileName">
                Drag & Drop Files Here
            </span>
            <span>
                OR
            </span>
            <span>
                Browse Files
            </span>
        </div>
    </label>
</div>

Step 2: Add CSS Styling

Include the following CSS either in your CSS file or within a <style> tag in your HTML <head> section.

label.customInput_ap {
    width: 100%;
    padding: 40px 15px;
    background: #fff;
    border: 3px dashed #949C9D;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: block;
}

label.customInput_ap input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0!important;
    opacity: 0;
    cursor: pointer;
}

.customInput_ap div img {
    width: 35px;
}

.customInput_ap div span:nth-child(2) {
    font-size: 18px;
    display: block;
    margin-top: 12px;
}

.customInput_ap div span:nth-child(3) {
    font-size: 14px;
    margin-top: 20px;
    display: block;
}

.customInput_ap div span:nth-child(4) {
    display: block;
    width: 180px;
    margin: 20px auto 0;
    background: #fff;
    border: 1px solid #F5AD02;
    height: 55px;
    line-height: 52px;
    color: #F5AD02;
    font-size: 17px;
    border-radius: 7px;
}

.ap_label_wrap {
    background: #F8F8FA;
    padding: 30px;
    width: 950px;
    margin: 0 auto;
}

Step 3: Add JavaScript Functionality:

Add the following JavaScript code at the end of your HTML document, just before the closing &body> tag, or within a separate JavaScript file.

document.getElementById('uploadInput').addEventListener('change', function() {
    var file = this.files[0];
    var filename = file ? file.name : '';
    var fileNameSpan = document.querySelector('.fileName');
    var allowedExtensions = /(\.png|\.jpg|\.jpeg|\.pdf)$/i;

    if (filename === '') {
        fileNameSpan.textContent = "Drag & Drop Files Here";
    } else if (!allowedExtensions.exec(filename)) {
        fileNameSpan.textContent = "Invalid file type. Only PNG, JPG, JPEG, PDF are allowed.";
        this.value = ''; // Clear the input
    } else {
        fileNameSpan.textContent = filename;
    }
});

By following these steps, you will successfully implement and use the custom file upload feature on your webpage.