CODEWITHSUNDEEP
fine-uploader
jjspierx
jjspierx

Reputation: 440

Error using addInitialFiles Method

I am having an issue trying to use the addInitialFiles method listed here:

http://docs.fineuploader.com/branch/master/api/methods.html#addInitialFiles

I get a javascript error in my chrome dev console that says:

1032:381 Uncaught TypeError: uploader.addInitialFiles is not a function

This is the code I use to initialize Fine Uploader, and make the call the addInitialFiles():

<script type="text/javascript">
$(function () {
    var uploader = $('#fine-uploader').fineUploaderS3({
        request: {
            endpoint: "myfineuploaderbucket.com.s3.amazonaws.com",
            accessKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
        },
        signature: {
            endpoint: "/SignatureHandler",
            version: 4
        },
        validation: {
            allowedExtensions: ["gif", "jpeg", "jpg", "png", "bmp"],
            acceptFiles: "image/gif, image/jpeg, image/png, image/bmp",
            sizeLimit: 5000000,
            itemLimit: 3
        },
        retry: {
            enableAuto: true
        },
        deleteFile: {
            enabled: true,
            endpoint: "/DeleteImage/[email protected]",
            method: 'POST',
        },
        paste: {
            targetElement: $(document),
            promptForName: true
        },
        uploadSuccess: {
            endpoint: "/UploadSuccessful/[email protected]"
        },
        iframeSupport: { //This path needs to be a blank HTML page and is used for fine-uploader to support IE9 and older
            localBlankPagePath: "/Blank"
        },
        objectProperties: {
            acl: "public-read",
            key: function (fileId) {
                var re = /(?:\.([^.]+))?$/;
                fileExt = re.exec($("#fine-uploader").fineUploader("getName", fileId))[0];
                uuid = $("#fine-uploader").fineUploader("getUuid", fileId);
                filename = uuid + fileExt;
                key = "/@ViewBag.Id + "/" + filename;
                return key;
            }
        },
        scaling: {
            hideScaled: true,
            sizes: [
                { name: "small", maxSize: 350 },
                { name: "large", maxSize: 800 },
            ]
        },
        callbacks: {
            onDelete: function (id) {
                if (id == 2) {
                    $("#fine-uploader").fineUploader("deleteFile", 0);
                    $("#fine-uploader").fineUploader("deleteFile", 1);
                }
            },
        },
    });

    uploader.addInitialFiles([
            {
                "name": "a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
                "uuid": "a3ef2360-881d-452c-a5f6-a173d5291066",
                "size": "66000",
                "thumbnailUrl": "https://s3.amazonaws.com/myfineuploaderbucket.com/1032/ecdca7bb-fb02-4072-b526-4e51cedb1f2b.jpg",
                "s3Key": "1032/a3ef2360-881d-452c-a5f6-a173d5291066.jpg",
                "s3Bucket": "myfineuploaderbucket.com"
            }
    ]);

Is there something that I am doing wrong? Is addInitialFiles not a method, but an option that needs to be initialized when creating the Fine Uploader instance? I have tried adding "addInitialFiles" to the options of the Fine Uploader instance as well, and I do not receive a javascript error, but it does not load the initial file either.

I am using the latest version, 5.7.1.

Upvotes: 3

Views: 1894

Answers (1)

Ray Nicholus
Ray Nicholus

Reputation: 19921

Just like any other jQuery plug-in, the Fine Uploader jQuery wrapper returns a jQuery-wrapped element. This means that you are attempting to call an addInitialFiles method on a jQuery object. Of course, this method does not exist. If you really want to continue using the jQuery wrapper, you must change uploader.addInitialFiles(...) to uploader.fineUploaderS3('addInitialFiles', ...).

But you should know that you don't need jQuery for any of this, especially when using Fine Uploader. There is no benefit to using the jQuery wrapper with Fine Uploader, and you can fix your code simply by forgoing the wrapper (and saving a few bytes) and changing the first couple lines of your Fine Uploader initialization to:

var uploader = new qq.s3.FineUploader({
   element: document.querySelector('#fine-uploader'),
   ...
})

Now, uploader.addInitialFiles works as you would expect.

Upvotes: 3

Related Questions