3

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 WFFM FOrm

Thanks

  • Did you try setting your browser language to Russian? – Gatogordo Nov 2 '17 at 18:56
3

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:

File upload 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:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.