A proto project: https://github.com/droptype/proto

markup.jade

#drop-target

notes.md

blur_upload_progress

script.coffee

$(document).on 'drop, dragover, dragenter', -> false

$drop_target = $('#drop-target')

simulateProgress = ->
    progress = 0
    $drop_target.addClass('uploading')
    update = ->
        setTimeout ->
            progress += 10
            console.log progress, "#{ progress / 100 }"
            $drop_target.find('img').css
                # 'opacity': "#{ progress / 100 }"
                '-webkit-transition-duration': ''
                '-webkit-filter': "blur(#{ 100 - progress }px)"
            if progress < 100
                update()
            else
                $drop_target.removeClass('uploading')
        , 500 * Math.random()
    update()


$drop_target.on 'drop', (e) ->
    e.preventDefault()
    files = e.originalEvent.dataTransfer.files
    console.log files
    reader = new FileReader()
    obj_url = window.URL.createObjectURL(files[0])
    $drop_target.html """
        <img src="#{ obj_url }">
    """
    $drop_target.find('img').css
        '-webkit-filter': 'blur(100px)'
        '-webkit-transition-duration': '0'
    simulateProgress()
    return
    

settings.json

{
    "name": "blur_upload_progress",
    "proto_version": "1.3.1",
    "script_libraries": [
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js",
        "https://raw.github.com/Marak/Faker.js/master/Faker.js"
    ],
    "style_libraries": [
        "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"
    ],
    "extra_head_markup": "<meta name='viewport' content='width=device-width'>"
}

style.styl

#drop-target
    min-width: 300px
    min-height: 200px
    border: 3px solid red
    overflow: hidden
    &.uploading
        img
            opacity: 0.6

img
    width: 100%
    -webkit-transition-property: "-webkit-filter, opacity"
    -webkit-transition-duration: 0.5s
    opacity: 1