Permalink
Browse files

Upgrade to Fine Uploader 3.2.0.

  • Loading branch information...
1 parent abc9e77 commit 27f4eca1c748671c523ed322a8ead9055c2d0f4c @markotibold markotibold committed Feb 15, 2013
@@ -645,7 +645,7 @@ var BaseFileSelectDialog = AdminRESTDialog.extend({
'id': 'upload-buttonpane'
});
- var upload_button = $('<button type="button">' + gettext('Upload a new file') + '</button>')
+ var upload_button = $('<a>' + gettext('Upload a new file') + '</a>')
.appendTo(upload_button_pane)
.attr({
'class': 'upload',
@@ -663,19 +663,26 @@ var BaseFileSelectDialog = AdminRESTDialog.extend({
});
// Valums file uploader
- var uploader = new qq.FileUploaderBasic({
- multipart: true,
- fieldName: this.get_upload_fieldname(),
- element: upload_button_pane[0],
+ var uploader = new qq.FineUploaderBasic({
button: upload_button_pane[0], // connecting directly to the jQUery UI upload_button doesn't work
- action: this.get_upload_path(),
- onSubmit: $.proxy(function(id, fileName) {
- uploader._options.params.title = fileName;
- }, this),
- onComplete: $.proxy(function(id, fileName, responseJSON) {
- this.refresh_grid();
- }, this),
- debug: false
+ callbacks: {
+ onComplete: $.proxy(function(id, fileName, responseJSON) {
+ console.log(responseJSON);
+ this.refresh_grid();
+ }, this)
+ },
+ debug: true,
+ request: {
+ endpoint: this.get_upload_path(),
+ inputName: this.get_upload_fieldname(),
+ params: {
+ 'title': this.get_upload_fieldname()
+ },
+ paramsInBody: true,
+ customHeaders: {
+ "X-CSRFToken": getCookie('csrftoken')
+ }
+ }
});
// reset button behavior
@@ -1,22 +1,24 @@
// Django CSRF framework, https://docs.djangoproject.com/en/dev/ref/contrib/csrf/
// This module ensures that all ajax non-safe methods send the X-CSRFToken along with
// every request.
-$(document).ajaxSend(function(event, xhr, settings) {
- function getCookie(name) {
- var cookieValue = null;
- if (document.cookie && document.cookie != '') {
- var cookies = document.cookie.split(';');
- for (var i = 0; i < cookies.length; i++) {
- var cookie = jQuery.trim(cookies[i]);
- // Does this cookie string begin with the name we want?
- if (cookie.substring(0, name.length + 1) == (name + '=')) {
- cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
- break;
- }
+function getCookie(name) {
+ var cookieValue = null;
+ if (document.cookie && document.cookie != '') {
+ var cookies = document.cookie.split(';');
+ for (var i = 0; i < cookies.length; i++) {
+ var cookie = jQuery.trim(cookies[i]);
+ // Does this cookie string begin with the name we want?
+ if (cookie.substring(0, name.length + 1) == (name + '=')) {
+ cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+ break;
}
}
- return cookieValue;
}
+ return cookieValue;
+}
+
+$(document).ajaxSend(function(event, xhr, settings) {
+
function sameOrigin(url) {
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
@@ -36,4 +38,4 @@ $(document).ajaxSend(function(event, xhr, settings) {
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
-});
+});
@@ -0,0 +1,102 @@
+qq.UploadButton = function(o){
+ this._options = {
+ element: null,
+ // if set to true adds multiple attribute to file input
+ multiple: false,
+ acceptFiles: null,
+ // name attribute of file input
+ name: 'file',
+ onChange: function(input){},
+ hoverClass: 'qq-upload-button-hover',
+ focusClass: 'qq-upload-button-focus'
+ };
+
+ qq.extend(this._options, o);
+ this._disposeSupport = new qq.DisposeSupport();
+
+ this._element = this._options.element;
+
+ // make button suitable container for input
+ qq(this._element).css({
+ position: 'relative',
+ overflow: 'hidden',
+ // Make sure browse button is in the right side
+ // in Internet Explorer
+ direction: 'ltr'
+ });
+
+ this._input = this._createInput();
+};
+
+qq.UploadButton.prototype = {
+ /* returns file input element */
+ getInput: function(){
+ return this._input;
+ },
+ /* cleans/recreates the file input */
+ reset: function(){
+ if (this._input.parentNode){
+ qq(this._input).remove();
+ }
+
+ qq(this._element).removeClass(this._options.focusClass);
+ this._input = this._createInput();
+ },
+ _createInput: function(){
+ var input = document.createElement("input");
+
+ if (this._options.multiple){
+ input.setAttribute("multiple", "multiple");
+ }
+
+ if (this._options.acceptFiles) input.setAttribute("accept", this._options.acceptFiles);
+
+ input.setAttribute("type", "file");
+ input.setAttribute("name", this._options.name);
+
+ qq(input).css({
+ position: 'absolute',
+ // in Opera only 'browse' button
+ // is clickable and it is located at
+ // the right side of the input
+ right: 0,
+ top: 0,
+ fontFamily: 'Arial',
+ // 4 persons reported this, the max values that worked for them were 243, 236, 236, 118
+ fontSize: '118px',
+ margin: 0,
+ padding: 0,
+ cursor: 'pointer',
+ opacity: 0
+ });
+
+ this._element.appendChild(input);
+
+ var self = this;
+ this._disposeSupport.attach(input, 'change', function(){
+ self._options.onChange(input);
+ });
+
+ this._disposeSupport.attach(input, 'mouseover', function(){
+ qq(self._element).addClass(self._options.hoverClass);
+ });
+ this._disposeSupport.attach(input, 'mouseout', function(){
+ qq(self._element).removeClass(self._options.hoverClass);
+ });
+ this._disposeSupport.attach(input, 'focus', function(){
+ qq(self._element).addClass(self._options.focusClass);
+ });
+ this._disposeSupport.attach(input, 'blur', function(){
+ qq(self._element).removeClass(self._options.focusClass);
+ });
+
+ // IE and Opera, unfortunately have 2 tab stops on file input
+ // which is unacceptable in our case, disable keyboard access
+ if (window.attachEvent){
+ // it is IE or Opera
+ input.setAttribute('tabIndex', "-1");
+ }
+
+ return input;
+ }
+};
@@ -0,0 +1,172 @@
+/**
+ * Class for uploading files, uploading itself is handled by child classes
+ */
+/*globals qq*/
+qq.UploadHandler = function(o) {
+ "use strict";
+
+ var queue = [],
+ options, log, dequeue, handlerImpl;
+
+ // Default options, can be overridden by the user
+ options = {
+ debug: false,
+ forceMultipart: true,
+ paramsInBody: false,
+ paramsStore: {},
+ endpointStore: {},
+ maxConnections: 3, // maximum number of concurrent uploads
+ uuidParamName: 'qquuid',
+ totalFileSizeParamName: 'qqtotalfilesize',
+ chunking: {
+ enabled: false,
+ partSize: 2000000, //bytes
+ paramNames: {
+ partIndex: 'qqpartindex',
+ partByteOffset: 'qqpartbyteoffset',
+ chunkSize: 'qqchunksize',
+ totalParts: 'qqtotalparts',
+ filename: 'qqfilename'
+ }
+ },
+ resume: {
+ enabled: false,
+ id: null,
+ cookiesExpireIn: 7, //days
+ paramNames: {
+ resuming: "qqresume"
+ }
+ },
+ log: function(str, level) {},
+ onProgress: function(id, fileName, loaded, total){},
+ onComplete: function(id, fileName, response, xhr){},
+ onCancel: function(id, fileName){},
+ onUpload: function(id, fileName){},
+ onUploadChunk: function(id, fileName, chunkData){},
+ onAutoRetry: function(id, fileName, response, xhr){},
+ onResume: function(id, fileName, chunkData){}
+
+ };
+ qq.extend(options, o);
+
+ log = options.log;
+
+ /**
+ * Removes element from queue, starts upload of next
+ */
+ dequeue = function(id) {
+ var i = qq.indexOf(queue, id),
+ max = options.maxConnections,
+ nextId;
+
+ queue.splice(i, 1);
+
+ if (queue.length >= max && i < max){
+ nextId = queue[max-1];
+ handlerImpl.upload(nextId);
+ }
+ };
+
+ if (qq.isXhrUploadSupported()) {
+ handlerImpl = new qq.UploadHandlerXhr(options, dequeue, log);
+ }
+ else {
+ handlerImpl = new qq.UploadHandlerForm(options, dequeue, log);
+ }
+
+
+ return {
+ /**
+ * Adds file or file input to the queue
+ * @returns id
+ **/
+ add: function(file){
+ return handlerImpl.add(file);
+ },
+ /**
+ * Sends the file identified by id
+ */
+ upload: function(id){
+ var len = queue.push(id);
+
+ // if too many active uploads, wait...
+ if (len <= options.maxConnections){
+ return handlerImpl.upload(id);
+ }
+ },
+ retry: function(id) {
+ var i = qq.indexOf(queue, id);
+ if (i >= 0) {
+ return handlerImpl.upload(id, true);
+ }
+ else {
+ return this.upload(id);
+ }
+ },
+ /**
+ * Cancels file upload by id
+ */
+ cancel: function(id){
+ log('Cancelling ' + id);
+ options.paramsStore.remove(id);
+ handlerImpl.cancel(id);
+ dequeue(id);
+ },
+ /**
+ * Cancels all uploads
+ */
+ cancelAll: function(){
+ qq.each(queue, function(idx, fileId) {
+ this.cancel(fileId);
+ });
+
+ queue = [];
+ },
+ /**
+ * Returns name of the file identified by id
+ */
+ getName: function(id){
+ return handlerImpl.getName(id);
+ },
+ /**
+ * Returns size of the file identified by id
+ */
+ getSize: function(id){
+ if (handlerImpl.getSize) {
+ return handlerImpl.getSize(id);
+ }
+ },
+ getFile: function(id) {
+ if (handlerImpl.getFile) {
+ return handlerImpl.getFile(id);
+ }
+ },
+ /**
+ * Returns id of files being uploaded or
+ * waiting for their turn
+ */
+ getQueue: function(){
+ return queue;
+ },
+ reset: function() {
+ log('Resetting upload handler');
+ queue = [];
+ handlerImpl.reset();
+ },
+ getUuid: function(id) {
+ return handlerImpl.getUuid(id);
+ },
+ /**
+ * Determine if the file exists.
+ */
+ isValid: function(id) {
+ return handlerImpl.isValid(id);
+ },
+ getResumableFilesData: function() {
+ if (handlerImpl.getResumableFilesData) {
+ return handlerImpl.getResumableFilesData();
+ }
+ return [];
+ }
+ };
+};
Oops, something went wrong.

0 comments on commit 27f4eca

Please sign in to comment.