sUpload

by mmarcon

HTML

<section id="target">
    
</section>

CSS

body {
    background-color: #e4e4db;
}

#target {
    border: 5px solid #fff;
    width: 70%;
    height: 300px;
    margin: 20px auto;
    background-color: #fffafa;
    box-shadow: 0 0 10px #999;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}

#target.sUpload-hover {
    background-color: #ccc;
}

#target .sUpload-drop {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    display: none;
    background-color: #fff;
    text-align: center;
    line-height: 200px;
    font-family: helvetica, sans-serif;
    font-weight: 100;
    font-size: 48px;
    color: #ccc;
}

JavaScript

(function($) {
    var settings = {
        hoverClass: 'sUpload-hover',
        dropAreaClass: 'sUpload-drop',
        dropMessage: 'Drop file here!',
        dropAreaHeight: 200,
        uploadURL: null
    },
        methods = {
            init: function(options) {
                if (options) {
                    $.extend(settings, options);
                }
                return this.each(function() {
                    var that = $(this),
                        dropTarget = $('<div/>').addClass(settings.dropAreaClass);
                    dropTarget.append('<p>' + settings.dropMessage + '</p>');
                    //Append drop target
                    that.append(dropTarget);
                    //Bind events
                    that.bind('dragover', function() {
                        $(this).addClass(settings.hoverClass);
                        dropTarget.show().animate({
                            height: settings.dropAreaHeight
                        }, 500);
                        return false;
                    }).bind('dragexit', function() {
                        $(this).removeClass(settings.hoverClass);
                        dropTarget.hide().height(0);
                        console.log('END');
                        return false;
                    });
                    dropTarget.bind('dragend', function(){
                        var me = $(this);
                        me.parent().removeClass(settings.hoverClass);
                        me.hide().height(0);
                        return false;
                    });
                    dropTarget.bind('drop', function(e) {
                        var me = $(this), e = e.originalEvent;
                        e.preventDefault();
                        me.parent().removeClass(settings.hoverClass);
                        me.hide().height(0);
                        var file = e.dataTransfer.files[0],
                            reader = new FileReader();
          ...