CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
Code Prank
Code Prank

Reputation: 4250

Remove drag and drop from valums fileuploader

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

Answers (6)

Saranga
Saranga

Reputation: 11

var uploader = new qq.FileUploader({
....
});

qq.attach(document, 'dragenter', function(e) {
    $('.qq-upload-drop-area').hide();
});

Upvotes: 1

Mike
Mike

Reputation: 617

Just make the text color transparent

.ajax__fileupload_dropzone {color:transparent;}

Upvotes: 0

chiliNUT
chiliNUT

Reputation: 19572

this worked for me

jQuery('.qq-upload-drop-area').remove();

Upvotes: 0

kovpack
kovpack

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

Graham Cuthbert
Graham Cuthbert

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

Dusda
Dusda

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

Related Questions