How to Create a Responsive, Full-Height File Uploader in Blazor?

When building modern web applications, a seamless user experience is crucial. For components like the Blazor File Upload, layout challenges can arise when a large number of files are added. A common issue is the upload button scrolling out of view, forcing users to scroll back up to manage their files. This article demonstrates how to create a responsive, full-height Uploader in Blazor, ensuring the action buttons remain visible while the file list is independently scrollable.

This solution uses modern CSS Flexbox to create a flexible and user-friendly layout. It is essential that the parent container has a defined height for this layout to function correctly.

A GIF demonstrating the responsive, full-height file uploader with a scrollable file list and fixed buttons.

The Challenge

By default, the Blazor File Upload component’s height adjusts to its content. When many files are selected, the entire component becomes taller, and the “Browse” or “Upload” button may scroll off-screen. The goal is to create a layout where the Uploader intelligently fills the available vertical space, the action buttons remain fixed, and only the file list scrolls.

A Flexbox-Powered Layout

The solution involves structuring the Uploader and its parent container with CSS Flexbox. This allows precise control over how space is distributed, making it easy to create a main area that expands and contracts while keeping other elements, like headers and footers, at a fixed size.

Implementation

Here is the Blazor and CSS code required to implement the responsive layout.

Prerequisites

Before implementing this solution, ensure the development environment meets the following requirements:

Syncfusion Blazor Components: Version 25.1 or later
.NET Framework: .NET 6.0 or higher for optimal performance
Development Environment: Visual Studio 2022 or Visual Studio Code with C# extension

For detailed system requirements, refer to the Syncfusion Blazor System Requirements documentation.

Blazor Component Markup

Add the File Upload to a Razor component and wrap it in a container div. Assign a custom class (uploader-full) to the component for styling.

@using Syncfusion.Blazor.Inputs

<div class="full-page">
    <SfUploader ID="fileUpload" CssClass="uploader-full" AutoUpload="false">
    </SfUploader>
</div>

CSS Styles

Add the following styles to the application’s stylesheet (e.g., wwwroot/css/site.css).

/* Sets the parent container to use flexbox and defines a viewport-based height. */
.full-page {
    display: flex;
    flex-direction: column;
    height: 95vh; /* Or any specific height. The parent container must have a defined height. */
    padding: 20px;
    box-sizing: border-box;
}

/* Configures the Uploader component to fill its parent flex container. */
.uploader-full.e-upload {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Allows the file list to grow and shrink, with scrolling for overflow. */
.uploader-full .e-upload-files {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100%; /* Fallback for older browsers */
}

/* Fixes the browse button row to its natural height. */
.uploader-full .e-file-select-wrap {
    flex: 0 0 auto;
}

/* Fixes the action buttons bar to its natural height at the bottom. */
.uploader-full .e-upload-actions {
    flex: 0 0 auto;
    position: relative;
}

Here is a breakdown of the CSS classes:

Parent Container (full-page): This container uses display: flex and flex-direction: column to stack its children vertically. height: 95vh allows it to fill most of the viewport, with padding for spacing. A defined height is required.
Uploader Container (.uploader-full.e-upload): This class is applied to the Uploader component itself. display: flex and flex-direction: column are used so its internal elements can be controlled. height: 100% ensures it fills its parent’s defined height.
Button Row (.e-file-select-wrap): This element contains the “Browse” button. flex: 0 0 auto ensures it takes only the space it needs and does not grow or shrink.
File List (.e-upload-files): This is the scrollable area for the uploaded files. The flex: 1 1 auto property instructs this element to expand and take up all available free space. overflow-y: auto ensures a vertical scrollbar appears only when the content exceeds the available height.
Actions Bar (.e-upload-actions): This contains the “Upload” and “Clear” buttons. Like the button row, it is set to flex: 0 0 auto to keep its size fixed at the bottom of the component.

Experience the Live Demo Demo Here!

Conclusion

By leveraging CSS Flexbox, a highly responsive and user-friendly Syncfusion Blazor File Uploader can be created. This approach ensures that essential actions are always accessible, improving the overall user experience. The same principles can be applied to other components to build dynamic and professional-looking layouts in Blazor applications.

I hope you enjoyed learning about how to create a responsive, full-height File Uploader in Blazor.

You can refer to our Blazor File Upload feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor File Upload Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor File Upload and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)