Search code examples
jqueryamazon-s3fine-uploader

Fineuploader plugin doesn't work - what am I missing?

I'm trying to use Fineuploader S3 to upload straight to Amazon from the client. I have the following file referenced:

s3.jquery.fineuploader-4.4.0.min.js

And I'm using the default template:

<div id="fineUploader"></div>

    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Browse...</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                    <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                    <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>

And initializing like this:

$('#fineUploader').fineUploaderS3({
            debug: true,
            autoUpload: true,
            request: {
                endpoint: "http://mybucket.s3.amazonaws.com",
                accessKey: "MY_AWS_PUBLIC_ACCESS_KEY"//,
                //params: { category: "foobar" }
            },
            signature: {
                endpoint: "/s3/signtureHandler"
            },
            uploadSuccess: {
                endpoint: "/s3/uploadSuccessful"
            }, // etc etc etc.

It seems that the script works, because I see a Browse button that lets me pick files with a file dialog. But as soon as I select a file and click 'Open', nothing happens. I thought it would try to start the upload, but it just closes the file dialog.

Am I missing something here? What do I need to do in order to upload the file(s)?

Thanks!

EDIT: Here is the output from the browser console:

[Fine Uploader 4.4.0] Parsing template
[Fine Uploader 4.4.0] Template parsing complete
[Fine Uploader 4.4.0] Rendering template in DOM
[Fine Uploader 4.4.0] Template rendering complete
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. (jquery-1.10.2.js:5388)

Solution

  • Well, I seem to have figured it out. It appears that somehow the events from FineUploader didn't bubble up through my DOM. This is because I had the upload button inside of a Knockout JS 'with' binding, which I guess was swapping out DOM elements behind the scenes. Getting rid of the 'with' binding solved the issue.

    Thank you all so much for helping! Much appreciated!