File upload control in Sitecore Forms

Question

I am using Sitecore 9 Forms and I am creating file upload control in Forms, for this, I have created FileUpload file type.

 [Serializable]
public class FileUploadViewModel: InputViewModel<HttpPostedFileBase>
{

    [DataType(DataType.Upload)]
    public override HttpPostedFileBase Value
    {
        get;
        set;
    }

    protected override void InitItemProperties(Item item)
    {          
        base.InitItemProperties(item);       
    }
    protected override void UpdateItemFields(Item item)
    {
      base.UpdateItemFields(item);
    }

}

also created FileUpload.cshtml

@model Sitecore.Foundation.Forms.Custom.Fields.FileUploadViewModel 
<input type="file" value="@Model.Value" />

and created one submit action, but I am getting null in Value field. Please provide me some guidance.

Updated jquery.unobtrusive-ajax.js

Answer 1

The reason your file is not coming through is because the form is sent over ajax and is not using the enctype="multipart/form-data".

This is caused by the script

<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.unobtrusive-ajax.min.js"></script>

loaded via @Html.RenderFormScripts()

More info on this script can be found here:

https://stackoverflow.com/questions/20643512/upload-is-null-after-adding-jquery-unobtrusive-ajax-js-reference

There are 2 options:

• use an asynchronous upload via ajax
• or modify the jquery.unobtrusive-ajax.min.js script.