https://musik-in-koeln.de/module/jscript/lib/cb_ui/draganddropupload.js

1/* This file is part of cbui.
2 * Copyright © 2010-2014 stiftung kulturserver.de ggmbh <[email protected]>
3 *
4 * cbui is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation, either version 3 of the License, or
7 * (at your option) any later version.
8 *
9 * cbui is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with cbui.  If not, see <http://www.gnu.org/licenses/>.
16 */
17
18//Tweaks the jQuery Xhr Oject with the progress Event
19(function addXhrProgressEvent($) {
20	var originalXhr = $.ajaxSettings.xhr;
21	$.ajaxSetup({
22		progress: function() {
23		},
24		uploadProgress: function() {
25		},
26		xhr: function() {
27			var req = originalXhr(), that = this;
28			if (req) {
29				if (typeof req.addEventListener === "function" && that.progress !== undefined) {
30					req.addEventListener("progress", function(evt) {
31						that.progress(evt);
32					}, false);
33				}
34				if (typeof req.upload === "object" && that.uploadProgress !== undefined) {
35					req.upload.addEventListener("progress", function(evt) {
36						that.uploadProgress(evt);
37					}, false);
38				}
39			}
40			return req;
41		}
42	});
43})(jQuery);
44
45   	/*
46	 * @param blockelement or file input or||and selector(s) dropzone
47	 * @param url uploadUrl 
48	 * @param name form field name
49	 * @param name fallBackFormName form element name 
50	 */
51var DragDropUpload = function(dropZone, uploadUrl, postName, formName){
52	var that = this;
53	this.dropZone = dropZone;
54	this.uploadUrl = uploadUrl;
55	this.postName = postName;
56	this.formName = formName;
57	this.loaded = 0;
58	this.total = 0;
59	this.allowAll = true;
60	this.allowedFileSize = 0;
61	this.allowedPostSize = 0;
62	this.validationObj = {};
63	if(window.FileReader){
64                if(typeof $.event.props ==='undefined') {
65                    $.event.addProp('dataTransfer');
66                } else {
67                    $.event.props.push('dataTransfer');
68                }
69		
70		$(this.dropZone).on('drop.ImageUploader', function(e) {
71			if(this.type && this.type.toLowerCase() === 'file')
72				return;
73			that.onDrop(e);
74			$(this).css({backgroundColor:''});
75		});
76		$(this.dropZone).on('change.ImageUploader', function(e) {
77			var files = e.target.files;
78			if(files.length===0)
79				return;
80			that.readAsFormFiles(files, true);
81		});
82		$(this.dropZone).on('dragover.ImageUploader', function(e){
83			if(this.type && this.type.toLowerCase() === 'file')
84				return;
85			$(this).css({backgroundColor:'#bbb'});
86			e.preventDefault();
87		});
88	}
89};
90DragDropUpload.prototype = {
91	onDrop : function(e){
92		var files = e.dataTransfer.files;
93		if(files.length>0){
94			this.readAsFormFiles(files);
95		}
96		e.preventDefault();
97	},
98	readAsFormFiles : function(files, noAppend){
99		var that = this;
100		var notValidatedArray = [];
101		var fileListArray = [];
102		var postSize = 0;
103		var clone = $(document[this.formName]).clone();
104		if(clone.length > 0 && clone.get(0)[this.postName])
105			clone.get(0)[this.postName].value = '';
106		var formData = new FormData(clone.get(0));
107		$(files).each(function(index, file){
108			if(that.validate(file)){
109				formData.append(that.postName, file);
110				fileListArray.push({name:file.name,size:file.size});
111				if(this.allowedPostSize)
112					postSize += file.size;
113			}
114			else{
115				notValidatedArray.push({name:file.name,size:file.size});
116			}
117		});
118		var settings = {
119			cache: false,
120			contentType: false,
121			processData: false
122		};
123		if(fileListArray.length > 0 && postSize < this.allowedPostSize)
124			this.upload(formData, settings, fileListArray, notValidatedArray);
125		else
126			$(this).trigger('validationError',[notValidatedArray,this.validationObj]);
127		document[this.formName][this.postName].value = '';
128	},
129	setValidation : function (val){
130		var that = this;
131		if(typeof val !== 'object')
132			return;
133		this.validationObj = val;
134		this.allowAll = false;

135		this.allowedExtensions = [];
136		if(val.extensions && typeof val.extensions === 'string'){
137			this.allowedExtensions = val.extensions.toLowerCase().replace(/,|\./g,'').split(' ');
138		}
139		else if(val.extensions)
140			$(val.extensions).each(function(index, value){
141				that.allowedExtensions.push(value.toLowerCase().replace(/,|\./g,''));
142			});
143		if(val.fileSize)
144			this.allowedFileSize = parseInt(val.fileSize)*1024*1024;
145		if(val.postSize)
146			this.allowedPostSize = parseInt(val.postSize)*1024*1024;
147	},
148	validate : function(file){
149		var that = this;
150		if(this.allowAll)
151			return true;
152		var ext = file.name.toLowerCase().split('.');
153		if(jQuery.inArray(ext[ext.length-1],that.allowedExtensions) > -1 )
154			return this.validateSize(file);
155		else if(this.allowedExtensions.length < 1 && this.allowedFileSize > 0)
156			return this.validateSize(file);
157		return false;
158	},
159	validateSize : function(file){
160		if(!this.allowedFileSize)
161			return true;
162		return file.size < this.allowedFileSize;
163	},
164	upload : function(sendata , settings, fileListArray, notValidatedArray){
165		var that = this;
166		settings = settings ? settings : {};
167		var xhr = $.ajax($.extend({
168			type : 'post',
169			url : that.uploadUrl,
170			data: sendata,
171			success: function(data, status){
172				that.progress('ajax-success',100);
173				$(that).trigger('uploadSuccess', [data]);
174			},
175			error: function(data, status){
176				$(that).trigger('uploadError', [data,status]);
177			},
178			uploadProgress : function(e){
179				e.target.fileIndex = 0;
180				e.target.fileProgressType = 'ajax-form-upload';
181				that.progressHandler(e);
182			}
183		}, settings));
184		$(this).trigger('uploadStart', [xhr, fileListArray, notValidatedArray]);
185	},
186	progressHandler : function(e){
187		if(e.originalEvent)
188			e = e.originalEvent;
189		if (e.lengthComputable) {  
190			var percentComplete = e.loaded / e.total * 100;
191			this.loaded = e.loaded;
192			this.total = e.total;
193		}
194		var type = e.target.fileProgressType; 
195		this.progress(type,percentComplete);
196	},
197	progress : function(type, percentComplete){
198		var that = this;
199		switch(type){
200			case'ajax-form-upload':percentComplete = percentComplete*0.9;	
201				break;
202			case'ajax-success':percentComplete = percentComplete*1;	
203				break;	
204		}
205		$(this).trigger('uploadProgress',[percentComplete,that.loaded,that.total]);
206	}
207 };