Fileupload browse button without accompanying textbox? : The Official Microsoft ASP.NET Forums

Reply

vmhatup

Member

292 Points

Fileupload browse button without accompanying textbox?

Jan 14, 2010 02:01 PM|LINK

I want to be able to use the Browse button of the Fileupload control to get a file path, but instead of putting the selected path and filename in the accompanying textbox (as it normally works), I want to add it to a gridview or any other data control.

Basically, I click on the 'Browse' button and search for a file. Once I select the file it will be added to a gridview. So the gridview will display all the files the user has selected.

Any help is appreciated.

Thanks.

Reply

rblaettler

Participant

1166 Points

317 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 14, 2010 02:54 PM|LINK

Fileupload is a notoriously difficult topic. You could use a flash upload component like SWFUpload. There you can style everything yourself.

You could also hide the upload control and forward to the click on another button to the upload control. But never tried that.

I know you can read the value of the upload control via javascript and display it on the page.

Remy Blaettler
Chief of the System
Supertext AG

Reply

modernN8

Member

718 Points

161 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 14, 2010 03:51 PM|LINK

rblaettler
Fileupload is a notoriously difficult topic

rblaettler is spot on with that statement. The fileupload control behaves the way each individual browser type dictates. If you want granular control, go with sblaettler's suggestion and use a third party control.

Reply

andresurena

Member

48 Points

11 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 14, 2010 05:22 PM|LINK

You can setup a column template for the grid, within this template you can place a fileupload control.

if you want to implement this feature with other controls you have to create a web user control where you can place the controls you need then place this web user control in your aspx page.

Reply

kedarrkulkar...

All-Star

34013 Points

5468 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 14, 2010 06:31 PM|LINK

just a clue....

<asp:FileUpload ID="FileUpload1" runat="server" Width="514px" onchange="alert('you selected the file: '+ this.value);"/>

here, instead of alert, call a javascript function and pass "this.value" to it. in javscript function, u can put this value in textbox inside grid.

file names will be displayed in other control just for display purpose..... when u want to upload actual file, u have to get it from file upload control only.

also, theres no way to hide textbox part of fileupload control. u can just mask it with some other control (like other textbox control with white border and disabled)

hope this helps......

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Reply

vmhatup

Member

292 Points

516 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 14, 2010 06:57 PM|LINK

Thanks for the post.

Instead of just uploading each file individually, I wanted to let the user select all the files he needs and then upload them all at the same time. So after choosing all the files they wanted to upload, they'd click 'upload' button and all these files would upload to the server.

This isn't possible then?

Reply

kedarrkulkar...

All-Star

34013 Points

5468 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 14, 2010 07:11 PM|LINK

if this is the only requirment, why u want to show file name in grid or some data control..

u can add many uploadfile controls one after other....... user can select file in each control

and when he clicks uploadd button, u can upload file at a time......

also, if u want to upload many files in single button click (single post back), then u must have that many uploadfile controls.

upload file is a control which allows minimum support for tweaking...... and u can not really play around

hope this helps....

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Reply

rblaettler

Participant

1166 Points

317 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 15, 2010 07:08 AM|LINK

As I said, I would use the Flash Upload. With the normal HTML Upload Control you can only upload one file per control.

Check out the demo here:

http://demo.swfupload.org/v220/index.htm

But keep in mind that flash has it's own issues. Almost all public internet pages that use flash offer an alternative with the normal html control.

Remy Blaettler
Chief of the System
Supertext AG

Reply

vmhatup

Member

292 Points

516 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 15, 2010 07:28 PM|LINK

Thanks for all the help.

The Flash control was pretty cool, but I then realized it's only cool in IE. It would work in a controlled environment, but that's about it. Many people have documented problems when running it in other browsers. In my case it didn't work in Chrome or firefox.

Basically, I wanted to do something like what ebay has: http://www.silohay.com/ebay.gif

It only has a Browse button, and they upload everything once the user's done. I really don't need the fileupload textbox (I don't really care for the file path), and I don't want to upload each file individually. So the interface is cleaner.

Reply

kedarrkulkar...

All-Star

34013 Points

5468 Posts

Re: Fileupload browse button without accompanying textbox?

Jan 15, 2010 08:10 PM|LINK

hey..... i created this code..... i hope it helps u...... this is in pure JS and html.....

here goes, complete .aspx page..... u can copy all code and create a new .aspx form and test....

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
        <title>Test - file upload trick</title>
    <script type="text/javascript">
    function CallUpload()
    {
        if(document.getElementById("FileUpload1").value=='')
        {
            document.getElementById("FileUpload1").click();
        }
        else if(document.getElementById("FileUpload2").value=='')
        {
            document.getElementById("FileUpload2").click();
        }
        else if(document.getElementById("FileUpload3").value=='')
        {
            document.getElementById("FileUpload3").click();
        }
     

        return false;
    }
    function AddToList(evt)
    {
         var myOption;


            myOption = document.createElement("Option");
            myOption.text = evt;
            myOption.value = evt;
            document.getElementById("lstFiles").add(myOption);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <br />
    add upto 3 files<br />
    

    <asp:FileUpload ID="FileUpload1" runat="server" Width="514px" onchange="javascript:AddToList(this.value);" style="display:none;"/>
    <asp:LinkButton ID="q0" runat="server" Text="link1" OnClientClick="return CallUpload();"></asp:LinkButton>
    <br />
    

    <asp:FileUpload ID="FileUpload2" runat="server" Width="514px"
        onchange="javascript:AddToList(this.value);" style="display:none;"/>
    <br />
    

    <asp:FileUpload ID="FileUpload3" runat="server" Width="514px"
        onchange="javascript:AddToList(this.value);" style="display:none;"/>
    <br />
    <asp:ListBox ID="lstFiles" runat="server" Width="221px"></asp:ListBox>
         <br />
         <br />
         <asp:Button ID="Upload" runat="server" Text="Button" />
    <br />
    

    </div>
    </form>
</body>
</html>

now, in code behind(cs/vb), add following code

    Protected Sub Upload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Upload.Click
        If Not FileUpload1.PostedFile.FileName = "" Then
            FileUpload1.PostedFile.SaveAs("file save path goes here")
        End If
        If Not FileUpload2.PostedFile.FileName = "" Then
            FileUpload2.PostedFile.SaveAs("file save path goes here")
        End If
        If Not FileUpload3.PostedFile.FileName = "" Then
            FileUpload3.PostedFile.SaveAs("file save path goes here")
        End If
    End Sub

i hope, this will achive what u looking for.......

give us the feedback...

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Fileupload browse button without accompanying textbox? RSS

20 replies

vmhatup

Fileupload browse button without accompanying textbox?

rblaettler

Re: Fileupload browse button without accompanying textbox?

modernN8

Re: Fileupload browse button without accompanying textbox?

rblaettler

andresurena

Re: Fileupload browse button without accompanying textbox?

kedarrkulkar...

Re: Fileupload browse button without accompanying textbox?

vmhatup

Re: Fileupload browse button without accompanying textbox?

kedarrkulkar...

Re: Fileupload browse button without accompanying textbox?

rblaettler

Re: Fileupload browse button without accompanying textbox?

vmhatup

Re: Fileupload browse button without accompanying textbox?

kedarrkulkar...

Re: Fileupload browse button without accompanying textbox?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft