[SOLVED] Set a placeholder and rename 'browse' button

Set a placeholder and rename 'browse' button

I use Vich Uploader bundle for SF 4.0 in Bootstrap. I would like to set a placeholder and rename 'browse' button.

I have tried to :

Use 'placehoder' attribute (FormType.php)

{{ form_widget(form.imageFile, { 'attr': {'class': 'form-control', 'placeholder': "Please attach picture"}} ) }}

Add 'placeholder' option (error) or label option (change nothing)

How can I do that ?

Please, find below my code

FormType.php

->add('imageFile', VichFileType::class, [])

_form.html.twig

{{ form_widget(form.imageFile, { 'attr': {'class': 'form-control'}} ) }}
{{ form_errors(form.imageFile) }}

Solution

I assume you are using bootstrap 4; I use webpack to recompile bootstrap for my needs and I add this scss code before including bootstrap.scss:

$custom-file-text: (
        en: "Browse",
        it: "Sfoglia"
);

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

This way I can translate or change the file upload button. You can personalize other aspect of Bootstrap using this method, see Bootstrap online documentation

If you don't use webpack you should obtain the same result by adding this css after including bootstrap css

.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}

.custom-file-input:lang(it) ~ .custom-file-label::after {
  content: "Sfoglia";
}

One entry is required per language supported by your Symfony 4 app