Solved

JSP Struts File Upload With Other Form Fields

Posted on 2013-01-08
16
1,675 Views
Last Modified: 2013-01-10
Hi,

I want to write a JSP/Struts 1.x code to upload a file along with other form fields.

Something like this:

<input type="text" name="name" />
<select name="edu">
      <option>....</option>
      <option>....</option>
      <option>....</option>
</select>
<input type="file" name="fileupld" />

Important thing is that these three fields can be added multiple times to the form, just like add new row for adding more records.

I do that using simple javascript:

function addRow() {
                        var tbl = document.getElementById('tbl');
                        var Row = parseInt(document.getElementById('hsb').value);
                        var temprow=Row+1;
                        
                        var mainRow = tbl.insertRow(temprow);
                        var trId ="tr"+temprow;
                        mainRow.id=trId;
                        
                        var td =  document.createElement("td");
                        td.colSpan='3';
                        var table =  document.createElement("table");
                        table.border="0";
                        table.cellPadding="0";
                        table.cellSpacing="1";
                        table.width="100%";
                        var newRow = table.insertRow(0);
                        
                        var sec = "'risk'";
                        var newCell = newRow.insertCell(0);
                        newCell.width="10%";
                        newCell.innerHTML = '<input type="text" class="input" name="regnNo'+temprow+'" id="regnNo'+temprow+'" value="" size="12" maxlength="12 ">';
                        
                        var newCell = newRow.insertCell(1);
                        newCell.width="10%";
                        newCell.innerHTML = '<select class="input" name="regnYr"'+temprow+' id="regnYr'+temprow+'" ><option value="2001">2001</option></select>&nbsp;'+
                        '<select name="regnMonth'+temprow+'" class="input" id="regnMonth'+temprow+'"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option>'+
                        '<option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option>'+
                        '<option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>';  
                         
                        var newCell = newRow.insertCell(2);
                        newCell.width="15%";
                        newCell.innerHTML = '<input type="file" class="input" name="image'+temprow+'" id="image'+temprow+'" value="Select File" />';  
                              
                        td.appendChild(table);
                        mainRow.appendChild(td);
                         
                        document.getElementById('hsb').value=temprow;
                  }


The above addRow is working fine and I am able to generate multiple rows.

But, when I try to submit the for I am not getting all the fields to my servlet.

I don't know what is happening.

Can any of you give me a simple solution how to upload the file as well as other form fields with multiple rows.

Thanks
0
Comment
Question by:arjunarajan
  • 7
  • 6
  • 2
16 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38757943
in servlet read like this .i changed the form to read the values like this in servlet.

request.getParameterValues("regnNo");
request.getParameterValues("regnYr");
request.getParameterValues("regnMonth");
request.getParameterValues("image");


<script>

function addRow() {
                        var tbl = document.getElementById('tbl');
                        var Row = parseInt(document.getElementById('hsb').value);
                        var temprow=Row+1;
                        
                        var mainRow = tbl.insertRow(temprow);
                        var trId ="tr"+temprow;
                        mainRow.id=trId;
                        
                        var td =  document.createElement("td");
                        td.colSpan='3';
                        var table =  document.createElement("table");
                        table.border="0";
                        table.cellPadding="0";
                        table.cellSpacing="1";
                        table.width="100%";
                        var newRow = table.insertRow(0);
                        
                        var sec = "'risk'";
                        var newCell = newRow.insertCell(0);
                        newCell.width="10%";
                        newCell.innerHTML = '<input type="text" class="input" name="regnNo" id="regnNo'+temprow+'" value="" size="12" maxlength="12 ">';
                        
                        var newCell = newRow.insertCell(1);
                        newCell.width="10%";
                        newCell.innerHTML = '<select class="input" name="regnYr" id="regnYr'+temprow+'" ><option value="2001">2001</option></select>&nbsp;'+
                        '<select name="regnMonth" class="input" id="regnMonth'+temprow+'"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option>'+
                        '<option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option>'+
                        '<option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>';   
                          
                        var newCell = newRow.insertCell(2);
                        newCell.width="15%";
                        newCell.innerHTML = '<input type="file" class="input" name="image" id="image'+temprow+'" value="Select File" />';  
                              
                        td.appendChild(table);
                        mainRow.appendChild(td);
                          
                        document.getElementById('hsb').value=temprow;
                  }
</script>

<form>
<table id='tbl'>
<tr>
<td><input type='button' name='submit' value='submit' onclick='addRow()'></td>
</tr>
<tr>
<td><input type='hidden' id='hsb' value='0'></td>
</tr>
</table>

Open in new window

0
 

Author Comment

by:arjunarajan
ID: 38758652
Hi,

My requirement is to read all the parameter including the file that uploaded.

i.e., from multiple row inputs, I want to save the records as such in the DB along with uploading the file to a specific folder.

It would be useful if you can provide some code snippets.

<input type='button' name='submit' value='submit' onclick='addRow()'>

The above code change looks like the submit and addRow both are in same button action.

In my UI, I have a separate button to add row and submit the form.

Thanks
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38758680
in the action servlet you can read the values like this.

request.getParameterValues("regnNo");
request.getParameterValues("regnYr");
request.getParameterValues("regnMonth");
request.getParameterValues("image");


<form name='frm'  action='actionservlet'>
<input type='button' name='submit' value='addRow'  onclick='addRow()'>
<input type='submit' name='submit' value='formsubmit' >
</form>
0
 

Author Comment

by:arjunarajan
ID: 38758690
Will the request.getParameterValues(...) method read the multipart content like a file object?

Or, I need to read the file object differently?

whether I need to change the content-type or encoding for the JSP page.?
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38758724
search in google on multipart while uploading the file .you will get lot of answers.

you
request.getParameterValues("image") .
 will get the file name and need to read the file contents separately..
0
 

Author Comment

by:arjunarajan
ID: 38759106
the above code does not handle the multipart content which is required in my case

my requiremed is to upload a file as well as the other fields from the form.
0
 
LVL 26

Assisted Solution

by:mrcoffee365
mrcoffee365 earned 200 total points
ID: 38760402
You know you can only upload 1 file at a time in http, right?  So if you're trying to load a file for each row in your table, something won't work right.

Have you searched for ways to upload files using struts?  This example seems good:
http://www.mkyong.com/struts/struts-file-upload-example/

Your submit is via the normal page, and not Ajax, right?  There are workarounds for Ajax, and there are some advanced features in some browsers (not IE) which do appear to work with Ajax, but the short answer is -- don't use Ajax.  And do 1 at a time if you're doing normal http, and not a flash upload.

jQuery has some plugins which do complex javascript to look as if they're uploading multiple files, but they're problematic in some browsers.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Accepted Solution

by:
arjunarajan earned 0 total points
ID: 38761912
http://iam-rakesh.blogspot.com/2010/08/file-uploading-using-servlets-jsp-and.html

Above url has a good example for implementing the file upload using JSP & Servlets which helped me to resolve my issue.

Hence, I am closing this question myself
0
 

Author Comment

by:arjunarajan
ID: 38761939
I've requested that this question be closed as follows:

Accepted answer: 0 points for arjunarajan's comment #a38761912
Assisted answer: 200 points for mrcoffee365's comment #a38760402

for the following reason:

I found a most appropriate solution on web search and also provided the URL of the page where I found the solution.
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38761936
but i have given solution for reading values in servlet.


request.getParameterValues("regnNo");
request.getParameterValues("regnYr");
request.getParameterValues("regnMonth");
request.getParameterValues("image");
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38761940
but i have given solution for reading values in servlet.


request.getParameterValues("regnNo");
request.getParameterValues("regnYr");
request.getParameterValues("regnMonth");
request.getParameterValues("image");
0
 

Author Comment

by:arjunarajan
ID: 38762412
my requirement was to handle multipart content and form data which i mentioned in my question but as per your solution, the multipart content can't be handled.

only the file name will be read which is no way useful for me.

i have mentioned this in my earlier post clearly:

"the above code does not handle the multipart content which is required in my case

my requiremed is to upload a file as well as the other fields from the form. "
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38762422
but in your Q you said it should handle other fields as well in the from apart from uploading a file.
0
 
LVL 26

Expert Comment

by:mrcoffee365
ID: 38763754
chaituu:  you really answered the wrong question.  I don't think you've ever written a servlet which loads data from a file upload page, because you would have known that request.getParameter does not work in that case.
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 38765940
mrcoffee365,

my assumtion is in the user form after user entered the form fields values including the file upload field and then user submits the page then we can get the values using  request.getParameterValues method.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn how to implement Singleton Design Pattern in Java.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now