Browse File Error: no such method 'process' for fileupload widget instance

[Mark Rosenthal]

I am using JQuery-FileUpload-8.6.1 with JQuery-1.9.1 and JQuery-UI-1.10.3.  My form looks like this:

<code>

<form method="post" id="fileupload" enctype="multipart/form-data" action="/BLS.MerchantPortal/Reporting/SaveReport" novalidate="novalidate"><input type="hidden" value="TestMerchant" name="BusinessName" id="BusinessName"><input type="hidden" value="" name="StoreId" id="StoreId">                        <ul class="form">

                            <li>

                                <h2>

                                    Upload Reports</h2>

                            </li>

                            <li>

                                <div class="row fileupload-buttonbar">

                                    <div class="span7">

                                        <!-- The fileinput-button span is used to style the file input field as button -->

                                        <span class="btn btn-success fileinput-button">

                                            <i class="icon-plus icon-white"></i>

                                            <span>Add files...</span>

                                            <input type="file" multiple="" name="files[]">

                                        </span>

                                        <button class="btn btn-primary start" type="submit">

                                            <i class="icon-upload icon-white"></i>

                                            <span>Start upload</span>

                                        </button>

                                        <button class="btn btn-warning cancel" type="reset">

                                            <i class="icon-ban-circle icon-white"></i>

                                            <span>Cancel upload</span>

                                        </button>

                                        <button class="btn btn-danger delete" type="button">

                                            <i class="icon-trash icon-white"></i>

                                            <span>Delete</span>

                                        </button>

                                        <input type="checkbox" class="toggle">

                                        <!-- The loading indicator is shown during file processing -->

                                        <span class="fileupload-loading"></span>

                                    </div>

                                    <!-- The global progress information -->

                                    <div class="span5 fileupload-progress fade">

                                        <!-- The global progress bar -->

                                        <div aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">

                                            <div style="width:0%;" class="bar"></div>

                                        </div>

                                        <!-- The extended global progress information -->

                                        <div class="progress-extended">&nbsp;</div>

                                    </div>

                                </div>

                                <!-- The table listing the files available for upload/download -->

                                <table class="table table-striped" role="presentation"><tbody class="files"></tbody></table>

                            </li>

                        </ul>

                    </form>

</code>

And my Binding:

<code>

        // Initialize the jQuery File Upload widget:

        $('#fileupload').fileupload({

            url: fileUploadUrl,

            acceptFileTypes: /(twbx)$/i // Allowed file types

        });

</code>

No errors on page load, and the document becomes a valid drop target.  However, when I select a file or drop a file, I see this error in the console: Error: no such method 'process' for fileupload widget instance

It happens at this place in the jquery.fileupload-ui.js code:

<code>

            // The add callback is invoked as soon as files are added to the fileupload

// widget (via file input selection, drag & drop or add API call).

// See the basic file upload widget for more information:

add: function (e, data) {

var $this = $(this),

that = $this.data('blueimp-fileupload') ||

$this.data('fileupload'),

options = that.options,

files = data.files;

data.process(function () {

return $this.fileupload('process', data);

</code>

Looks to me like something isn't configured correctly.  Any help is appreciated!

[Oliver Kopp]

Dear Mark,

A workaround is to include "jquery.fileupload-process", which defines the data.process() function.

I think, this is a bug in jQuery-File-Upload 8.7.1.

Cheers,

Oliver