Skip to content
This repository has been archived by the owner on Jun 24, 2023. It is now read-only.

Is there a way to upload files included in wizards #56

Open
lgt opened this issue Dec 27, 2013 · 8 comments
Open

Is there a way to upload files included in wizards #56

lgt opened this issue Dec 27, 2013 · 8 comments
Assignees

Comments

@lgt
Copy link

lgt commented Dec 27, 2013

I try to upload files but doesn't seems to work or in my case I don't know what is the workaround.

wizard.on("submit", function(wizard) {

        var formData = new FormData($('form:file'));
        alert(); //no alert
        console.log(formData); //no logs

    });
@ghost ghost assigned gjrtimmer Dec 29, 2013
@jogaco
Copy link

jogaco commented Jan 3, 2014

I liked the wizard but didn't need the modal features, so I used it with a standard submit. One of my steps has a file upload.
I tweaked the implementation like this. Might not be the best one but worked:

var wizard = $('#my-wizard').wizard({ showCancel: true, progressBarCurrent: true });
wizard._defaultSubmit = function(wizard) {
  $('form').submit();
};
wizard.on("submit", wizard._defaultSubmit);

@lgt
Copy link
Author

lgt commented Jan 3, 2014

thank you for the feedback!! Actually what you suggest to override the default wizzard submit and is good like, however I was trying the following as you suggested

 wizard._defaultSubmit = function(wizard) {
            jQuery('form').submit(function( event ) {
                alert( "test submit" );
                event.preventDefault();
            });
        };
        
        wizard.on("submit", wizard._defaultSubmit);

and I expect to get an alert but is not happening. No errors in firebug are reported

@jogaco
Copy link

jogaco commented Jan 4, 2014

You need to enclose your wizard within form tags with the corresponding url. It should work.
For instance, bearing in mind you want to upload files:

<form method="post" id="myform" enctype="multipart/form-data" action="/myaction">
   your wizard markup here
</form>

Let me know.

@lgt
Copy link
Author

lgt commented Jan 4, 2014

thanks again for your feedback. The wizzard has a form tag already this one should be changed? Is there a way to upload files via ajax on form submit?

@jogaco
Copy link

jogaco commented Jan 4, 2014

I did comment out the

<form> 

tags in the bootstrap-wizard.js template code. Try it. As you need to do file upload your form must include the multipart encoding. As for ajax file upload, that's a different beast. I didn't need it so I opted for a simpler solution.

@lgt
Copy link
Author

lgt commented Jan 4, 2014

okay let me give a try this issue hangs on my neck almost for 1 week and thanks again for your nice feedback

@jogaco
Copy link

jogaco commented Jan 4, 2014

I'd recommend you too to use bootstrap-fileupload.js from https://github.com/jasny/bootstrap/releases/tag/v2.3.0-p4 as it replaces the ugly file upload button with a nice bootstrap styled button, and offer the possibility of image preview in some browsers as well.

@lgt
Copy link
Author

lgt commented Jan 4, 2014

I made a switch from jasny to blueimp and I try now to use it for multiple file uploads with other form elements.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants