asked on

How to make input tag to be able to accept files by drag and drop using JQuery

I have an input button on the screen when clicked would allow me to select a file from the file system (desktop) and upon submit would upload the selected files. Now I am trying to add the drag and drop functionality as well. Will I be able to drag and drop files onto the input field directly, is that possible? Is there a JQuery plugin/lib that would enable me to convert the input tag to be able to accept files by simple Drag and drop process. If that is not possible I would appreciate if you could let me know of a way to achieve this.

A demo code would be of great help.

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jim Riddles

You can already drag and drop a file onto a file input button...I have been doing that for years.

jdharsha

ASKER

Jim, thanks for your response, when I drag and drop a file onto the input button, the file was being opened in the browser. Although my question sounded like just making the input button be able to accept the drag and drop files onto it...it is more about holding these files on this event/action. Any help would be appreciated.

jdharsha

ASKER

Leonidas, thanks for your response, I have tried something similar earlier but ended up opening the file in the browser instead of calling a call back function.

Leonidas Dosas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <style>
        #clickHere{            
            border: 2px red solid;
            width: 250px;
            height: 35px;
        }
        #file{
            opacity: 0.1;
        }
    
    </style>
</head>
<body>
<div id="drop-zone">
    Drop files here...
    <div id="clickHere">        
        <input type="file" name="file" id="file"  />
    </div>
</div>
   <button id="clear">Clear files</button>
    <script>      
        
       
        $('#drop-zone').on('drop',function(){           
          $('#file').css('opacity',1);
          
        });
        
        
        
         $('#clear').on('click',function(){
          $('#file').val('').css('opacity','0.1');          
        })
    </script>   
</body>
</html>

Open in new window

Jim Riddles

The author never responded, but the link that Leonidas provided is a working solution. Note: depending on browser support, you may need to create a fallback solution, if the user's browser doesn't support drag-and-drop features.