• Post Reply Bookmark Topic Watch Topic
  • New Topic

HTML Form, textArea + image

 
Robert Insanovation White
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Please, I want to understand how is it possible to send data (image + text) along a single form. Here is my code:



It's returning null for the text area parameter.

Simply putting: a text area with a browse button for a picture, and a submit button to send both objects.
Thank you.
 
K. Tsang
Bartender
Posts: 3610
16
Firefox Browser Java Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Since you are using one form, why do you need to have 2 "submit" buttons?

2 buttons make 2 forms/actions.
 
Robert Insanovation White
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi K. Tsang,

I used 2 submits because I am confused how to retrieve the "description" parameter in the doPost()... it returns null
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65530
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You need one submit only.

The problem is likely in your server code -- code to deal with multipart forms is different from "regular" forms. How are you processing this form on the server? With a servlet?
 
Robert Insanovation White
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault, indeed with a Servlet:




And the problem is with the "description" parameter, it just prints null.

And my current form is:
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65530
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It looks as if you are using the Apache commons file upload library. This is important information that you should include in your post.

You cannot use getParameter() (and its related methods) with multipart forms. You need to use the API provided by the upload library.
 
Robert Insanovation White
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you. Can you please give me some other advice on getting the "description" parameter?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65530
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You'll need to consult the Apache upload API's javadoc or tutorials.
 
Arun Giridhar
Ranch Hand
Posts: 181
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
whats wrong having 2 submit one for uploading photo and later complete submit , one making ajax call to load the file to temp file of server other making a normal request. For example in a application form you upload photo and photo gets displayed in that form later you fill other details like bank details,personal info and do you a complete submit.
 
Stefan Evans
Bartender
Posts: 1822
10
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Nothing is wrong with that if that is your design.
In fact thats fairly standard for most webmail interfaces with attachments :-)


@Robert: What is printed out by this code?

Is "Description" included in that?
Check your server logs for where it is printing to.

I'm pretty sure you should be able to get all your parameters via the collection of FileItems. Use the isFormField() method to tell if it a parameter, or the uploaded file.
http://commons.apache.org/proper/commons-fileupload/using.html has a snippet like:


 
Robert Insanovation White
Ranch Hand
Posts: 39
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Stefan,

I indeed followed your idea about "item.isFormField()" and it worked gracefully.

Thank you for your support, I appreciate it.
 
peter poman
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Stefan Evans wrote:Nothing is wrong with that if that is your design.
In fact thats fairly standard for most webmail interfaces with attachments :-)


@Robert: What is printed out by this code?

Is "Description" included in that?
Check your server logs for where it is printing to.

I'm pretty sure you should be able to get all your parameters via the collection of FileItems. Use the isFormField() method to tell if it a parameter, or the uploaded file.
http://commons.apache.org/proper/commons-fileupload/using.html has a snippet like:




Thanks for sharing the info, Stefan. Very Useful.
 
Tim Holloway
Bartender
Posts: 18415
58
Android Eclipse IDE Linux
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Note: use of system.out/system.err is discouraged in webapps. Use a logger, instead.

To understand how you can upload text and an image at the same time using a single form, you have to understand what's being sent.

The server cannot reach down and access the image file. The image file (or more correctly, the data in the file) must be sent to the server. HTTP servers are strictly client-sends/server responds with a 1-to-1 request/response for each cycle.

So to send multiple things, you have to make them look like 1 thing. The HTTP and HTML standards (RFPs) allow for that via a mechanism called multi-part MIME encoding. Although MIME stands for something like Message Internet Mail Extensions, and was originally designed to allow emails to have attachments (including images), the format proved so useful that it was adopted for web communications as well.

Basically, MIME understands that the content could be bounced through multiple machines and the source and destination machines could have very different characteristics (byte order, character encoding and so forth). So MIME allowed raw binary content to be translated to a 6-bit code where every possible combination corresponded to a displayable character. When you upload a binary image file, the client converts the bits to characters using the MIME encoding algorithm and inserts the results into the request data stream along with some delimiting information and a Content-Type indicator (for example, image/jpeg).

Because this is a multi-part transmission, the sum total of the request data stream actually includes the headers (including cookies), form information (it's a POST for file uploads), and the contents of the form fields. That includes the file "field" with its associated MIME data.

On the receiving (server) end, the incoming data stream can then be parsed apart to retrieve the form's text and upload file data as discrete items. MIME encoding is reversed (decoded) to obtain the original bits.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!