amirkhiz/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdrop Image Upload</title>

    <link rel="stylesheet" href="assets/main.css">
    <script src="https://code.jquery.com/jquery-2.2.4.js" crossorigin="anonymous"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="></script>
    <script src="assets/main.js"></script>
</head>
<body>
<form class="box" method="post" action="upload_image.php" enctype="multipart/form-data">
    <div class="box__input">
        <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected"
               multiple/>
        <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
        <button class="box__button" type="submit">Upload</button>
    </div>
    <div class="box__uploading">Uploading&hellip;</div>
    <div class="box__success">Done!</div>
    <div class="box__error">Error! <span></span>.</div>
</form>
</body>
</html>

## main.css
.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}
.box {
  font-size: 1.25rem;
  background-color: #c8dadf;
  position: relative;
  padding: 100px 20px;
  text-align: center;
}
.box.has-advanced-upload {
  outline: 2px dashed #92b0b3;
  outline-offset: -10px;
  -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
}
.box.has-advanced-upload .box__dragndrop {
  display: inline;
}
.box.has-advanced-upload.is-dragover {
  background-color: grey;
}
.box .is-uploading .box__input {
  visibility: none;
}
.box .is-uploading .box__uploading {
  display: block;
}
.box .box__button {
  display: none;
}
.box .no-js .box__button {
  display: block;
}

## main.js
/**
 * Created by siavash on 08.04.2017.
 */

var isAdvancedUpload = function () {
    var div = document.createElement('div');
    return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();

$(function () {
    var $form = $('.box');
    var $input = $form.find('input[type="file"]'),
        $label = $form.find('label'),
        showFiles = function (files) {
            $label.text(files.length > 1 ? ($input.attr('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name);
        };

    $form.on('submit', function (e) {
        if ($form.hasClass('is-uploading')) return false;

        $form.addClass('is-uploading').removeClass('is-error');

        if (isAdvancedUpload) {
            e.preventDefault();

            var ajaxData = new FormData($form.get(0));

            if (droppedFiles) {
                $.each(droppedFiles, function (i, file) {
                    ajaxData.append($input.attr('name'), file);
                });
            }

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: ajaxData,
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                complete: function () {
                    $form.removeClass('is-uploading');
                },
                success: function (data) {
                    $form.addClass(data.success == true ? 'is-success' : 'is-error');
                    if (!data.success) $errorMsg.text(data.error);
                },
                error: function () {
                    // Log the error, show an alert, whatever works for you
                }
            });
        } else {
            var iframeName = 'uploadiframe' + new Date().getTime();
            $iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>');

            $('body').append($iframe);
            $form.attr('target', iframeName);

            $iframe.on('load', function () {
                var data = JSON.parse($iframe.contents().find('body').text());
                $form
                    .removeClass('is-uploading')
                    .addClass(data.success == true ? 'is-success' : 'is-error')
                    .removeAttr('target');
                if (!data.success) $errorMsg.text(data.error);
                $form.removeAttr('target');
                $iframe.remove();
            });
        }
    });

    if (isAdvancedUpload) {
        $form.addClass('has-advanced-upload');

        var droppedFiles = false;

        $form.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
            })
            .on('dragover dragenter', function () {
                $form.addClass('is-dragover');
            })
            .on('dragleave dragend drop', function () {
                $form.removeClass('is-dragover');
            })
            .on('drop', function (e) {
                droppedFiles = e.originalEvent.dataTransfer.files;
                $form.trigger('submit');
                showFiles(droppedFiles);
            });
    }

    $input.on('change', function (e) { // when drag & drop is NOT supported
        $form.trigger('submit');
        showFiles(e.target.files);
    });
});

## main.less
.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}

.box {
  font-size: 1.25rem;
  background-color: #c8dadf;
  position: relative;
  padding: 100px 20px;
  text-align: center;

  &.has-advanced-upload {
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;

    .box__dragndrop {
      display: inline;
    }

    &.is-dragover {
      background-color: grey;
    }
  }

  .is-uploading {
    .box__input {
      visibility: none;
    }

    .box__uploading {
      display: block;
    }
  }

  .box__button {
    display: none;
  }

  .no-js .box__button {
    display: block;
  }
}

## upload_image.php
<?php
/**
 * Created by PhpStorm.
 * User: Siavash Habil <amirkhiz@gmail.com>
 * Date: 08.04.2017
 * Time: 18:36
 */

$is_success = FALSE;
$error_msg  = TRUE;

if (!empty($_FILES['files'])) {
    foreach ($_FILES['files']['name'] as $key => $file) {
        if (move_uploaded_file($_FILES['files']['tmp_name'][$key], 'uploads/' . time() . '.' . pathinfo($file, PATHINFO_EXTENSION))) {
            $is_success = TRUE;
            $error_msg  = FALSE;
        }
    }
}

die(json_encode(['success' => $is_success, 'error' => $error_msg]));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Dropdrop Image Upload</title>

	<link rel="stylesheet" href="assets/main.css">
	<script src="https://code.jquery.com/jquery-2.2.4.js" crossorigin="anonymous"
	integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="></script>
	<script src="assets/main.js"></script>
	</head>
	<body>
	<form class="box" method="post" action="upload_image.php" enctype="multipart/form-data">
	<div class="box__input">
	<input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected"
	multiple/>
	<label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
	<button class="box__button" type="submit">Upload</button>
	</div>
	<div class="box__uploading">Uploading…</div>
	<div class="box__success">Done!</div>
	<div class="box__error">Error! <span></span>.</div>
	</form>
	</body>
	</html>
	.box__dragndrop,
	.box__uploading,
	.box__success,
	.box__error {
	display: none;
	}
	.box {
	font-size: 1.25rem;
	background-color: #c8dadf;
	position: relative;
	padding: 100px 20px;
	text-align: center;
	}
	.box.has-advanced-upload {
	outline: 2px dashed #92b0b3;
	outline-offset: -10px;
	-webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
	transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
	}
	.box.has-advanced-upload .box__dragndrop {
	display: inline;
	}
	.box.has-advanced-upload.is-dragover {
	background-color: grey;
	}
	.box .is-uploading .box__input {
	visibility: none;
	}
	.box .is-uploading .box__uploading {
	display: block;
	}
	.box .box__button {
	display: none;
	}
	.box .no-js .box__button {
	display: block;
	}
	/**
	* Created by siavash on 08.04.2017.
	*/

	var isAdvancedUpload = function () {
	var div = document.createElement('div');
	return (('draggable' in div) \|\| ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
	}();

	$(function () {
	var $form = $('.box');
	var $input = $form.find('input[type="file"]'),
	$label = $form.find('label'),
	showFiles = function (files) {
	$label.text(files.length > 1 ? ($input.attr('data-multiple-caption') \|\| '').replace('{count}', files.length) : files[0].name);
	};

	$form.on('submit', function (e) {
	if ($form.hasClass('is-uploading')) return false;

	$form.addClass('is-uploading').removeClass('is-error');

	if (isAdvancedUpload) {
	e.preventDefault();

	var ajaxData = new FormData($form.get(0));

	if (droppedFiles) {
	$.each(droppedFiles, function (i, file) {
	ajaxData.append($input.attr('name'), file);
	});
	}

	$.ajax({
	url: $form.attr('action'),
	type: $form.attr('method'),
	data: ajaxData,
	dataType: 'json',
	cache: false,
	contentType: false,
	processData: false,
	complete: function () {
	$form.removeClass('is-uploading');
	},
	success: function (data) {
	$form.addClass(data.success == true ? 'is-success' : 'is-error');
	if (!data.success) $errorMsg.text(data.error);
	},
	error: function () {
	// Log the error, show an alert, whatever works for you
	}
	});
	} else {
	var iframeName = 'uploadiframe' + new Date().getTime();
	$iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>');

	$('body').append($iframe);
	$form.attr('target', iframeName);

	$iframe.on('load', function () {
	var data = JSON.parse($iframe.contents().find('body').text());
	$form
	.removeClass('is-uploading')
	.addClass(data.success == true ? 'is-success' : 'is-error')
	.removeAttr('target');
	if (!data.success) $errorMsg.text(data.error);
	$form.removeAttr('target');
	$iframe.remove();
	});
	}
	});

	if (isAdvancedUpload) {
	$form.addClass('has-advanced-upload');

	var droppedFiles = false;

	$form.on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
	e.preventDefault();
	e.stopPropagation();
	})
	.on('dragover dragenter', function () {
	$form.addClass('is-dragover');
	})
	.on('dragleave dragend drop', function () {
	$form.removeClass('is-dragover');
	})
	.on('drop', function (e) {
	droppedFiles = e.originalEvent.dataTransfer.files;
	$form.trigger('submit');
	showFiles(droppedFiles);
	});
	}

	$input.on('change', function (e) { // when drag & drop is NOT supported
	$form.trigger('submit');
	showFiles(e.target.files);
	});
	});
	<?php
	/**
	* Created by PhpStorm.
	* User: Siavash Habil <amirkhiz@gmail.com>
	* Date: 08.04.2017
	* Time: 18:36
	*/

	$is_success = FALSE;
	$error_msg = TRUE;

	if (!empty($_FILES['files'])) {
	foreach ($_FILES['files']['name'] as $key => $file) {
	if (move_uploaded_file($_FILES['files']['tmp_name'][$key], 'uploads/' . time() . '.' . pathinfo($file, PATHINFO_EXTENSION))) {
	$is_success = TRUE;
	$error_msg = FALSE;
	}
	}
	}

	die(json_encode(['success' => $is_success, 'error' => $error_msg]));