Write an article or Share a link

Drag and Drop File Upload with File Name

12 months ago
Drag and Drop File Upload with File Name by html hints

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
# In Markup

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.

        <div class="form">
            <input name="file" id="entry_value" ref="fileInput" type="file"  onchange="getFileName()">
                <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 ">


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.

# In JavaScript

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


We use cookies to ensure better User Experience. Read More