// Request.File | license: MIT-style license | authors: [Arian Stolwijk, Djamil Legato] credits: https://gist.github.com/a77b537e729aff97429c (function(){var progressSupport = ('onprogress' in new Browser.Request()); Request.File = new Class({Extends: Request, options: {emulation: false, urlEncoded: false}, initialize: function(options){this.xhr = new Browser.Request(); this.formData = new FormData(); this.setOptions(options); this.headers = this.options.headers;}, append: function(key, value){this.formData.append(key, value); return this.formData;}, reset: function(){this.formData = new FormData();}, send: function(options){if (!this.check(options)) return this; this.options.isSuccess = this.options.isSuccess || this.isSuccess; this.running = true; var xhr = this.xhr; if (progressSupport){xhr.onloadstart = this.loadstart.bind(this); xhr.onprogress = this.progress.bind(this); xhr.upload.onprogress = this.progress.bind(this); } xhr.open('POST', this.options.urlfileuploader, true); xhr.onreadystatechange = this.onStateChange.bind(this); Object.each(this.headers, function(value, key){try {xhr.setRequestHeader(key, value);} catch (e){this.fireEvent('exception', [key, value]);}}, this); this.fireEvent('request'); xhr.send(this.formData); if (!this.options.async) this.onStateChange(); if (this.options.timeout) this.timer = this.timeout.delay(this.options.timeout, this); return this;}});})(); // This section based on: Form.MultipleFileInput | license: MIT-style license | authors: Arian Stolwijk Object.append(Element.NativeEvents, {dragenter: 2, dragleave: 2, dragover: 2, dragend: 2, drop: 2}); if (!this.Form) this.Form = {}; Form.MultipleFileInput = new Class({Implements: [Options, Events], options: {itemClass: 'nodragme'}, _files: [], initialize: function(input, list, drop, options){input = this.element = document.id(input); list = this.list = document.id(list); drop = this.drop = document.id(drop); this.setOptions(options); var name = input.get('name'); if (name.slice(-2) != '[]') input.set('name', name + '[]'); input.set('multiple', true); this.inputEvents = {change: function(event){Array.each(input.files, this.add, this); this.fireEvent('change', event); }.bind(this)}; this.dragEvents = drop && (typeof document.body.draggable != 'undefined') ? {dragenter: function(event){event.stopPropagation(); event.preventDefault(); this.addClass('ondrag'); }, dragleave: function(event){event.stopPropagation(); event.preventDefault(); this.removeClass('ondrag'); }, dragend: function(event){event.stopPropagation(); event.preventDefault(); }, dragover: function(event){event.stopPropagation(); event.preventDefault(); }, drop: function(event){event.stopPropagation(); event.preventDefault(); var dataTransfer = event.event.dataTransfer; if (dataTransfer) Array.each(dataTransfer.files, this.add, this); this.fireEvent('drop', event); }.bind(this)} : null; this.attach();}, attach: function(){this.element.addEvents(this.inputEvents); if (this.dragEvents) this.drop.addEvents(this.dragEvents);}, detach: function(){this.input.removeEvents(this.inputEvents); if (this.dragEvents) this.drop.removeEvents(this.dragEvents);}, add: function(file){this._files.push(file); var self = this; new Element('div', {'class': this.options.itemClass}).grab(new Element('div', {'class':'edfctext iconobject newarrival'}).grab(new Element('a', {'class':'editorlink',href: file.name,text:file.name})).grab(new Element('img', {'alt':'icon','class':'listicon',src: '/.templates/fmlibrary/blank.gif'}))).inject(this.list); thelastfile=(file.name);this.fireEvent('add', file); return this;}, getFiles: function(){return this._files;}}); // This section based on: Form.Upload | license: MIT-style license | authors: Arian Stolwijk (function(){"use strict"; if (!this.Form) this.Form = {}; var Form = this.Form; Form.Upload = new Class({Implements: [Options, Events], options: {fireAtOnce: true, onComplete: function(){window.location.href = window.location.href;}}, initialize: function(input, options){input = this.input = document.id(input); this.setOptions(options); if ('FormData' in window) this.modernUpload(input); else alert('Uploads are not supported with this browser.');}, modernUpload: function(input){this.modern = true; var form = input.getParent('form'); if (!form) return; var self = this; var drop = new Element('div.mydroppable').inject(input, 'after'); var list = new Element('div.uploadList').inject('uploadedfiles', 'after'); var progress = new Element('div.progress').setStyle('display', 'none').inject(list, 'after'); var uploadReq = new Request.File({urlfileuploader: form.get('action'), onRequest: progress.setStyles.pass({display: 'block', opacity:1, visibility:'visible', width: 0}, progress), onProgress: function(event){var loaded = event.loaded, total = event.total; progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');}, onComplete: function(){progress.setStyle('width', '100%').set('tween', {duration:700}).fade('0'); self.fireEvent('complete', Array.slice(arguments)); this.reset();}}); var inputname = input.get('name'); var inputFiles = new Form.MultipleFileInput(input, list, drop, {onDragenter: drop.addClass.pass('hover', drop), onDragleave: drop.removeClass.pass('hover', drop), onDrop: function(){drop.removeClass.pass('hover', drop); if (self.options.fireAtOnce){self.submit(inputFiles, inputname, uploadReq);}}, onChange: function(){if (self.options.fireAtOnce){self.submit(inputFiles, inputname, uploadReq);}}}); form.addEvent('submit', function(event){if (event) event.preventDefault(); self.submit(inputFiles, inputname, uploadReq); var files = inputFiles.getFiles();for (var i = 0; i < files.length; i++){delete(files[i]);};}); self.reset = function() {var files = inputFiles.getFiles(); for (var i = 0; i < files.length; i++){inputFiles.remove(files[i]);}};}, submit:function(inputFiles, inputname, uploadReq){inputFiles.getFiles().each(function(file){uploadReq.append(inputname, file);}); uploadReq.send();}, isModern: function(){return !!this.modern;}});}).call(window);