aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Upload a File Using jQuery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Upload a File Using jQuery" Watch "Upload a File Using jQuery" New topic
Author

Upload a File Using jQuery

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
I am needing a way to upload a file from a web page without having to submit the form. Is there an AJAX solution?

The server I am uploading to is an smb server.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Ajax itself has no capability to upload files.

One of the beauties of jQuery, though, is that it can handle such things in a transparent manner.

If you use the jQuery Form Plugin, and submit a multi-part form using its Ajax methods, it will "do the right thing" and submit a normal form request to an iframe.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:Ajax itself has no capability to upload files.

One of the beauties of jQuery, though, is that it can handle such things in a transparent manner.

If you use the jQuery Form Plugin, and submit a multi-part form using its Ajax methods, it will "do the right thing" and submit a normal form request to an iframe.


The following works great except the submitting page disappears and is replaced by a page with teh File Succedded Message on it.
This is on my parent form which has several div tags:



This is div tag where I do the upload:



My servlet code:

Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Try implementing the success callback. That way, you deal with what happens with the returned data instead of the plugin trying to figure it out for you. This is all in their documentation.


GenRocket - Experts at Building Test Data
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Gregg Bolinger wrote:Try implementing the success callback. That way, you deal with what happens with the returned data instead of the plugin trying to figure it out for you. This is all in their documentation.


I thought that was what the code in my parent page was doing:

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Look at their example at the bottom of the page: http://jquery.malsup.com/form/#options-object

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Your ajaxForm call is malformed so it is not instrumenting the form, which is getting submitted normally.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:Your ajaxForm call is malformed so it is not instrumenting the form, which is getting submitted normally.


This is what I have now and it will not produce an uploaded file at all:

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

What does inspecting the HTTP request show? Is it being fired off at all? If so, is it a properly formed multi-part request?

(P.S. HttpFox is a good tool for inspecting requests.)
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:What does inspecting the HTTP request show? Is it being fired off at all? If so, is it a properly formed multi-part request?

(P.S. HttpFox is a good tool for inspecting requests.)


It is not firing as you suspected.

It only fires when I have

'/DrawingPDMW1/SubmitDescriptionsServlet6'

set as the action parameter in the form tag.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

That's the usual way to do it. ajaxForm() will submit the form to whatever url is specified by action.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:That's the usual way to do it. ajaxForm() will submit the form to whatever url is specified by action.


But I thought that the

url: '/DrawingPDMW1/SubmitDescriptionsServlet6'

in the options object would take the place of the action part of the form tag.

At any rate upon submit I still get a new page.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

If you are getting a new page, the form is being submitted "normally", which tells me that you ajaxForm call still isn't "taking".

Perhaps you could post (neatly) the relevant code and form markup.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Bear Bibeault wrote:If you are getting a new page, the form is being submitted "normally", which tells me that you ajaxForm call still isn't "taking".

Perhaps you could post (neatly) the relevant code and form markup.


For lack of a better way to explain my page it is a compound of divs within divs populated JSP with jQuery.load.
I hope this is neat enough.

I have a parent JSP. This page contains div tags that use jQuery.load:


This is the upload JSP(it is a div of one of the divs in the parent):

I have this code in the head tag:



This is the form code of the same JSP:


This is my servlet code:

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
It appears that the code in the head tag of the child div JSP is not firing.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Steve Dyke wrote:It appears that the code in the head tag of the child div JSP is not firing.


Hm, when pulling snippets of code into a JSP via jquery, I usually don't have a head tag. An HTML page should only contain 1. That might be your problem. Ha, the part of your code you didn't show us.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Gregg Bolinger wrote:
Steve Dyke wrote:It appears that the code in the head tag of the child div JSP is not firing.


Hm, when pulling snippets of code into a JSP via jquery, I usually don't have a head tag. An HTML page should only contain 1. That might be your problem. Ha, the part of your code you didn't show us.


I don't understand. On my main(parent) JSP page I have a div. I use jQuery.load to fire a Servlet which pushes a repsponse to a JSP thus populating the div.

Are you saying the second JSP does not need a head tag? And if so where do I put a required taglib if the page is using JSTL?
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

A taglib declaration isn't required to be placed in the HEAD element. Just put it at the top. It doesn't really matter because it is removed from the final HTML anyway.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Gregg Bolinger wrote:A taglib declaration isn't required to be placed in the HEAD element. Just put it at the top. It doesn't really matter because it is removed from the final HTML anyway.


Thanks for taking time to help me with this. Plaese be patient with me, I really need to get this to work. Have spent more than a day on this one issue. However it is still is not working. This will not produce an uploaded file.

Something I just thought about, the "ft" form is not a part of the dom until the div gets populated by several clicks after the parent JSP loads.

I have moved this to the parent JSP and I am getting the first alert message:



This is the JSP that populates the parent div:



I have already posted the Servlet code.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
This is wrong:



You should not be catching the submit of the form! The plug-in does that itself. You just add the ajaxForm on the page load with options.

If you need to do validation of some sort, that should be handled with the beforeSubmit

Eric
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Alright, this code works for me as expected. Maybe we can compare some differences?

Parent JSP


JSP loaded via $.load


My controller simply renders "ok" as a response which shows up under my form in the 'result' div. No page refresh.

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1466
    
    1
Worked great. I think it must have been the $('#ft') that it could not find.

Anyway, thanks for the help.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

Steve Dyke wrote:Worked great. I think it must have been the $('#ft') that it could not find.

Anyway, thanks for the help.


Well, part of the problem is that your jquery selector for the form is on the parent JSP. Any future DOM elements that come into existence won't matter. You'd have to trigger that code once the new stuff comes in. There is a $.live feature to help with this as well as a liveQuery plugin. But that is somewhat beside the point. I just wanted to explain to you why your selector didn't work in the first place; because the form didn't exist yet.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: Upload a File Using jQuery