Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1780
  • Last Modified:

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
0
arjunarajan
Asked:
arjunarajan
  • 7
  • 6
  • 2
2 Solutions
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
mrcoffee365Commented:
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:
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
 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now