Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using jquery-fileupload plugin (https://github.com/tors/jquery-fileupload-rails) for showing file upload progress in my rails app. The following code below works fine.

In my index.html.erb i have

  <script id="template-upload" type="text/x-tmpl">
  <div class="upload">
    {%=o.name%}
    <div class="progress"><div class="bar" style="width: 0%;"></div></div>
  </div>
  </script>

In my projects js.coffee file i have

$('#import_form').fileupload
    dataType: "json"
    add: (e, data) ->
      data.context = $(tmpl("template-upload", data.files[0]))
      $('#import_form').append(data.context)
      data.submit()
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

But i want the upload to start when i click a button with id import_button instead of automatically. How can i achieve that ?

I tried doing the following, but i get the error message "data is undefined"

$('#import_form').fileupload
    dataType: "json"
    add: (e, data) ->       
      data.context = $(tmpl("template-upload", data.files[0]))
      $('#import_form').append(data.context)
      $("#import_button").off("click").on "click", ->
        data.submit()
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

Please Help Thank You

share|improve this question

1 Answer

up vote 0 down vote

One special callback is the add callback, as it provides a submit method for the data argument, that will start the file upload:

$('#fileupload').fileupload({
    add: function (e, data) {
       data.submit();
    }
});

It's from jQuery Plugin Wiki

So if you don't want to start the upload automatically use add callback, but don't call submit method.

share|improve this answer
 
I have added to my question, where i get data is undefined when i add an onlclick handler. Any way to fix that ? –  joes Nov 19 at 13:09
 
Add if statement if (data) {...} –  Pinal Nov 19 at 13:12
 
Even on adding if i get data undefined –  joes Nov 19 at 13:20
 
The way is shorter. Just add autoUpload : false option on init $().fileupload(...). Remove from your add callback submit and onclick handler and add $("#import_button").on('click', function () { $('#import_form').triggerHandler('fileuploadsubmit') }) –  Pinal Nov 19 at 13:27
 
As per your suggestion i have changed my code to gist.github.com/anonymous/7545762 . Is that correct ?. Its still not working though –  joes Nov 19 at 14:00
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.