Manually Trigger Upload within fineUploaderDnd

Question

I have a problem. I have autoUpload set to false within $('element').fineUploaderDnd();

I can drag and drop files just fine. However, I can't seem to figure out how to manually trigger the upload. I have tried both of the following:

var uploader = $('#droppable').fineUploaderDnd(/*{ ... }*/);
uploader.fineUploaderDnd('uploadStoredFiles'); //Doesnt work
uploader.fineUploaderDnd('addFiles', handleUploads.fineUploaderFiles); //Also doesnt work

Note that handleUploads.fineUploaderFiles is an array of the 'File' objects the plugin returns to me .on('processingDroppedFilesComplete')

They both give me errors saying they don't support that. I've also tried various methods of using both the Dnd thing for drag/drop and the normal jquery fineUploader for 'addFiles' but that also doesn't seem to work.

What am I missing?

Mark Feltner · Accepted Answer · 2013-07-31 20:38:01Z

2

These lines aren't going to work:

uploader.fineUploaderDnd('uploadStoredFiles'); //Doesnt work
uploader.fineUploaderDnd('addFiles', handleUploads.fineUploaderFiles); //Also doesnt work

Because you can only call the uploadStoredFiles and addFiles methods on instances of FineUploader. It appears you are calling these methods on instances of the DnD module.

There are no such options in the standalone Fine Uploader DnD module. The standalone drag-and-drop module doesn't upload anything. It is meant to be used alongside FineUploaderBasic mode instance (note that you can use it outside of Fine Uploader entirely if you want to). This module is provided for FineUploaderBasic users who want to integrate drag & drop support easily into their app. If you are using FineUploader mode, drag & drop is already integrated for you, however.

To achieve this in basic mode

First, add an instance of FineUploader:

var uploader = $("#uploader").fineUploader({ uploaderType: 'basic' /*, ... */ })

Next, add an upload button:

var uploadButton = $("#upload-button").on('click', function () {
    $("#uploader").fineUploader('uploadStoredFiles');
});

Then, instantiate your drag and drop module (note that this is separate from FineUploader's instance!):

var dnd = $('#droppable').fineUploaderDnd({
     /* custom options */            
}).on('processingDroppedFilesComplete', function (event, files) {
    uploader('addFiles', files); //this submits the dropped files to Fine Uploader
});

For reference, please see the following:

Difference between FineUploaderBasic & FineUploader mode
Documentation on the standalone DnD module
API for FineUploaderBasic mode

edited Jul 31, 2013 at 20:38

answered Jul 31, 2013 at 17:07

Mark Feltner

2,0411 gold badge12 silver badges23 bronze badges

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

3 Comments

Jeff Over a year ago

Thanks for the response. I didn't realize the DnD module is supposed to be used in combination with the Basic module. In terms of your answer, what is fineUploaderBasicInstance supposed to be? I tried setting that to both $('#uploader') as well as $('#uploader').fineUploader({uploaderType: 'basic'}), but neither seem to work.

Mark Feltner Over a year ago

@Jeff, my fault. Instead of fineUploaderBasicInstance it should be either uploader or $("#uploader").fineUploader

Jeff Over a year ago

turns out it was a little different for the jQuery version, I had to use $('#uploader').fineUploader('addFiles', files);. That worked perfectly. Thanks for your help.

Collectives™ on Stack Overflow

Manually Trigger Upload within fineUploaderDnd

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related