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
property icon 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 (e.g. ".jpg,image/png,audio/*"). All file types are allowed by default.
attribute
inner element
static value
bindable
default
null
property icon AllowMultipleFiles Boolean Gets or sets whether the user can select multiple files at once. It is enabled by default.
attribute
inner element
static value
bindable
default
True
property icon MaxFileSize Int32? Gets or sets the maximum size of files in megabytes (MB). The size is not limited by default.
attribute
inner element
static value
bindable
default
null
property icon 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
inner element
static value
bindable
default
{0} files
property icon SuccessMessageText String Gets or sets the text that appears when all files are uploaded successfully.
attribute
inner element
static value
bindable
default
The files were uploaded successfully.
property icon UploadButtonText String Gets or sets the text on the upload button. The default value is "Upload".
attribute
inner element
static value
bindable
default
Upload
property icon UploadedFiles UploadedFilesCollection Gets or sets a collection of uploaded files.
attribute
inner element
static value
bindable
default
null
property icon UploadErrorMessageText String Gets or sets the text that appears when there is an error during the upload.
attribute
inner element
static value
bindable
default
Error occurred.

Events

Name Type Description
event icon UploadCompleted Command Gets or sets a command that is triggered when the upload is complete.

HTML produced by the control