Drag-and-Drop Upload with 6 Lines of jQuery and CSS

As most developers know, styling file upload fields cross-browser can be tricky, if not impossible. However, using jQuery, we can format these fields client-side into a drag-and-drop type upload field. The best part is, there’s no Flash involved! Simply a few lines of CSS and jQuery.

Our first step is to layout our HTML, like so:

<div id="file-upload-wrapper">
    <div id="upload-information">Drop a file or click here to upload.</div>
    <input id="upload-files" type="file" name="upload-files" />

As you can see, our HTML is extremely simple. Just a file input field and an “information” section wrapped in a container.

Part 1: CSS

First, let’s put in our CSS. For our example, we’ll give our wrapper <div> the following style:

div#file-upload-wrapper {
    border: 5px dashed #000000;
    border-radius: 20px;
    width: 300px;
    height: 300px;
    overflow: hidden;

Just a 300px square box with a rounded, dashed black border. The last line, overflow: hidden;, ensures that only what fits inside the border of the element is displayed, nothing more (no overlap outside the dashed border).

Next, apply this CSS to the information box:

div#upload-information {
    position: absolute;
    top: 140px;
    left: 20px;
    font-size: 14pt;

We use absolute positioning so that we can center the <div> in the wrapper. If you change the width and height of the wrapping <div>, you’ll have to change the top and left values in this CSS.

For now, we aren’t going to add any CSS to the input field, but we will afterwards.

Part 2: jQuery

For the second part, we are going to use the JavaScript library called “jQuery”. This library allows for more understandable and cross-browser JavaScript. At the time of this post, the latest jQuery version is 1.8.2, and the recommended link to reference is as follows:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Using jQuery, we’ll set the font-size, and therefore the height, of the file input field to that of the wrapper <div>. Since any overflow out of the containing <div> is hidden, the file upload field will be exactly the size of its container – no larger, no smaller. Also, since dragging/dropping a file onto an input field uploads the file, our system will work as a drag-drop as well.

The code is as follows:

$(document).ready(function() {
    $('input#upload-files').css( 'font-size', $('div#file-upload-wrapper').height() );

Now, we add this CSS to the file upload field so that it can’t be seen:

input#upload-files {
    opacity: 0.0;
    filter: alpha(opacity=0);

Also, the last line changes the cursor from the default arrow to the pointer: . Finally, our form upload field looks like a drag-and-drop form!

You might be thinking that we could use CSS for this purpose, and you’re correct. However, the code above allows for different and dynamic file upload boxes, from 100px to 800px.

The very last step is to submit the form when a file is selected. We can do this using a few more lines of jQuery.

$('input#upload-files').change(function() {

When the value of the file upload field changes (a file is selected; value changes from NULL to the path of the file), we submit the form that contains (has) the input field inside it.

Now, test your form. You should see only the container and the upload information. If not, please post a comment below. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>