Drag and Drop File Upload with File Name

Drag and Drop File Upload with File Name

I was getting questions about how to upload file by drag & drop as well as file name should also appear at the bottom. So here is the article on Drag and Drop file upload with File Name. In this, I tried to keep it very simple by using HTML, CSS, JAVASCRIPT. Mainly users want to keep javascript avoid & want to do it by using only HTML & CSS but in order to display File Name, we need to use javascript but don't worry its just 3-4 lines max.

For Demo & Source Code Scroll down

Lets start by creating three files:

• 1. Index.html - for our
• 2. style.css - for our url manupulation
• 3. script.js - for our url manupulation

This markup doesn't have anything specifically to do with drag and drop. It's just a normal, functional <form>, with some extra HTML elements.

Lets! go through the code.

    <form>
        <div class="form">
            <input name="file" id="entry_value" ref="fileInput" type="file"  onchange="getFileName()">
            <div>     
                <img src="upload.png" alt="upload" width="7%" class="mx-2">
                    Upload your files here or 
                <button class="btn bg-color-dblue btn-primary px-4 py-3">Browse</button></div>
            <span id="fileName" class="text-primary ">

            </span>
        </div>
    </form>  
    

In above code, if get noticed i used javascript function onchange="getFileName()", which call function() to display name of that file which we going to upload.

We going to manupulate it as we get file name from id entry_value which we split it & store in variable x. Then we intialize variable x in id fileName, thats how its display name of file which we uploaded.

    function getFileName()
    {
        var x = document.getElementById('entry_value')
        document.getElementById('fileName').innerHTML = x.value.split('\\').pop()
    }

For full code with css please first view demo & then download file for better understanding