Reputation: 4250
Hey guys in my recent project i have used the valums file uploader for ajax based file uploading as i found it best with my requirements but now i am stuck at one point and that is i want to remove the drag and drop functionality from that i have searched internet for hours but nothing found helpful. Is there any way to remove this part from plugin? Here is my code
uploader = new qq.FileUploader({
element: $('#file-uploader')[0],
action: base_url + 'assets/scripts/server-side/server-side-uploader.php',
debug: true,
});
Upvotes: 2
Views: 4472
Reputation: 11
var uploader = new qq.FileUploader({
....
});
qq.attach(document, 'dragenter', function(e) {
$('.qq-upload-drop-area').hide();
});
Upvotes: 1
Reputation: 617
Just make the text color transparent
.ajax__fileupload_dropzone {color:transparent;}
Upvotes: 0
Reputation: 5045
I can not agree with the accepted answer for this question. In case of deleting of line
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
qq uploader gives throw new error('element not found ' + type)
, so that is not the solution for sure - noone wants to see javascript errors on page (at least me).
The easiest way, I think, to get rid of that drop area is to hide the div with css: just do
.qq-upload-drop-area {
display: none;
}
This works fine for me. No errors, no div block.
Upvotes: 2
Reputation: 152
You can define your own template without the drag and drop section e.g. I have:
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
'<div class="qq-upload-button">Upload Proof</div>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
Remove the following line from the template to disable drag and drop functionality
'<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
Upvotes: 3
Reputation: 3368
Use FileUploaderBasic instead. qq.FileUploader actually extends FileUploaderBasic, and adds the list support and drag/drop stuff. FileUploaderBasic only implements the button and validation.
var uploader = new qq.FileUploaderBasic({
// pass the dom node (ex. $(selector)[0] for jQuery users)
element: document.getElementById('file-uploader'),
// path to server-side upload script
action: '/server/upload'
});
If you want to use some of the other features that FileUploaderBasic doesn't have (like lists), just extend qq.FileUploaderBasic in a separate JavaScript file referenced after fileupoader.js, like so:
var qq = qq || {};
qq.extend(qq.FileUploaderBasic.prototype, {
//override uploader stuff by just creating a function with the same name,
//like this function that creates the upload button
_createUploadButton: function(element){
var self = this;
//make whatever modifications you want here
return new qq.UploadButton({
element: element,
multiple: this._options.multiple && qq.UploadHandlerXhr.isSupported(),
onChange: function(input){
self._onInputChange(input);
}
});
}
});
Upvotes: 0