| |

Multi upload file in Sitecore forms

Background :

In this post, il will show you how to create a custom multiple upload file for Sitecore forms.

What we need ?

  • New file type
  • Template
  • Model
  • View
  • Javascript logic

How to implement this ?

We need to do some stuffs in solution and Sitecore CM side.

Solution side :

Model :

We create a model that will be used by the field :

View :

A view to render the multi upload file.

Javascript :

We need a javascript logic to plug the uploded file to the input.

File type :

For each uploaded file we clone the original input in the cshtml and assign the file object in the function createDownloadEntry . As we clone the same object we will have several inputs having the same name.
Sitecore will create a list of file from those inputs and assign its to our attribute file in our model

Sitecore CM side :

Multi File Upload item :

We create field templates under /sitecore/system/Settings/Forms/Field Types/Lists

and we specify the view and model type and template that we will be associated with it.

Multi File Upload
Template item :

We need a template that inherits from template : /sitecore/templates/Modules/FormExtensions/Fields/FileUploadField.

we add some fields in order to make the validation and some labels configurable like Uploaded Message, information Message or the Allowed Extensions.

Make sur to create the template undre the folder /sitecore/templates/Modules/FormExtensions/Fields

File Upload Field

Result :

I precise that the css part is not covered in this post. You have to add css stuffs if you want to have the same render as the video.

That’s all ! happy sitecoring 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *