2

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,
    });
0

6 Answers 6

3

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>' +
1
  • 1
    Also comment/remove this._setupDragDrop(); for prevent to Javascript error Mar 31, 2015 at 12:29
2

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.

1
  • The REAL solution is to use the latest version of this library, Fine Uploader which gives you a lot more control (and adds a lot of features and fixes). There are options and API methods in Fine Uploader that allow you to completely remove the drop zone, or add multiple drop zones, for example. This exact scenario is covered in the FAQ. Aug 15, 2013 at 13:49
1
var uploader = new qq.FileUploader({
....
});

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

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);
        }        
    });           
}
});
0

this worked for me

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

Just make the text color transparent

.ajax__fileupload_dropzone {color:transparent;}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.