CODEWITHSUNDEEP
jqueryjquery-uifile-uploadjquery-file-upload
robbyc73
robbyc73

Reputation: 23

Jquery file upload not initialized issue

I have been experimenting with Jquery file uploads, using the following test code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<div class="container">  
 <!-- Button to select & upload files -->
  <span class="btn btn-success fileinput-button">
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]">
</span>


 <!-- The global progress bar -->
 <p>Upload progress</p>
<div id="progress" class="progress progress-success progress-striped">
<div class="bar"></div>
</div>



  <!-- The list of files uploaded -->
  <p>Files uploaded:</p>
  <ul id="files"></ul>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="jquery/vendor/jquery.ui.widget.js"></script>
 <script src="jquery/jquery.iframe-transport.js"></script>
 <script src="jquery/jquery.fileupload.js"></script>
 <script>

  <!-- JavaScript used to call the fileupload widget to upload files -->

    // When the server is ready...
$(function () {
    'use strict';

    // Define the url to send the image data to
    var url = 'fileAddJquery.php';

    // Call the fileupload widget and set some parameters

    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            // Add each uploaded file name to the #files list
            $.each(data.result.files, function (index, file) {
                $('<li/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            // Update the progress bar while files are being uploaded
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });
});


</script>
</div>
</body> 
</html>

The html renders fine but when i upload a file it fails with the following message:

Error: cannot call methods on fileupload prior to initialization; attempted to call method 'option'

Even if i make a simple initialization call as explained at the top of the page here: https://github.com/blueimp/jQuery-File-Upload/wiki/API#initialization leaving out the rest of the javascript code it throws exactly the same error. Have tried wrapping in document ready also to no avail.

From my reading on the web if you are simply initializing and not performing any method calls then this error shouldn't occur, perhaps could there be an issue with the libraries im using?

Thanks in advance.

Upvotes: 0

Views: 2184

Answers (2)

Giangimgs
Giangimgs

Reputation: 1200

It seems the bug appears because Ajax form is not loaded

This code inside jquery.uploadfile.js

if($.fn.ajaxForm == undefined) {
    $.getScript(("https:" == document.location.protocol ? "https://" : "http://") + "malsup.github.io/jquery.form.js");
}

I recommend you download jquery.form.js and import it into jquery.uploadfile.js

Upvotes: 0

robbyc73
robbyc73

Reputation: 23

Unable to resolve issue encountered with JQuery File upload, ended up using PLUpload http://www.plupload.com/ instead

Upvotes: 0

Related Questions