Change WFFM file upload button text

Question

I created a WFFM form with File upload field to upload the files and using it in russian website. But the file upload button text and placeholder are displaying in English and I did not find any option in Sitecore to use different text for different language versions. How can I change button text "Choose file" and placeholder text "No file choosen" to my custom text.
Sitecore : Sitecore 8.1 update 1
WFFM : Web Forms for Marketers 8.1 rev. 151217

Thanks

Answer 1

The short answer is, you can't. If you look at the razor view for the FileUploadField control, this is how it builds it:

@using Sitecore.Forms.Mvc.Html
@model Sitecore.Forms.Mvc.ViewModels.Fields.FileUploadField

@using (Html.BeginField())
{   
    @Html.TextBoxFor(m => m.Value, new { type = "file"}  )
}

That html helper function will create this markup:

<input type="file" name="fieldname" id="fieldName"/>

This type of field is entirely controlled by the browser, and will look different in different browsers:

Hack it with JavaScript

The most used option is to use CSS to hide the file upload control and have a second button on the form that passes the click events through to the file upload control

So you would need to create a custom WFFM control that inherits from the FileUploadControl and add a field for your button text.

Then you could do something like this in your razor:

@using Sitecore.Forms.Mvc.Html
@model Sitecore.Forms.Mvc.ViewModels.Fields.FileUploadField

@using (Html.BeginField())
{   
    @Html.TextBoxFor(m => m.Value, new { type = "file", @class = "hidden" }  )
    <button id="alternate-@(Model.Title)">
        @Model.ButtonText
    </button>
}

<script type="text/javascript">
$("#alternate-@(Model.Title)").click(function(){
    $("#@(Model.Title)").click();
});
</script>
<input type="file" id="fileUpload" name="fileUpload">

Where @Model.ButtonText is your new field for the button text on the custom control.

This is the most basic method to do it, you could expand on that with styles and more comprehensive markup to make it look good for the user. But the basics would be the same.

References:

• Browser images: https://www.aurigma.com/upload-suite/developers/aspnet-mvc/how-to-upload-files-in-aspnet-mvc
• Creating a custom control in WFFM: https://soen.ghost.io/creating-a-custom-field-type-in-wffm-for-sitecore/