jquery fileupload syntax error Type error

Question

With this (jquery for fileupload) script I receive some error, but it's working in wamp in local. For production I need to stop this alert error"

"SyntaxError: missing } after property list
progressall: function (e, data) {"

or in Chrome:

"uncaught syntaxerror unexpected identifier on line 211"

The same line as in firefox.

Does anybody have an idea?

 $(function () {
     $('#fileupload').fileupload({
        dataType: 'json',       
        done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .bar').css(
        'width',
        progress + '%'
     );
    }
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    }
    done: function (e, data) {
        data.context.text('Upload finished.');
    }
    add: function (e, data) {
        data.context = $('<button/>').text('Upload')
            .appendTo(document.body)
            .click(function () {
                $(this).replaceWith($('<p/>').text('Uploading...'));
                data.submit();
            });
    }
    done: function (e, data) {
        data.context.text('Upload finished.');
    }

     });
});

I made few modifications: no error in mozilla but not working

In chrome error (Uncaught TypeError: Cannot call method 'push' of undefined ) and not working

$(function () {
    //declare a "updloadOptions" variable object that will be passed to the plugin constructor method as a parameter. (You can give any name to this object.)
    var updloadOptions = {};

    //set the datatype property to 'json'.
    updloadOptions.dataType = 'json';
    //declare the "done" callback method on "updloadOptions" object.
    updloadOptions.done = function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    };
    //declare the "progressall" callback method on "updloadOptions" object.
    updloadOptions.progressall = function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
        progress + '%');
    };
    //declare the "add" callback method on "updloadOptions" object.
    updloadOptions.add = function (e, data) {
         data.context = $('<button/>').text('Upload')
         .appendTo(document.body)
         .click(function () {             $(this).replaceWith($('<p/>').text('Uploading...'));                
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
        });
    };
    //initialize the component
    $('#fileupload').fileupload(updloadOptions);
});

The Correct script with a syntax error

SyntaxError: missing } after property list
filesContainer: $('.filescontainer')

And I don't ever need filesContainer because I retrieve a second jquery tab with uploadsystem

$(function () {
$('#fileupload').fileupload({
   dataType: 'json',       
   done: function (e, data) {
       $.each(data.result.files, function (index, file) {
           $('<p/>').text(file.name).appendTo(document.body);
       });
   },
   progressall: function (e, data) {
   var progress = parseInt(data.loaded / data.total * 100, 10);
   $('#progress .bar').css(
       'width',
       progress + '%'
    );
   },
   add: function (e, data) {
       data.context = $('<p/>').text('Uploading...').appendTo(document.body);
       data.submit();
   },
   done: function (e, data) {
       data.context.text('Upload finished.')
   },
   add: function (e, data) {
       data.context = $('<button/>').text('Upload')
           .appendTo(document.body)
           .click(function () {
               $(this).replaceWith($('<p/>').text('Uploading...'));
               data.submit();
           });
   },  done: function (e, data) {
       data.context.text('Upload finished.')
   }
   filesContainer: $('.filescontainer') 

});
});

Onur Yıldırım · Accepted Answer · 2015-03-25 13:45:22Z

2

Your script has fundamental mistakes that will produce multiple errors.

You should have commas at the end of each member of the options object that you pass to the .fileupload() plugin.
You have declared duplicate callback methods. done callback is declared 3 times, add callback is declared twice.

So you should either use only one of each duplicate decelerations or merge the code in those duplicates into one. But I see that code inside those callbacks is also duplicate.

Here is the cleaned up version of your code:

<script type="text/javascript">
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css('width', progress + '%');
            },
            add: function (e, data) {
                data.context = $('<p/>').text('Uploading...').appendTo(document.body);
                data.submit();
            }
        });
    });
</script>

And here is a more readable version:

<script type="text/javascript">

    $(function () {

        //declare a "updloadOptions" variable object that will be passed to the plugin constructor method as a parameter. (You can give any name to this object.)
        var updloadOptions = {};

        //set the datatype property to 'json'.
        updloadOptions.dataType = 'json';

        //declare the "done" callback method on "updloadOptions" object.
        updloadOptions.done = function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        };

        //declare the "progressall" callback method on "updloadOptions" object.
        updloadOptions.progressall = function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css('width', progress + '%');
        };

        //declare the "add" callback method on "updloadOptions" object.
        updloadOptions.add = function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        };

        //initialize the component
        $('#fileupload').fileupload(updloadOptions);

    });

</script>

edited Mar 25, 2015 at 13:45

answered Jan 21, 2013 at 13:42

Onur Yıldırım

33.9k14 gold badges86 silver badges99 bronze badges

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

6 Comments

user1997147 Over a year ago

Thank you your explaination is ok but in fact : It 's seem better on firefox : no error or alert but the plugin don't work anymore In Chrome : "Uncaught TypeError: Cannot call method 'push' of undefined firebug-lite.js:30905 logRow firebug-lite.js:30905 logFormatted firebug-lite.js:30894 sysout firebug-lite.js:30842 CssAnalyzer.processAllStyleSheets firebug-lite.js:25751 FBL.Firebug.initialize firebug-lite.js:6289 (anonymous function)" and do not work so I will test yet... :-)

Onur Yıldırım Over a year ago

I suggest you use Firefox with Firebug "extension" until you resolve this issue. And post the full code here so we can help you more. There is no "push" method defined in the code you've posted. But, still, the things I mention in my answer are what you should begin with, because that firebug-lite log is not the only problem with your code.

user1997147 Over a year ago

ok with firefox no error when loading the page. the pics dosesn't appear and their name are list further.. when i click "addfiles" I 've got the good eplorator but after click "open" I ve got "DSC01461.JPG 2.88 MB Error SyntaxError: JSON.parse: unexpected character" ..

Onur Yıldırım Over a year ago

Can you paste the full code that makes the request (and the firebug log of the response)? I think you have some issues within the parameters of the upload-options.

user1997147 Over a year ago

I can't post there all the code : too long perhaps can you give me your email? mine [email protected]

|

Collectives™ on Stack Overflow

jquery fileupload syntax error Type error

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related