Disable Drag and Drop Functionality for jQuery-File-Upload

Question

I'm using ajax file uploader on my pages. https://github.com/blueimp/jQuery-File-Upload

I'm using one control for image uploading and another for file uploading and both are on the same page.

I've added the validation to check the file type in both of the file uploaders but when I drag and drop resume on my file uploader then it will catch the image uploader event.

I want to disable the functionality of drag and drop for image uploader so it will not trigger when i drag my resume.

Here's my code,

$(function () {

        var userId = $("#CandidateProfile_user_id").val();    
        var url = 'index.php?r=fileUpload/uploadResume';
        $('#resumeUpload').fileupload({
            add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^document\/(doc|docx)$/i;

                var fileName = data.originalFiles[0].name;
                var fileExtension = fileName.split('.')[1];

                if(fileExtension.toLowerCase() != "doc" && fileExtension.toLowerCase() != "docx") {
                      uploadErrors.push('Not an accepted file type');
                }
//                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
//                    uploadErrors.push('Not an accepted file type');
//                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        url: url,
        dataType: 'json',
        formData: {userId : userId},       
        done: function (e,data) {

            onFileUploaded(data.result.fileName,data.result.filePath);

            //Update the pic
           // $("#userPic").attr('src',data.result.imagePath);

            //set the image name
           // $("#CandidateProfile_image_name").val(data.result.imageName);

            //console.log(data);
        },       
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

Thanks, Faisal Nasir

I think the UI of the file selection dialogue is out of control of Javascript. — Barmar
– Barmar, Commented Jun 3, 2014 at 17:39
I think that is the same stackoverflow.com/questions/13082192/… — Ignacio Laborde
– Ignacio Laborde, Commented Jun 3, 2014 at 17:42
it will disable all the file upload controls. my problem is to disable one of them since i've two file upload controls. — Faisal
– Faisal, Commented Jun 3, 2014 at 17:44

Ferruccio · Accepted Answer · 2019-11-12 20:11:06Z

1

You can disable drag & drop by setting the dropZone option to null.

$('#resumeUpload').fileupload({
    dropZone: null,
    add: function(e, data) {

answered Nov 12, 2019 at 20:11

Ferruccio

101k38 gold badges232 silver badges305 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable Drag and Drop Functionality for jQuery-File-Upload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related