if (typeof $.monstra == 'undefined') $.monstra = {}; $.monstra.fileuploader = { conf: { uploadUrl: '', csrf: '', errorMsg: '', uploaderId: '' }, _uploaderObj: null, init: function(conf){ if (!conf.uploaderId) { throw 'uploaderId not specified'; } $.extend(this.conf, conf); this._uploaderObj = $('#'+ this.conf.uploaderId); var area = this._uploaderObj.find('.upload-area'); area.off('dragenter.fuploader').on('dragenter.fuploader', function(e){ e.stopPropagation(); e.preventDefault(); $(this).addClass('upload-area-dragenter'); }); area.off('dragover.fuploader').on('dragover.fuploader', function(e){ e.stopPropagation(); e.preventDefault(); }); area.off('drop.fuploader').on('drop.fuploader', function(e){ $(this).removeClass('upload-area-dragenter').removeClass('upload-area-dragover').addClass('upload-area-drop'); e.preventDefault(); var files = e.originalEvent.dataTransfer.files; $.monstra.fileuploader.uploadFileHandle(files, area); }); $(document).off('dragover.fuploader').on('dragover.fuploader', function(e){ e.stopPropagation(); e.preventDefault(); area.removeClass('upload-area-dragenter').removeClass('upload-area-drop').addClass('upload-area-dragover'); }); $(document).off('dragenter.fuploader').on('dragenter.fuploader', function(e){ e.stopPropagation(); e.preventDefault(); }); $(document).off('drop.fuploader').on('drop.fuploader', function(e){ e.stopPropagation(); e.preventDefault(); }); }, uploadFileHandle: function(files, area){ for (var i = 0; i < files.length; i++){ var fd = new FormData(); fd.append('file', files[i]); fd.append('upload_file', 'upload_file'); fd.append('dragndrop', '1'); fd.append('csrf', $.monstra.fileuploader.conf.csrf); //this.setFileNameSize(files[i].name, files[i].size); this.uploadFile(fd, status); } }, uploadFile: function(formData, status){ var jqXHR = $.ajax({ url: $.monstra.fileuploader.conf.uploadUrl, type: 'POST', contentType: false, processData: false, cache: false, data: formData, xhr: function() { var xhrobj = $.ajaxSettings.xhr(); if (xhrobj.upload) { xhrobj.upload.addEventListener('progress', function(event) { var percent = 0; var position = event.loaded || event.position; var total = event.total; if (event.lengthComputable) { percent = Math.ceil(position / total * 100); } $.monstra.fileuploader.setProgress(percent); }, false); } return xhrobj; }, success: function(data){ $.monstra.fileuploader.setProgress(100); $.event.trigger('uploaded.fuploader'); }, error: function(){ Messenger().post({ type: 'error', message : $.monstra.fileuploader.conf.errorMsg, hideAfter: 3 }); this._uploaderObj.find('.upload-progress').animate({ width: 0 }, 1); this._uploaderObj.find('.upload-file-pholder').show(); } }); }, setProgress: function(progress){ if (parseInt(progress) > 0) { this._uploaderObj.find('.upload-file-pholder').hide(); } var progressBarWidth = progress * this._uploaderObj.find('.upload-area').width() / 100; this._uploaderObj.find('.upload-progress').animate({ width: progressBarWidth }, 10); }, setFileNameSize: function(fname, fsize){ var sizeStr = ''; var sizeKB = fsize / 1024; if(parseInt(sizeKB) > 1024){ var sizeMB = sizeKB/1024; sizeStr = sizeMB.toFixed(2)+' MB'; } else { sizeStr = sizeKB.toFixed(2)+' KB'; } this._uploaderObj.find('.upload-file-info').html(fname +' '+ sizeStr); } };