January 25, 2007

Multiple file upload using Apache Struts

Uploading of file using struts with the FormFile is easy! But the requirement that I got was not as sweet as I thought. I had to upload multiple files and the user had the facility to add files before doing the upload. Thus I had to have a “Add File” button that will present the user with one more column to select a file using the browse button.

Having the facility of FormFile and the apache upload package, I thought the task would be easy but I had tough time due the dynamic part of this task. In the end I solved the problem. And here is the solution for you people as you should not reinvent the wheel. :)

Add button problem was solved by a simple java script that created an INPUT tag and inserted to the existing form. The code is given below:

function addFileElement() {
fCount++;
var fObject = document.getElementById('fileSection');
var text = 'File:';
var tag='<input type="file" name="testFile['+fCount+']" value="">';
var brk='<br>';
var o1 = document.createTextNode(text);
var o2 = document.createElement(tag);
var o3 = document.createElement(brk);

fObject.appendChild(o3);
fObject.appendChild(o1);
fObject.appendChild(o2);
fObject.appendChild(o3);

}

As usual the form bean of struts had a FormFile and an ArrayList variable that would hold the entire set of files. Now, I the form bean we tune the setter method of FormFile so that, each time the function is called the new file that is being set is added to the ArrayList. The code is given below:

public void setTestFile(int in,FormFile t) {

try {

this.testFile = t; // testFile is FormFile’s obj
setFormFiles(t); // add the file to array
index++;
}catch(Exception e) {
System.out.println("Exception in setTestFile!" + e);
}

}

And now the jsp code! It’s fairly simple and sweet. All you have to do is provide a strut form that has "browse" buttons, a "submit" button and a “add” button. The add button will run the above java script and you will get more options to upload file!
The complete source code can be downloaded from here. Enjoy Programming! ;)

15 comments :

Anonymous said...

hey great work, thanks!!

Anonymous said...

Thank you very much.you solve my big problem.

Anonymous said...

I've been struggling thru and this code works fine. Thank you very much for the great job

Anonymous said...

Thanks Buddy ! That of great help :)

Anonymous said...

Thanks buddy ...this was a great help.

Anonymous said...

Thanks, really helped!!!!

NSTR said...

Thanks SO much.

It happened the same to me: I thought it was going to be quite easy after having it ready for one file, but it has been like hell.

Thanks for posting the explanation, but thanks much more for attaching the code.

I think now I can continue enjoying programming :-)

Rocket said...
This comment has been removed by a blog administrator.
sandy said...

it works great. now i need a upgrade to the feature. i need to have delete functionality to remove the added file elements. can you please post how to do the same using javascript. It would be nice to have a image [X] to remove the same.

sandy said...

it works great. now i need a upgrade to the feature. i need to have delete functionality to remove the added file elements. can you please post how to do the same using javascript. It would be nice to have a image [X] to remove the same.

sandy said...

it works great. now i need a upgrade to the feature. i need to have delete functionality to remove the added file elements. can you please post how to do the same using javascript. It would be nice to have a image [X] to remove the same.

sandy said...

it works great. now i need a upgrade to the feature. i need to have delete functionality to remove the added file elements. can you please post how to do the same using java script. It would be nice to have a image [X] to remove the same.

sandy said...

the above code works fine, but when i try to upload new set of files, the older set of uploaded files also are being retrieved in the action class. can anyone please let me know how to resolve this problem.

sandy said...

the above code works fine, but when i try to upload new set of files, the older set of uploaded files also are being retrieved in the action class. can anyone please let me know how to resolve this problem.

Pirabu G said...
This comment has been removed by a blog administrator.