Responsive Image Upload using jQuery Drag and Drop

While importing photo documents the usage of drag and drop technique the drop location need to be responsive primarily based on the viewport. on this educationalwe are going to create a responsive container to add a couple of photographs the use of drag and drop. In a previous academicwe have visible example code for importing multiple photos by deciding on files the use of normal report enters an alternative.

In this example, it has a jQuery feature to upload pix via an AJAX name. This feature is brought about with the aid of managing the drag and drop event of the picture documents. We create a form statistics item programmatically on the drop event of the photographs and load the picture facts into this item. This shape records object could be despatched with the photograph add AJAX request. On a hit photo add, the picture preview might be shown within the responsive drop area.

HTML Code for the Responsive Drop Area

<div id="drop-container">
    <div class="drop-area-text">Drag and Drop Images Here</div>
</div>
<img src="" class="drop-image" />
<script>
	$(document).ready(function() {
		$("#drop-container").on('dragenter', function(e) {
			e.preventDefault();
			$(this).css('border', '#39b311 2px dashed');
			$(this).css('background', '#f1ffef');
		});

		$("#drop-container").on('dragover', function(e) {
			e.preventDefault();
		});

		$("#drop-container").on('drop', function(e) {
			$(this).css('border', '#07c6f1 2px dashed');
			$(this).css('background', '#FFF');
			e.preventDefault();
			var image = e.originalEvent.dataTransfer.files;
			createFormData(image);
		});
	});
</script>

The styles are as follows to create a responsive HTML drop container.

body {
	font-family: arial;
}

#drop-container {
	background: #ffffff;
	min-height: 200px;
	padding: 10px;
	border: #07c6f1 2px dashed;
	max-width: 600px;
}

.drop-area-text {
	text-align: center;
	color: #e0dfdf;
	font-size: 1.5em;
	padding-bottom: 20px;
}

.drop-image {
	display: none;
}

.preview {
	margin: 20px;
    width: 150px;
    height: 150px;
    display: inline-block;
}

@media screen and (max-width: 500px) {
	.preview {
		margin: 15px;
		width: 100px;
		height: 100px;
	}
}

jQuery AJAX Upload

The subsequent jQuery feature is used to create formData with the uploaded photo factsthis will be created by dropping the image record into the drop location. After creating the formData object then an AJAX call can be dispatched to request the PHP photograph upload script. The PHP  code will return the uploaded file target direction to the AJAX name to expose the preview.

<script>
function createFormData(image) {
	var formImage = new FormData();
	formImage.append('dropImage', image[0]);
	uploadFormData(formImage);
}

function uploadFormData(formData) {
	$.ajax({
	url: "upload.php",
	type: "POST",
	data: formData,
	contentType:false,
	cache: false,
	processData: false,
	success: function(response){
        var imagePreview = $(".drop-image").clone();
        imagePreview.attr("src", response); 
        imagePreview.removeClass("drop-image");
		imagePreview.addClass("preview");
        $('#drop-container').append(imagePreview);
	}
});
}
</script>
Please follow and like us:



Leave a Comment

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