Style asp.net FileUpload with boostrap

Question

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 14-Aug-14 4:21am

Anele Ngqandu

Updated 1-Sep-20 19:26pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2014-08-14T04:46:00

Solution 1

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.

Posted 14-Aug-14 4:46am

Richard Deeming

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

vksingh25d · Answer 2 · 2020-09-01T19:26:00

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
}