• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Upload a File Using jQuery

 
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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:

 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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:

 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Look at their example at the bottom of the page: http://jquery.malsup.com/form/#options-object

Eric
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Your ajaxForm call is malformed so it is not instrumenting the form, which is getting submitted normally.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That's the usual way to do it. ajaxForm() will submit the form to whatever url is specified by action.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It appears that the code in the head tag of the child div JSP is not firing.
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Worked great. I think it must have been the $('#ft') that it could not find.

Anyway, thanks for the help.
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
I can't beleive you just said that. Now I need to calm down with this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic