
<div class="form-group">
	<div class="custom-file">
	
	<input type="file" class="custom-file-input" name="files" id="files" multiple onchange="$('#sampleform14_aspForm').submit();return false;">
	<label class="custom-file-label" id="customFileLabel" for="customFile">Choose or drop files here</label>

	</div>
</div>

<div style="display:none" id="alert" class="alert alert-primary" role="alert">
	
	
	<div id="loading" class="spinner-border" style="float:right;width: 1.5rem; height: 1.5rem;" role="status">
	  <span class="sr-only">Loading...</span>		  
	</div>			
	<div id="uploadFBS"></div>
	<div id="uploadFB" style="font-size:0.8em"></div>		

</div>

<div class="alert alert-warning" role="alert">
 Images are resized to 1200px before uploading (optional, see resizeImagesToPx)
</div>

<div class="alert alert-danger" role="alert">
  Security alert: this script uploads the selected file(s) in the /uploads folder. For security reasons, they are deleted right after. Check /default/asp/uploadfile.resx.
</div>

<script>
//image files can be automatically resized if wanted
var resizeImages=true
var resizeImagesToPx=1200 // max size horizontal or vertical

var i=0
var j=0
var files

$("#sampleform14_aspForm").submit(function(e){

	e.preventDefault()
	
	$("#uploadFBS").html('<strong>Upload started</strong><br /><br />')
	$("#uploadFB").html('')	
	$("#loading").css("display","block");
	$("#alert").css("display","block");
	
	$("#sampleform14_aspForm").find("input[type=file]").each(function(index, field){
		files=field.files
		
		if (files.length>0) {jQueryUpload()}
		
	})
	
});

function jQueryUpload() {	
	
	var file = files[i]
	
	//alert(file)
	
	if (typeof(file) != "undefined") {
		
		if (resizeImages && file.type.match(/image.*/)) {
			resizeImage(file)		
		}
		else
		{
			var fd = new FormData()			
			fd.append('file', file, file.name)	
			ajax(fd,file)		
		}
	}
}

function ajax(fd,file) {

	$.ajax({		
		type: "post",
		method: "post",
		url: aspLiteAjaxHandler + "?asplEvent=uploadfilejquery",
		dataType: "text",
		contentType: false,
		data: fd,
		processData: false, 
		success: function (data) {			
					$("#uploadFB").append('<strong>' + file.name + '</strong> was uploaded<hr />')	
					i++					
					if(i<files.length) {jQueryUpload()}
					else {
					//done	
					finish()
					}
				},
		error: function (data) {
			$("#uploadFB").append('<span style="color:Red"><strong>' + file.name + '</strong> (' + Math.round(file.size/1024/1024) + ' MB) was NOT uploaded</span><hr />')	
			i++
			j++
			console.log(data)
			if(i<files.length) {jQueryUpload()}
			else {
				//done
				finish()
				}			
			}
		})		

}

function finish() {	
	$("#loading").css("display","none")	
	$("#uploadFBS").html('<strong>Upload finished</strong><br /><br>')	
	if(!j==0) {$("#uploadFB").prepend('<strong>' + j + ' files</strong> have NOT been uploaded (probably too big)<hr />')}	
	if(!(i-j)==0) {$("#uploadFB").prepend('<strong>' + (i-j) + ' files</strong> have been uploaded<hr />')}	
	i=0;j=0;
}

// solution found on https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload
// by https://stackoverflow.com/users/689298/ferics2
function resizeImage(fileObj) {

	// Load the image
	var reader = new FileReader();
	reader.onload = function (readerEvent) {
		var image = new Image();
		image.onload = function (imageEvent) {

			// Resize the image
			var canvas = document.createElement('canvas'),
				max_size = resizeImagesToPx,
				width = image.width,
				height = image.height;
			if (width > height) {
				if (width > max_size) {
					height *= max_size / width;
					width = max_size;
				}
			} else {
				if (height > max_size) {
					width *= max_size / height;
					height = max_size;
				}
			}
			canvas.width = width;
			canvas.height = height;
			canvas.getContext('2d').drawImage(image, 0, 0, width, height);
			var dataUrl = canvas.toDataURL('image/jpeg');                
			
			var fd = new FormData()		
			fd.append('file', dataURLToBlob(dataUrl), fileObj.name)	
			ajax(fd,fileObj)
			
		}
		image.src = readerEvent.target.result;
	}		
	
	reader.readAsDataURL(fileObj);
    
}

/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], {type: contentType});
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {type: contentType});
}
/* End Utility function to convert a canvas to a BLOB      */


</script>