monpas/public/js/services/uploaderservice.js

$(function(){

	ko.bindingHandlers.dropzone = {
		init: function ( element, valueAccessor, allBindings, data ) {
			var options = {
				// maxFileSize	: 10,
				maxFileSize:  50 ,
				maxFiles   	: 25,
				url        		: 'temp',
				accept		: function(file,done){
									if (file.size <= ls.UploaderModel.maxsize()){  
										return done();						
									}	else {

										ls.UploaderModel.responses.push(file.name + " bestand is te groot (max 10MB)" );
										return done("Bestand is te groot.");
									}
								},
				init       		: function () {
									var thisDropzone 	= this;
									var totalFiles    		= 0,
										completeFiles 	= 0;
									this.on( "addedfile", function ( file ) {
										totalFiles += 1;
									} );
									this.on( "removed file", function ( file ) {
										totalFiles -= 1;
									} );
									this.on("error", function(file, response){
										if (file.xhr && file.xhr.responseText) ls.UploaderModel.responses.push( file.xhr.responseText);
									});
									this.on( "complete", function ( file ) {
										completeFiles += 1;
										if (file.xhr && file.xhr.responseText) ls.UploaderModel.responses.push( file.xhr.responseText);
										if ( completeFiles === totalFiles ) {
											ls.UploaderModel.uploadcounter(totalFiles)
											thisDropzone.removeAllFiles();
											totalFiles    		= 0;
											completeFiles 	= 0;
											 ls.UploaderModel.fGiveFeedback();
										}
									} );
									this.on( "processing", function ( file ) {					
										this.options.url = ls.UploaderModel.uploadURL();
									} );
									
									$( '.dropzone-remove-files' ).click( function () {
										thisDropzone.removeAllFiles();
										totalFiles    		= 0;
										completeFiles 	= 0;
									} );
							}
			};

			$( element ).addClass( 'dropzone' );
			new Dropzone( element, options ); // jshint ignore:line
		}
	};



ls.initUploader= function(module,folder,docID,callback){
	
	if (ls.UploaderModel !== undefined){
		ls.UploaderModel.initModel(module,folder,docID,callback);
	}
	else {
		ls.UploaderModel = {
			module 		: ko.observable(),
			folder			: ko.observable(),
			vmcallback		: ko.observable(),
			docNaam		: ko.observable(),
			documentID	: ko.observable(),
			fileName		: ko.observable(),
			bestanden		: ko.observableArray(),	
			uploadcounter	: ko.observable(0),	
			uploadURL		: ko.observable(),	
			maxsize		: ko.observable(10000000),
			//maxsize		: ko.observable(5000),
			responses		: ko.observableArray(),
			showfiles		: ko.observable(true),
			toondropzone	: ko.observable(true),

			initBindings :function(module,folder,docID,callback){
				var self = ls.UploaderModel;
				if (!ko.dataFor(document.getElementById('modUploader')) ) {
					ko.applyBindings(ls.UploaderModel, document.getElementById("modUploader"));				
				}
				self.initModel(module,folder,docID , callback);
			},

			initModel: function(module,folder,docID,callback){
				var vm = ls.UploaderModel;
				vm.module(module)
				vm.folder(folder)
				vm.documentID(docID)
				vm.docNaam('');
				vm.fileName('');
				vm.bestanden.removeAll();
				vm.uploadcounter(0);
				vm.toondropzone(true);
				if (vm.responses() && vm.responses().length > 0) vm.responses.removeAll();
				vm.showfiles('true');
				vm.uploadURL(' index.php/shared/upload/doDropUpload/'+ls.UploaderModel.folder() + '/' + ls.UploaderModel.module() );
				$("#fileform")[0].reset();
				
				vm.vmcallback = callback;
				$("#modUploader").modal('show');
			},

			fSetFileList: function(){
				var vm = ls.UploaderModel;
				vm.bestanden.removeAll();
				var files=document.getElementById("fileselecter").files
				for (var i = 0, f; f = files[i]; i++) {
					vm.bestanden.push(f)
				};
			},

			fDoUpload :function(){
				var vm = ls.UploaderModel;
				// process all File objects
				vm.responses.removeAll()
				vm.showfiles(false);

				if (vm.bestanden() && vm.bestanden().length > 0){
					showAjaxLoader()

					$.each(vm.bestanden(), function(i,p){
						if (p.size <= vm.maxsize()){  
							vm.fUploadFile(p);							
						}	else {
							vm.responses.push(p.name + " bestand is te groot (max 10MB)" );
						}
						if (i == vm.bestanden().length -1 ) hideAjaxLoader()
					});
					
				}  // if bestanden 
				else{
					hideAjaxLoader()
					
					$("#modUploader").modal('hide');
					if (typeof  vm.vmcallback  == 'function'){
							vm.vmcallback(false);
					}
				}
			},

			fUploadFile: function(file){
				var vm = ls.UploaderModel;
				var xhr 	= new XMLHttpRequest();
				var url 	= 'index.php/shared/upload/doUpload';
				var fd 	= new FormData();
				fd.append("upload_file", file);				
				fd.append("module", vm.module());
				fd.append("folderID", vm.folder());
				fd.append("oldDocID", vm.documentID());

				// hier daadwerkelijk doorsturen naar server
				xhr.open("POST", url, true)
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) { // Every thing ok, file uploaded
						if (xhr.responseText) vm.responses.push(xhr.responseText);
						vm.uploadcounter(parseInt(vm.uploadcounter()) + 1)
						if (vm.uploadcounter() == vm.bestanden().length){
							vm.fGiveFeedback();
						}
					};
				}
				
				xhr.send(fd);

			 },

			 fGiveFeedback: function(){
			 	var vm = ls.UploaderModel;
			 	
			 	vm.toondropzone(false);
				hideAjaxLoader()
				vm.showfiles(false);
				
				var time=300;
				if (vm.responses() && vm.responses().length <= 0) {
				setTimeout(function(){
							$("#modUploader").modal('hide')	
							if (typeof  vm.vmcallback  == 'function'){  vm.vmcallback(true);}
					}, time);
				}
			 },
			fCloseAndCallback: function(){
				var vm = ls.UploaderModel;
				if (typeof  vm.vmcallback  == 'function') vm.vmcallback(true);
			},
			fCloseUploader: function(){
				var vm = ls.UploaderModel;
				if (typeof  vm.vmcallback  == 'function') vm.vmcallback(false);
			},

			fRemoveBestand: function(){
				var vm = ls.UploaderModel;
				if (vm.bestanden() && vm.bestanden().length > 0){
					vm.bestanden.remove(this);
				}
			}
		} ; // definition van model

		ls.UploaderModel.initBindings(module,folder,docID,callback);
	}; // else
}// function initUploaderModel


});