Solved

multiple browse files saved on the form under the textbox

Posted on 2006-07-10
12
254 Views
Last Modified: 2008-02-26
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

 c:/angie/readme.txt
 c:/angie/form.txt
 c:/angie/document3.txt

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...
0
Comment
Question by:Gemini532
12 Comments
 
LVL 6

Expert Comment

by:inviser
Comment Utility
<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>";
}
</script>
0
 
LVL 31

Expert Comment

by:alorentz
Comment Utility
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.
0
 
LVL 31

Expert Comment

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

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

Submit
0
 
LVL 25

Assisted Solution

by:kevp75
kevp75 earned 100 total points
Comment Utility
@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.
0
 
LVL 31

Expert Comment

by:alorentz
Comment Utility
>> 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.

0
 

Author Comment

by:Gemini532
Comment Utility
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.  
 **********************************submit.asp************************
<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>
</FORM>
<script type="text/javascript" src="acknowledgment.js"></script>
<script type="text/javascript">
function browseWindow(){
        var theTopDiv = parent.document.getElementById("topDiv");
        theTopDiv.style.visibility = "visible";              
        var windowFrame = parent.document.getElementById("someFrame");
        windowFrame.style.display == 'inline'
}
//Thanks to Walter Zorn (http://www.walterzorn.com/dragdrop/dragdrop_e.htm) for the drag and drop code.
function cancel() {
        var popUpWin = document.getElementById("topDiv");
      popUpWin.style.visibility = "hidden";
    var theFrame = parent.document.getElementById("someFrame");
    theFrame.style.display == 'none'      
}
</script>

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

 **********************************browse.asp************************
<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">
  <tr>
    <td>
      <font face="Arial" size="2">Use the "Browse" button to find the files you would like to attach.<BR><br><br>
      </font>
              <INPUT TYPE="FILE" NAME="attach1" VALUE="" size = "40">      <br><br>
            <INPUT TYPE="submit" value="Attach File" name = "fileBtn" id = "fileBtn"><br>
      </td>
  </tr>
</table>
</form>
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 31

Expert Comment

by:alorentz
Comment Utility
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>
<%
next
%>

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
next

etc....
0
 
LVL 14

Assisted Solution

by:CyrexCore2k
CyrexCore2k earned 100 total points
Comment Utility
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.

Gemini

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

Author Comment

by:Gemini532
Comment Utility
>>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...
 
0
 
LVL 31

Accepted Solution

by:
alorentz earned 300 total points
Comment Utility
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.
0
 

Author Comment

by:Gemini532
Comment Utility
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?
0
 
LVL 31

Expert Comment

by:alorentz
Comment Utility
Up to you, but this seems answered.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now