FileUpload
in namespace DotVVM.Framework.Controls
Renders a FileUpload control allowing users to upload one or multiple files asynchronously.
Usage & Scenarios
Allows the user to upload one or multiple files asynchronously.
Processing uploaded files
The FileUpload control requires a property of type UploadedFilesCollection in the viewmodel.
See Upload files for more info about processing the uploaded files.
Sample 1: Basic FileUpload control
The FileUpload control has the UploadedFiles property (of type UploadedFilesCollection). Each file will get a unique ID which is stored in this collection.
The AllowMultipleFiles property specifies whether the user can select multiple files in the file browser window.
<dot:FileUpload UploadedFiles="{value: Files}" AllowMultipleFiles="true" />
                                using System.Collections.Generic;
using DotVVM.Framework.Controls;
namespace DotvvmWeb.Views.Docs.Controls.builtin.FileUpload.sample1
{
    public class ViewModel
    {
        public UploadedFilesCollection Files { get; set; }
        public ViewModel()
        {
            Files = new UploadedFilesCollection();
        }
        
    }
}
                                Sample 2: UploadCompleted Event
The UploadCompleted event is fired automatically when file is uploaded.
<dot:FileUpload UploadedFiles="{value: Files}" AllowMultipleFiles="true" 
                UploadCompleted="{command: ProcessFile()}" />
{{value: Message}}
                                using System.Collections.Generic;
using DotVVM.Framework.Controls;
namespace DotvvmWeb.Views.Docs.Controls.builtin.FileUpload.sample2
{
    public class ViewModel
    {
        public UploadedFilesCollection Files { get; set; }
        public string Message { get; set; }
        public ViewModel()
        {
            Files = new UploadedFilesCollection();
        }
        public void ProcessFile()
        {
            // do what you have to do with the uploaded files
            Message = "ProcessFile() was called.";
        }
    }
}
                                Sample 3: Processing the Files
You can use the Files.IsBusy property to determine whether the upload is still in progress or not.
<dot:FileUpload UploadedFiles="{value: Files}" 
                AllowMultipleFiles="true" />
<p>
  <dot:Button Text="Save Files" 
              Click="{command: Process()}"
              Enabled="{value: !Files.IsBusy}" />
</p>
                                using System.IO;
using System.Threading.Tasks;
using DotVVM.Framework.Controls;
using DotVVM.Core.Storage;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.builtin.FileUpload.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        private IUploadedFileStorage storage;
        
        public UploadedFilesCollection Files { get; set; }
        public ViewModel(IUploadedFileStorage storage)
        {
            // use dependency injection to request IUploadedFileStorage
            this.storage = storage;
            
            Files = new UploadedFilesCollection();
        }
        public async Task Process()
        {
            var uploadPath = GetUploadPath();
            // save all files to disk
            foreach (var file in Files.Files)
            {
                var targetPath = Path.Combine(uploadPath, file.FileId + ".bin");
                await storage.SaveAsAsync(file.FileId, targetPath);
                await storage.DeleteFileAsync(file.FileId);
            }
            // clear the uploaded files collection so the user can continue with other files
            Files.Clear();
        }
        private string GetUploadPath()
        {
            var uploadPath = Path.Combine(Context.Configuration.ApplicationPhysicalPath, "MyFiles");
            if (!Directory.Exists(uploadPath))
            {
                Directory.CreateDirectory(uploadPath);
            }
            return uploadPath;
        }
    }
}
                                Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
| AllowedFileTypes | String | Gets or sets the types of files that the server accepts. It must be a comma-separated list of unique content type specifiers (eg. ".jpg,image/png,audio/*"). All file types are allowed by default. | 
                                         attribute 
                                        
                                        static value 
                                        
                                        
                                     | 
                                    null | |
| AllowMultipleFiles | Boolean | Gets or sets whether the user can select multiple files at once. It is enabled by default. | 
                                         attribute 
                                        
                                        static value 
                                        
                                        
                                     | 
                                    True | |
| Attributes | Dictionary<String,Object> | 
                                         attribute 
                                        
                                        static value 
                                        
                                        
                                     | 
                                    null | ||
| ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. | 
                                         attribute 
                                        
                                        static value 
                                        
                                        
                                     | 
                                    Static | |
| DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    null | |
| ID | String | Gets or sets the unique control ID. | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    null | |
| IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. | 
                                         attribute 
                                        
                                        
                                        bindable 
                                        
                                     | 
                                    True | |
| InnerText | String | Gets or sets the inner text of the HTML element. | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    null | |
| MaxFileSize | Int32? | Gets or sets the maximum size of files in megabytes (MB). The size is not limited by default. | 
                                         attribute 
                                        
                                        static value 
                                        
                                        
                                     | 
                                    null | |
| NumberOfFilesIndicatorText | String | Gets or sets the text on the indicator showing number of files. The default value is "{0} files". The number of files will be substituted for the "{0}" placeholder. | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    {0} files | |
| SuccessMessageText | String | Gets or sets the text that appears when all files are uploaded successfully. | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    The files were uploaded successfully. | |
| UploadButtonText | String | Gets or sets the text on the upload button. The default value is "Upload". | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    Upload | |
| UploadedFiles | UploadedFilesCollection | Gets or sets a collection of uploaded files. | 
                                         attribute 
                                        
                                        
                                        bindable 
                                        
                                     | 
                                    null | |
| UploadErrorMessageText | String | Gets or sets the text that appears when there is an error during the upload. | 
                                         attribute 
                                        
                                        static value 
                                        bindable 
                                        
                                     | 
                                    Error occurred. | |
| Visible | Boolean | Gets or sets whether the control is visible. | 
                                         attribute 
                                        
                                        
                                        bindable 
                                        
                                     | 
                                    True | 
Events
| Name | Type | Description | |
|---|---|---|---|
| UploadCompleted | Command | Gets or sets a command that is triggered when the upload is complete. |