Click here to Skip to main content
15,117,549 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Guys

Is there a way to put on some style in asp.net FileUpload button, only the button not the whole control using classes from bootstrap?
Posted
Updated 1-Sep-20 20:26pm

Lots of suggestions here: http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button[^]

I've used this one[^], and it works fairly well in most browsers.
   
Comments
Anele Ngqandu 14-Aug-14 10:56am
   
The project uses this control <asp:FileUpload CssClass="btn btn-warning" ID="fileuploadimages" runat="server" />
Richard Deeming 14-Aug-14 10:57am
   
Almost all of the answers in the SO thread will work with that control. The Bootstrap Filestyle script certainly does - I've used it myself.
bobishkindaguy 6-Jul-17 17:07pm
   
The stackoverflow reference above has everything to style the controls and browse for the file, but I can't see how to get the resulting path into asp.net so I can upload the file.
Richard Deeming 6-Jul-17 17:25pm
   
You don't. You submit the form containing the file upload, and get an HttpPostedFile on the server. You then either save the file somewhere, or read and process the raw bytes.

The path of the selected file will be local to the client. There's nothing you could do with it on the server.
bobishkindaguy 6-Jul-17 17:48pm
   
I'm new to asp.net. So I need just a bit more help.
I got it browsing fine, and then it displays the filename - nice for the user to confirm that's the one they want to process.
So then I put a "Submit" button on the page, and the user clicks that which gets me to the code behind.
You're saying the submitted page has the actual file "embedded" in it, and all I have to do is get that using HttpPostedFile and save it on the server side, right?
I don't see "Page.HttpPostedFile" or "Session.HttpPostedFile", would you mind posting a code snippet to show how to get the file contents into a variable? My files will be text, so I would probably be carefully converting the object to a string.
I've looked at HttpPostedFile Class in msdn, but there is no code example.
Richard Deeming 6-Jul-17 17:59pm
   
You'd typically use the properties and methods of the FileUpload control[^].

To read the content into a variable, you can use the FileContent property[^], which returns a Stream. If you want to read the contents as text, you'd need to wrap a StreamReader around it.

If necessary, you can also use the PostedFile property to get access to the HttpPostedFile for that control, or the PostedFiles property if you accept multiple files.

Failing that, the Request.Files property[^] will give you access to all the files submitted with the current request.
bobishkindaguy 6-Jul-17 18:32pm
   
I agree that the FileUpload control would be the easiest thing to use, but the reason I arrived at this page is for the same reason as the OP. I need to "put some style" on the FileUpload control.

Therefore the stackoverflow page you suggested is great and works fine, but since it doesn't use the FileUpload control, I'm not sure where the file contents are when the postback occurs. The Request.Files has zero files in it.
Richard Deeming 6-Jul-17 18:42pm
   
If you're using the first answer from that StackOverflow question, then you just need to add runat="server" to the <input type="file" hidden>; that will turn it into an HtmlInputFile control[^], which has the PostedFile property. The InputStream property on that will give you access to the content of the posted file.

NB: Make sure you've set the <form>'s enctype to "multipart/form-data":
<form runat="server" enctype="multipart/form-data">
bobishkindaguy 6-Jul-17 18:43pm
   
Okay, I'll get to work on that. Thanks for your patience !
bobishkindaguy 7-Jul-17 12:44pm
   
I got it working, much appreciated. There were a couple of more things that had to be done so I thought I'd update this with that.

1. I had to add this, as you suggested. It needed to go in the site.master:
"multipart/form-data"

2. I added runat="server" to the "Uploader"markup -- which as you said made it into a "HtmlControls.HtmlGenericControl" in the default.aspx designer code file.

3. Then I had to add the following to the default.aspx markup file. (includes code for providing debug feedback)

<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>



Dim _cbMessage As String = ""
'Method that processes the callbacks on server.
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _
Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent

Try
Page.ClientScript.ValidateEvent(Uploader1.UniqueID, Me.ToString())
_cbMessage = "Correct event raised callback."

Catch ex As Exception
_cbMessage = "Incorrect event raised callback."

End Try

End Sub

'Method that returns callback result.
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
Return _cbMessage
End Function


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If (Not IsPostBack) Then
Dim CM As ClientScriptManager = Page.ClientScript
Dim CallBackRef As String = CM.GetCallbackEventReference("'" & Page.UniqueID & "'", "arg", "ReceiveServerData", "", "ProcessCallBackError", False)
Dim CallbackScript As String = "function CallTheServer(arg, context) {" & CallBackRef & "; }"
CM.RegisterClientScriptBlock(Me.GetType(), "CallTheServer", CallbackScript, True)
End If
End Sub

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Page.ClientScript.RegisterForEventValidation(Uploader1.UniqueID, Me.ToString())
MyBase.Render(writer)
End Sub




var value1 = new Date();
function ReceiveServerData(arg, context)
{
Message.innerText = arg;
Label1.innerText = "Callback completed at " + value1;
value1 = new Date();
}
function ProcessCallBackError(arg, context)
{
Message.innerText = 'An error has occurred.';
}
Member 11612801 4-Feb-18 4:22am
   
sdsdsds
Use Asp.Net File Upload control.
<asp:fileupload runat="server" id="fileUpload">

To Style it use the below css.


input[type=file]::-webkit-file-upload-button {
color: #ffffff;
border: none;
padding-top: 5px;
background-image: linear-gradient(to right, #051937, #004d7a, #008793, #00bf72, #a8eb12);
border-radius: 4px;
height: 30px;
width: 400px
}

   
Comments
CHill60 2-Sep-20 8:26am
   
You've added nothing new to this old thread

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900