calling Valums Ajax uploader from other DOM element

Posted by Marc on Stack Overflow See other posts from Stack Overflow or by Marc
Published on 2011-04-27T16:07:00Z Indexed on 2011/06/27 16:22 UTC
Read the original article Hit count: 478

Filed under:
|
|
|

I'm facing a problem with the valums Ajax File upload.

Since the plugin is working perfectly after a few modifications on the server side, I cannot implement a specific behavior.

My DOM is composed with an input file plus the container to instantiate the fileuploader buttons.

What I want is to be able to fire the fileuploader plugins when clicking on the input:file[name="upload-file"].

...
<div id="upload-accepted">
  <fieldset>
    <label for="upload-file">Select a file:</label>
    <input type="file" name="upload-file" id="upload-file"/>
    <noscript>
      <p>Please enable JavaScript to use file uploader.</p>
    </noscript>
  </fieldset>
  <div id="upload-container">
  </div>
</div>
...
<script type="text/javascript">
  $(function() {
      var uploader = new qq.FileUploader({
      action: '/file-upload',
      element: document.getElementById('upload-container'),
      onSubmit: function(id, filename){...},
      onComplete: function(id, fileName, responseJSON){...}
    });
  });
</script>

I have tried to add the following on the script but it don't works

$("#upload-file").live('change', function(event) {
  event.preventDefault();
  $('.qq-upload-button').trigger('click');
  return false;
});

Any clues?

Thanks in advance!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery