JSP Struts File Upload With Other Form Fields

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
arjunarajanAsked:
Who is Participating?
 
arjunarajanConnect With a Mentor Author Commented:
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
 
chaitu chaituCommented:
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
 
arjunarajanAuthor Commented:
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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
chaitu chaituCommented:
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
 
arjunarajanAuthor Commented:
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
 
chaitu chaituCommented:
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
 
arjunarajanAuthor Commented:
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
 
mrcoffee365Connect With a Mentor Commented:
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
 
arjunarajanAuthor Commented:
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
 
chaitu chaituCommented:
but i have given solution for reading values in servlet.


request.getParameterValues("regnNo");
request.getParameterValues("regnYr");
request.getParameterValues("regnMonth");
request.getParameterValues("image");
0
 
chaitu chaituCommented:
but i have given solution for reading values in servlet.


request.getParameterValues("regnNo");
request.getParameterValues("regnYr");
request.getParameterValues("regnMonth");
request.getParameterValues("image");
0
 
arjunarajanAuthor Commented:
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
 
chaitu chaituCommented:
but in your Q you said it should handle other fields as well in the from apart from uploading a file.
0
 
mrcoffee365Commented:
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
 
chaitu chaituCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.