asked on 1/8/2013

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> '+
                        '<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

JSP Java EE JavaScript

Last Comment

chaitu chaitu

1/11/2013

chaitu chaitu

1/9/2013

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

arjunarajan

1/9/2013

ASKER

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

chaitu chaitu

1/9/2013

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>

arjunarajan

1/9/2013

ASKER

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.?

chaitu chaitu

1/9/2013

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..

arjunarajan

1/9/2013

ASKER

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.

SOLUTION

mrcoffee365

1/9/2013

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

ASKER CERTIFIED SOLUTION

arjunarajan

1/10/2013

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

arjunarajan

1/10/2013

ASKER

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.

chaitu chaitu

1/10/2013

but i have given solution for reading values in servlet.

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

chaitu chaitu

1/10/2013

arjunarajan

1/10/2013

ASKER

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. "

chaitu chaitu

1/10/2013

but in your Q you said it should handle other fields as well in the from apart from uploading a file.

mrcoffee365

1/10/2013

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.

chaitu chaitu

1/11/2013

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.