Skip to content

Instantly share code, notes, and snippets.

@xxbinxx

xxbinxx/knockout-multi-image-upload.html

Last active June 15, 2018 05:47
Show Gist options
  • Save xxbinxx/05ed5b4d43b5de0fffd32cd9d9bbf62c to your computer and use it in GitHub Desktop.
Save xxbinxx/05ed5b4d43b5de0fffd32cd9d9bbf62c to your computer and use it in GitHub Desktop.
Download ZIP
knockout multiple image upload snippet (bootstrap 4) // source http://jsbin.com/sojaxos
Raw
knockout-multi-image-upload.html
<html>
<head>
<title>knockout multiple image upload snippet</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div id="page-profile-update">
<div class="row form justify-content-center">
<div class="col-sm-12 col-lg-6">
<div class="card form-card">
<div class="card-header text-center">
<span>Knockout multiple image upload example</span>
</div>
<div class="card-body">
<form method="post" enctype="multipart/form-data" novalidate>
<!-- form errors here -->
<div class="row form-group">
<div class="col-sm-12">
<div class="card-header">
<span>Add your images</span>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-12">
<input type="file" id="files" name="files[]" multiple data-bind=" event:{change: $root.fileSelect}" />
</div>
</div>
<div class="row form-group" data-bind="foreach: files">
<div class="col-md-4">
<div class="thumbnail">
<img class="img-rounded" data-bind = "attr: {'src': src, 'title': name}" style="width:100%"/>
<div class="caption">
<p class="text-center" data-bind ="text: name"></p>
<button class="btn btn-danger w-100" data-bind="click: $root.removeFile">Delete <i class="fa fa-trash"></i></button>
</div>
</a>
</div>
</div>
</div>
<div class="row form-group text-center" >
<div class="col-sm-12">
<button type="submit" class="btn btn-success" data-bind="visible: files().length">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<script>
var ViewUpdateProfile = function() {
var self = this;
self.files = ko.observableArray([]);
self.removeFile = function(file){
// console.log("REMOVING: ", file);
self.files.remove(file);
}
self.fileSelect = function(elemet, event) {
var files = event.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
self.files.push(new FileModel(escape(theFile.name), e.target.result));
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
};
self.files.subscribe(function(data)
{ console.log("FILES: ", data);
});
};
var FileModel = function(name, src) {
var self = this;
this.name = name;
this.src = src;
};
var viewUpdateProfile = new ViewUpdateProfile();
ko.applyBindings(viewUpdateProfile, document.getElementById("page-profile-update"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment