Multiple file upload component

It is easy to add a single file upload button in the MDriven Designer, but to handle multiple files you'll have to create a component.

Model for this example

The model for the example is a project with some documents. Each document holds the file (a blob) and a filename (a string). The goal is to make it possible to choose several documents in the file browser and upload all of them.

Upload multiplefiles project document.png Upload multiplefiles document.png

Setting up the ViewModel

  • Create a view model. It should have a root, which in this case should be a project. The project holds the list / container of documents. We will need the ID of the view model class.
  • Create a variable (here named vUploadFileTarget). It should be of a type that could store a file (blob). In this example we choose the Document type. This variable will be used to temporary store each file since we are limited to one single upload at a time.

Upload multiplefiles create variable withroot.png

  • Add a generic view model column named AttachmentUploadTarget with the value of the file part of your variable (here vUploadFileTarget.File). The name here will be used in the component code. We create a view model column to be able to handle it in the component client code.
  • Add a generic view model column named AttachmentUploadTarget_FileName with the value of the string part of your variable (here vUploadFileTarget.FileName). The _FileName suffix is important since there is a MDriven "magic" that, when uploading a file, will look for a column with the same name as referenced but with a "_FileName" suffix and if such a column exists it will assign the filename to it. Thus, this part is optional, but if you skip it you will lose the name of the file.
  • Set Visible Expression to false for these columns. They are only for temporary storage.

Upload multiplefiles AttachmentUploadTarget columns.png

  • Add a generic view model column, with a name of your choice, for uploading (it will be a button).
  • Check the Content override checkbox. This is the column that will use our own component.
  • Click the TV and Attributes button, which will open a dialogue where you can set up the usage of your own external component.

Upload multiplefiles create upload button column.png

This page was edited 0 days ago on 05/17/2024. What links here