Couto/jsbin.buham.css

## jsbin.buham.css
.drop-area {
  width: 150px;
  height: 150px;
  border: 5px dotted #CCC;
  border-radius: 10%;
  transition: all 0.3s linear;
}

.dragging {
  width: 200px;
  height: 200px;
  border: 5px dotted #CCC;
  box-sizing: border-box;
}

.dropped {
  position: relative;
  border: 5px solid #ccc;
}

.dropped:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: attr(data-content);
  color: #ccc;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 40px;
  font-weight: lighter;
  text-align: middle;
  vertical-align: center;
}

.success,
.success:after {
  color: green;
  border-color: green;
}

## jsbin.buham.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="drop-area" data-content="✓"></div>
</body>
</html>

## jsbin.buham.js
$(function () {

  /*jshint browser:true, jquery:true*/

  'use strict';

  var start,
      $body = $(document.body),
      $dropArea = $('.drop-area');

  function appeal(fn/*, args */) {
    if (fn && typeof fn === 'function') {
      fn.apply(null, [].slice.call(arguments, 1));
    }
  }

  function ignore(evt) {
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }

  function highlight(evt) {
    ignore(evt);
    $dropArea.addClass('dragging');
  }

  function diminish(evt) {
    ignore(evt);
    $dropArea.removeClass('dragging');
  }


  function canvas(imgWidth, imgHeight) {
    var cnvs = document.createElement('canvas'),
        bodyWidth = $body.width(),
        canvasWidth = 0,
        canvasHeight = 0;

    document.body.appendChild(cnvs);

    canvasWidth = bodyWidth + 'px';
    canvasHeight = bodyWidth / imgWidth * imgHeight + 'px';

    cnvs.setAttribute('width', canvasWidth);
    cnvs.setAttribute('height', canvasHeight);

    cnvs.parentNode.removeChild(cnvs);

    return cnvs;
  }

  function image(file, cb) {
    var img = document.createElement('img');

    img.onload= function () {
      URL.revokeObjectURL(this.src);
      appeal(cb, img);
    };

    img.src = URL.createObjectURL(file);
  }


  function getFile(evt) {
    var fileList = evt.originalEvent.dataTransfer.files;

    console.log('Size:', [].reduce.call(fileList, function (initial, current) {
      return initial + current.size;
    }, 0), performance.memory);

    ignore(evt);

    $dropArea
      .removeClass('dragging')
      .addClass('dropped');

    start = +new Date();

    [].forEach.call(fileList, function (file) {
      image(file, function (img) {
        var i, c, ctx;

        if (img.width > $body.width()) {

          c = canvas(img.width, img.height);
          i = document.createElement('img');

          ctx = c.getContext('2d');
          ctx.drawImage(img, 0, 0, c.width, c.height);

          i.src = c.toDataURL();
          i.setAttribute('width', '100%');

        } else {
          i = img;
          i.setAttribute('width', '100%');
        }

        $body.append(i);

        $dropArea.addClass('success');
        $dropArea.attr('data-content', (+new Date() - start) + 'ms');
      });
    });

  }

  $dropArea.on({
    'drop': getFile ,
    'dragenter': highlight,
    'dragover': highlight
  });

  $body.on({
    'drop':         ignore,
    // Fix a stupid bug in some browsers.
    'drag':         ignore,
    'dragstart':    ignore,
    'dragend':      ignore,
    'dragleave':    diminish,
    'dragenter':    highlight,
    'dragover':     ignore
  });

});
	.drop-area {
	width: 150px;
	height: 150px;
	border: 5px dotted #CCC;
	border-radius: 10%;
	transition: all 0.3s linear;
	}

	.dragging {
	width: 200px;
	height: 200px;
	border: 5px dotted #CCC;
	box-sizing: border-box;
	}

	.dropped {
	position: relative;
	border: 5px solid #ccc;
	}

	.dropped:after {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	content: attr(data-content);
	color: #ccc;
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 40px;
	font-weight: lighter;
	text-align: middle;
	vertical-align: center;
	}

	.success,
	.success:after {
	color: green;
	border-color: green;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="drop-area" data-content="✓"></div>
	</body>
	</html>
	$(function () {

	/jshint browser:true, jquery:true/

	'use strict';

	var start,
	$body = $(document.body),
	$dropArea = $('.drop-area');

	function appeal(fn/, args /) {
	if (fn && typeof fn === 'function') {
	fn.apply(null, [].slice.call(arguments, 1));
	}
	}

	function ignore(evt) {
	if (evt.preventDefault) {
	evt.preventDefault();
	}
	return false;
	}

	function highlight(evt) {
	ignore(evt);
	$dropArea.addClass('dragging');
	}

	function diminish(evt) {
	ignore(evt);
	$dropArea.removeClass('dragging');
	}


	function canvas(imgWidth, imgHeight) {
	var cnvs = document.createElement('canvas'),
	bodyWidth = $body.width(),
	canvasWidth = 0,
	canvasHeight = 0;

	document.body.appendChild(cnvs);

	canvasWidth = bodyWidth + 'px';
	canvasHeight = bodyWidth / imgWidth * imgHeight + 'px';

	cnvs.setAttribute('width', canvasWidth);
	cnvs.setAttribute('height', canvasHeight);

	cnvs.parentNode.removeChild(cnvs);

	return cnvs;
	}

	function image(file, cb) {
	var img = document.createElement('img');

	img.onload= function () {
	URL.revokeObjectURL(this.src);
	appeal(cb, img);
	};

	img.src = URL.createObjectURL(file);
	}


	function getFile(evt) {
	var fileList = evt.originalEvent.dataTransfer.files;

	console.log('Size:', [].reduce.call(fileList, function (initial, current) {
	return initial + current.size;
	}, 0), performance.memory);

	ignore(evt);

	$dropArea
	.removeClass('dragging')
	.addClass('dropped');

	start = +new Date();

	[].forEach.call(fileList, function (file) {
	image(file, function (img) {
	var i, c, ctx;

	if (img.width > $body.width()) {

	c = canvas(img.width, img.height);
	i = document.createElement('img');

	ctx = c.getContext('2d');
	ctx.drawImage(img, 0, 0, c.width, c.height);

	i.src = c.toDataURL();
	i.setAttribute('width', '100%');

	} else {
	i = img;
	i.setAttribute('width', '100%');
	}

	$body.append(i);

	$dropArea.addClass('success');
	$dropArea.attr('data-content', (+new Date() - start) + 'ms');
	});
	});

	}

	$dropArea.on({
	'drop': getFile ,
	'dragenter': highlight,
	'dragover': highlight
	});

	$body.on({
	'drop': ignore,
	// Fix a stupid bug in some browsers.
	'drag': ignore,
	'dragstart': ignore,
	'dragend': ignore,
	'dragleave': diminish,
	'dragenter': highlight,
	'dragover': ignore
	});

	});