multiple browse files saved on the form under the textbox

Hello Everyone,

My intention is to have a form with one textbox followed by a BROWSE buttton, and everytime the user browses for a file, that file to get saved underneath the textbox on the form.  That way the textbox will always remain blank...

So if the user browses for the following document paths: c:/angie/readme.txt,  c:/angie/form.txt and  c:/angie/document3.txt
He uses the "BROWSE" button to get the first path and then clicks the  "ATTACH FILE" button to add them to the form, in hidden input boxes, so that the values get saved on the screen...
<input type = "hidden" name = "doc1"><input type = "hidden" name = "doc2"><input type = "hidden" name = "doc3"> etc...
response.write doc1
response.write doc2      etc....
Is this a good way to get the values from the browse textbox called attach1 to display on the screen under the textbox as seen in the diagram below?

|__________________|  BROWSE          ATTACH FILE


SUBMIT button

This way, once all the files are chosen, the user can click SUBMIT, and they get saved to the database (that part I know how to do)
but can you help me write code that saves the files's path on the screen?  We have no idea how many attachements need to sent through each email, so we have to let them attach as many files as they want...
Who is Participating?
alorentzConnect With a Mentor Commented:
Do you have Hotmail account?

If so, it's just like attaching a file to email on hotmail.  They do it one at a time, and upload your local file to their server...then ask OK or Attach Another.  It's done one a time, so the pop-up they use refreshes each time and uplaods the selected file.

Then when you save your done, it goes back the email, and send the email with all the attachments.

I know you don't need it for email...but same principle.  You can upload the files one at a time in a popup window or something, then only submit your form once.  You can tie it all together with a hidden field or session ID or soemthing.
<input type="file" onchange="updateFileList(this.value)">
<div id="fileList"></div>

<script language="javascript">
function updateFileList(fileName) {
    document.getElementById("fileList").innerHTML = document.getElementById("fileList").innerHTML + fileName + "<br>";
You need seperate FILE type input for each file....that's why you usually see multiple input boxes when a website allows you to upload more than one file at a time.
Never miss a deadline with

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Meaning, you basically can't do it the way you are requesting.  You need:

|__________________|  BROWSE          
|__________________|  BROWSE          
|__________________|  BROWSE        

kevp75Connect With a Mentor Commented:
@alorentz, that is not entirely true.  In my early days I clearly remember seeing exactly what he wants on an illicit file site.   Also, my old comcast email account had this same feature, although, I believe the file got uploaded to a temporary directory, in case you needed to add more than one attachment.

@Gemini.   That may be the route to go with this.  Have your 'upload attachment' feature save each uploaded file to a temp directory, and display the list under the browse box.   Then when all is said and done, write an FSO script to copy the temp files to the actual directory that you need them in.
>> I believe the file got uploaded to a temporary directory

That's the point...each file needs to be uploaded...either one at a time or all at the same time with seperate file inputs, as I mentioned.

Gemini532Author Commented:
I had this working with only ONE file to be attached.  But I had to switch to make it work for MULTIPLE files.
But I cannot use multiple INPUT BOXES becuase there might be as many as 20 attachments, the web page would look terrible with 20 INPUT BOXES... :(

But what if the separate file paths are NOT in text boxes, but are just written on the form...?!?

This is my code so far...

"submit.asp" opens up a div which holds the "browse.asp" in an IFrame.  
<FORM METHOD="POST"  ACTION="Proposals.asp" onSubmit="return validate(this)"  name = "ProposalsForm" ENCTYPE="multipart/form-data" >
<input type = "button" value = "Attach File" name = "attachBtn" id = "attachBtn" onClick = "browseWindow();"  style = "background:#0D6B9C; font-weight:bold; color:#FFFFFF;"><INPUT type="submit" value="Submit" name="submit" style = "background:#0D6B9C; font-weight:bold; color:#FFFFFF;"><br><br><br>
      dim attachments, at1, at2
      attachments = request.form("attach1")
if attachments <> "" AND at1 = "" then
at1 = request.form(attachments)
      response.write(at1 & "<br>")
elseif attachments <> "" & at1 <> "" then
at2 = request.form(attachments)
       response.write(at2 & "<br>")
end if
<div id = "topDiv"  style="height:25px;background-color:#330066;padding-left:10px;color:#FFFF99;font-weight:bold;visibility:hidden">
<input id "btnClose" name = "btnClose" type = "button" onClick = "cancel()" name = "btn" value = "Close Window" style = "background:#CCCCDD">
<iframe name = "someFrame" src="browse.asp" height=100% width=100% target="_top" target="_top"></iframe></div>
<script type="text/javascript" src="acknowledgment.js"></script>
<script type="text/javascript">
function browseWindow(){
        var theTopDiv = parent.document.getElementById("topDiv"); = "visible";              
        var windowFrame = parent.document.getElementById("someFrame"); == 'inline'
//Thanks to Walter Zorn ( for the drag and drop code.
function cancel() {
        var popUpWin = document.getElementById("topDiv"); = "hidden";
    var theFrame = parent.document.getElementById("someFrame"); == 'none'      

From "browse.asp," the users selects their attachment one by one, and clicks "Attach File."  The div closes and the path is saved back on the submit.asp form...

I just started this code, but it's not working too well, so I was thinking it might be better to open a WINDOW instead of a visible div with an IFrame, and use window opener to get the value from the pop up window...  

Then after the multiple paths are saved on the "submit.asp" page, I submit the form and the values get saved in a FOLDER with Write Permission (that part was working for ONE file...)  I'm using FREE ASP UPLOAD to upload the files to a folder before attaching them to the email...

<FORM METHOD="POST"  ACTION="submit.asp" id = "mainform" name = "mainform" ENCTYPE="multipart/form-data" >

<table border="0" cellspacing="2" cellpadding="2" align="center" style = "background:#CBCBCC; border-style: inset">
      <font face="Arial" size="2">Use the "Browse" button to find the files you would like to attach.<BR><br><br>
              <INPUT TYPE="FILE" NAME="attach1" VALUE="" size = "40">      <br><br>
            <INPUT TYPE="submit" value="Attach File" name = "fileBtn" id = "fileBtn"><br>
They NEED to be file inputs...not hidden or just text.  So, you either upload them one at a time, or use multile boxes.

Just ask them how many files they want to upload, then generate the page.

Example: call the textbox "fileqty"

How many files do you want to upload?  Enter number ____?

Then submit to upload page, and:


for i =1 to request("fileqty")
<input type=file name=files>

So, you let them control how many file boxes will be on the page....

Then you submit files to upload like:

for each f in request("files")
   'upload or attach file

CyrexCore2kConnect With a Mentor Commented:
Alorenz is right. While many sites give the impression that you are submitting multiple files at once this is simply not the case. Instead each file has been already uploaded and has been stored either in a temporary directory or in a database table.


My recommendation would be that when the user goes to this page some sort of random ID is generated and stored either in a cookie or in a hidden field (hidden field would be the best solution.) then every time the user clicks the attach button the file they've selected is uploaded into a database along with the filename and the id. The user is then redirected back to the upload page along with this ID again in a hidden field. Then to show them a list of their "attached" files simply run a simple select statement on the table with all the temporary files using the stored id.
Gemini532Author Commented:
>>file has been already uploaded and has been stored either in a temporary directory

How can I do this?  One by one, store each file in a temporary directory after the user selects the file and clicks the ATTACH FILE button?
I don't need to attach the file to the email, all i NeeD to do with it is to store each file in a temporary directory.

I already have code that does it for ONE FILE using FREE ASP UPLOAD...  If I can  store each file in a temporary directory one by one, and then the user can fill out the rest of the form which will be saved to the database when they click SUBMIT, is that possible
|__________________|  BROWSE         and a ATTACH FILE button.

Alorenz >>What do you mean by "upload them one at a time"
If it is NOT possible, in any way type shape or form to use just ONE text box, I will use more then one, but I want to MAKE sure because my boss wants it with only one text box and one of my co-workers told him it's possible, and I told him I don't think it's possible, but he didn't believe me....
So if I go and tell him it's not possible, I want to make sure that my co-worker won't find a way to do it himself, then I'll get into trouble...
So that's why I"m really pressing this issue... I'm sorry, I don't mean to be unreasonably stubborn, I just want to make sure before I go argue with  my boss and my co-worker...
Gemini532Author Commented:
That's it EXACTLY!  Sounds perfect...   :)        I'm going to start a hotmail account to look at it, although I understand how you mean....
Wow, that's going to look so great!  Thanks!  Should I keep this question open in case I have coding questions as I move along?
Up to you, but this seems answered.
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.