<script type="text/javascript">
window.addEventListener("load", function() {
$("#uploadFiles").change(function(input) {
var maxWidth = 1000;
var maxHeight = 1000;
for (var i = 0; i < input.target.files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
var image = new Image();
image.onload = function () {
if (image.width > image.height) {
image.height *= maxWidth / image.width;
image.width = maxWidth;
} else {
image.width *= maxHeight / image.height;
image.height = maxHeight;
}
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height);
var formData = new FormData();
formData.append("image", canvas.toDataURL());
$.ajax({
url: "/upload/add",
type: "POST",
data: formData,
dataType: "json",
cache: false,
contentType: false,
processData: false,
xhr: function() {
var progress = $.ajaxSettings.xhr();
if(progress.upload){
progress.upload.addEventListener("progress", function (e) {
if(e.lengthComputable){
$("#uploadProgress").attr("aria-valuenow", e.loaded).css("width", e.loaded+"%");
}
}, false);
}
return progress;
},
beforeSend: function() {
$("#uploadStatus").text("Bilder werden hochgeladen...");
$("#uploadProgress").removeClass().addClass("progress-bar progress-bar-warning progress-bar-striped active").parent().removeClass("hidden");
},
success: function(data) {
var storedURL = data.url;
$("#storedPictures").append(
$("<li>").addClass("list-group-item").append(
$("<img>").attr("src", "/images/einsaetze/" + storedURL).css({height: "100px", display: "inline-block"}),
$("<button>").addClass("btn btn-danger pull-right removePicture").attr("data-file", storedURL).append(
$("<i>").addClass("fa fa-trash")
)
)
);
$("#hiddenFields").append(
$("<input>").attr({type: "hidden", name: "bilder[]"}).val(storedURL)
);
$("#uploadStatus").text("Erfolgreich!");
$("#uploadProgress").removeClass().addClass("progress-bar progress-bar-success").attr("aria-valuenow", "100").css("width", "100%");
},
error: function(data) {
$("#uploadStatus").text("Fehler: " + data.status);
}
});
};
image.src = e.target.result;
};
reader.readAsDataURL(input.target.files[i]);
}
});
$(document).on("click", ".removePicture", function(e) {
e.preventDefault();
var element = $(this);
var file = element.attr("data-file");
$.ajax({
url: "/upload/delete/" + file,
type: "GET",
success: function () {
$("input[value=\'"+ file +"\']").remove();
element.parent().remove();
},
error: function () {
alert("Datei konnte auf Server nicht gefunden werden!");
}
})
});
});
</script>
