Posts

Showing posts with the label InputFIle

File Upload Button Styling

Image
 I came across an article that said you can actually style the file upload button, so I decided to apply styling to my new File upload project. As it turns out, this is quite easy:      input[type=file]::file-selector-button {          border: 2px solid #6c5ce7;          padding: .2em .4em;          border-radius: .2em;          background-color: #a29bfe;          transition: 1s;      }      input[type=file]::file-selector-button:hover {          background-color: #81ecec;          border: 2px solid #00cec9;      } As you can see you just use the input[type=file] CSS selector to select the upload button.  Once you have the element selected, just like any other HTML element, you apply your styling. [source]

Blazor File Upload (Updated)

Image
  With the release of .Net 5.0, a new Blazor file upload component was released.  I wanted to replace my old file upload component that I published way back in Oct of 2019, post  with the new 5.0 one. This post is working with the Blazor Server side, but this will work with Web Assembly except you will need a server API to do the actual file upload. Changes I started by updating my Blazor project to /net 5.0.  That part was easy.  My next step was to replace the component.  As it turned out, my old component was named the same as the new one:           <InputFile OnChange="@HandleSelection" /> For the selection handler, I had to make a couple of changes.  The changes were 1. Switched the agreement from IFileListEntry to InputfileChangeEventArg 2. The collection of files that were selected changed from FileListEntry to IBrowserFile.   Working with IBrowser file object does change the information that we have access to like the ContentType.   3. Remove the GetFileType met

Blazor File Upload

I wanted to see what it took to upload a file in a Blazor application.  The use case I was using to validate the process is adding an avatar to a user’s profile page.  As I researched this I found that “there a component for that “,   I came across Steve Sanderson’s <InputFile> component (See Steve’s Post)  This post is my implementation of Steve’s InputFile component.   For a detail description of the inner workings of the component see the link above.   I will be using the Server Configuration for my Blazor Application, but the component will work with any Blazor configuration.   Please note that the implementation to save the uploaded file to the server is for only the Server configuration.   For the Client configuration you would need a Server End point. With the InputFIle component you can upload any file type.   For the displaying the uploaded file we will be supporting only images and text files.   There are of course components for PDFs and office files. Available