File Upload Question - Displaying selected file name

[kkonkle]

I have a form that will allow one of our users to submit a sale to us.

 

Part of that process is attaching any number of files to the sale before they submit. It's a standard setup. A file input control, and an "Add" button below that to save it. I also have a list box that shows what files they've added so far, along with a "Remove" button they can use to remove files from the list box.

 

I have this all working. Nothing is sent to us until they click Submit at the end of the process, so they're free to add and remove files all day long.

 

One of our more nitpicky users complained that the file browse box is not long enough. She will select a file buried deep within her file system and when she selectes the file and clicks "Open" all she can see in the file upload box is:

"C:\Documents and Settings\Am". I simply don't have any room on the form to stretch that control out as long as she would like.

 

I told her she can click on the path in the box and scroll it all the way to the right to see her file name. I told her she can see the file name when she first selects it, and again in the list box after she clicks "Add" too. And if it's wrong she can highlight it and click "Remove"... but that did not silence her.

 

So is there a way to:

a) Autoscroll the file box all the way to right after they've selected their file and clicked "Open"

b) Have a label or something below the file upload box that I could trim the file name out of the path and display it alone there for easy viewing before the user clicks "Add"

c) something else that will show the user their selected file name before they commit it to the list box

 

Thanks.

[JohnsHandle]

I feel sorry for you sounds like a bad requirement. Has she forgotten the name of the file she picked a second ago :)

 

I don't know if option A is possible for option B though you can use the onchange event for the control and have some JS populate a label or something.

 

   <script language="javascript" type="text/javascript">
    function test(sender, args)
    {
     alert(sender.value);
    }
   </script>

   <asp:FileUpload ID="FileUpload1" runat="server" onchange="test(this)"/>

[kkonkle]

I tried something kind of like what you suggest, updating a label through JavaScript, but doesn't the page have to refresh before the updated label text can be seen?

 

My test runs so far do not display the label correctly. I can see the correct value in an alert box, but the label doesn't immediately change on the user's screen.

[JohnsHandle]

You shouldn't need to refresh the page when using JavaScript.

 

Labels render as text within a div or span so you need to set the innerHTML directly. Try somthing like:

 

var control = document.getElementById("labelID");
control.innerHTML = sender.value;

[kkonkle]

That did the trick.

 

I didn't know about the innerHTML property... I'd just been trying to set "control.value = sender.value", which would not update the client's screen.

 

Thank you very much for your assistance.