File Uplaod and Drag on Single Button

Question

I want Uplaod and drag Images on single button usig knokout js and save images using web api on button click

Amit Mohanty · Answer

Try this Upload and Drag Images with Knockout.js Upload or drag images: Save Images function ViewModel() { var self = this; self.imageData = ko.observableArray([]); self.handleFileSelect = function(evt) { var files = evt.target.files; // FileList object for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { // Push the image data onto the array. self.imageData.push({ name: escape(theFile.name), data: e.target.result }); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } }; self.handleDragOver = function(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. }; self.handleDrop = function(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // FileList object. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { // Push the image data onto the array. self.imageData.push({ name: escape(theFile.name), data: e.target.result }); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } }; self.saveImages = function() { // Loop through the image data and save each one using Web API. ko.utils.arrayForEach(self.imageData(), function(image) { // Use AJAX to POST the image data to the server. $.ajax({ type: 'POST', url: 'http://yourserver.com/saveimage', data: { name: image.name, data: image.data }, success: function() { // Do something when the image has been saved. }, error: function() { // Handle errors here. } }); }); }; } ko.applyBindings(new ViewModel());