Skip to content

Instantly share code, notes, and snippets.

@clzola
Created July 25, 2016 08:50
Show Gist options
  • Save clzola/27198cc713fe25ca306c635c9d78f909 to your computer and use it in GitHub Desktop.
Save clzola/27198cc713fe25ca306c635c9d78f909 to your computer and use it in GitHub Desktop.
Images Uploader
<!doctype html>
<html>
<head>
<title>Upload Photos</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<style type="text/css">
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<main class="container-fluid" style="margin-top: 12px;">
<div class="row">
<div class="col-xs-12">
<div class="fileUpload btn btn-success">
<span>Upload</span>
<input type="file" class="upload" id="photoFileSelector" multiple="">
</div>
<button class="btn btn-primary" id="startButton">Start</button>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="margin-top: 12px;">
<table id="uploadTable" class="table table-stripped">
<tbody></tbody>
</table>
</div>
</div>
</main>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="upload.js"></script>
</body>
</html>
var jqUploadTable = null;
var jqUploadButton = null;
var jqStartButton = null;
function createProgressBar(file) {
var progress = $("<div>", {"class": "progress", "style": "width: 300px"});
var bar = $("<div>", {
"class": "progress-bar",
"role": "progressbar",
"aria-valuenow": "0",
"aria-valuemin": "0",
"aria-valuemax": "100",
"style": "width: 0%;"
});
bar.appendTo(progress);
progress.bar = bar;
progress.setValue = function(value) {
this.bar.attr("aria-valuenow", value);
this.bar.css("width", value + "%");
}
return progress;
}
function getHumanReadableFileSize(file) {
return file.size;
}
function onStartButtonClick(event) {
uploadNextPhoto();
}
function uploadNextPhoto() {
var rows = $("tr");
for(var i=0; i<rows.length; i++) {
var photo = $(rows[i]).data("photo");
if( photo.uploaded === false ) {
console.log(i);
photo.startUpload();
break;
}
}
}
function onPhotoFileSelectorChange(event) {
for(var i=0; i<event.target.files.length; i++) {
var photo = new Photo(event.target.files[i]);
jqUploadTable.addRow(photo.row);
}
$(event.target).val("");
}
function onRemoveButtonClick(event) {
$(event.target).closest("tr").remove();
}
function onDocumentReady() {
jqUploadTable = $("#uploadTable");
jqUploadTable.addRow = function(row) {
jqUploadTable.find("tbody").append(row);
};
jqUploadTable[0].addEventListener("imageUploadCompleted", function(event) {
uploadNextPhoto();
});
jqStartButton = $("#startButton");
jqStartButton.click(onStartButtonClick);
jqUploadButton = $("#photoFileSelector");
jqUploadButton.change(onPhotoFileSelectorChange);
}
$(document).ready(onDocumentReady);
var Photo = function(file) {
this.file = file;
this.uploaded = false;
this.progressBar = createProgressBar(file);
this.row = $("<tr>");
this.columns = [$("<td>"), $("<td>"), $("<td>"), $("<td>")];
var that = this;
var fileReader = new FileReader();
fileReader.onload = function(event) {
var imageTag = $("<img>", {
src: event.target.result,
style: "width: 80px; height: 45px"
});
var removeButton = $("<button>", {"class": "btn btn-danger", html: "Remove"});
removeButton.click(onRemoveButtonClick);
that.row.data("photo", that);
that.columns[0].append(imageTag);
that.columns[1].append(file.name);
that.columns[2].append([getHumanReadableFileSize(file), that.progressBar]);
that.columns[3].append(removeButton);
that.row.append([that.columns[0], that.columns[1], that.columns[2], that.columns[3]])
}
fileReader.readAsDataURL(file);
}
Photo.prototype.startUpload = function() {
var formData = new FormData();
formData.append("photo", this.file);
var photo = this;
$.ajax({
url: "upload.php",
method: "post",
processData: false,
data: formData,
contentType: false,
success: function(data, textStatus, jqXHR) {
photo.uploaded = true;
console.log("Success Handler");
},
complete: function (jqXHR, testStatus) {
var event = new Event("imageUploadCompleted");
jqUploadTable[0].dispatchEvent(event);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
console.log("Error Handler");
},
xhr: function() {
var xhrctrl = new window.XMLHttpRequest();
xhrctrl.upload.addEventListener("progress", function(event) {
if( event.lengthComputable ) {
var percent = event.loaded / event.total;
photo.progressBar.setValue(Math.floor(percent * 100));
}
}, false);
return xhrctrl;
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment