22

I know that these two words get automatically translated, due to the browser language. But my HTML is not doing that.

HTML:

<p>
  <label for="id_company_logo">
     Company Logo:
  </label>
  <input type="file" name="company_logo" id="id_company_logo" />
</p>

It is generated from following "form" code of django:

company_logo = forms.ImageField(label=_('Company Logo'),required=False, error_messages = {'invalid':_("Image files only")}, widget=forms.FileInput)

Am I doing anything wrong? I searched around for some time now, but I had absolutely no luck.

Thanks in advance.

ngrashia
  • 9,869
  • 5
  • 43
  • 58
0xmtn
  • 2,625
  • 5
  • 27
  • 53
  • 4
    I don't think those messages *can* be translated, as they are native to the browser's file upload control. They should be displayed in the browser's language. – Pekka Jan 15 '13 at 15:04
  • I, too, know that. But the weird thing, it is not behaving like that. :S – 0xmtn Jan 15 '13 at 15:06
  • What happens instead? Can you show an example? – Pekka Jan 15 '13 at 15:07
  • Nothing happens - I change the browser's language to Turkish, for example, but it is still shown in English. – 0xmtn Jan 15 '13 at 15:09
  • Try using an incognito window in Chrome/chromium and change language there. – PepperoniPizza Jan 15 '13 at 15:14
  • When clicking the settings in incognito, in opens normal chromium settings page, and again, nothing happens. It is still shown in English. – 0xmtn Jan 15 '13 at 15:17
  • 3
    Which language setting are you changing. Are you getting all the browser's interface elements (menus, etc.) in Turkish? – Pekka Jan 15 '13 at 15:17
  • Using django's localization stuff, I translate all the button's, labels, everything manually, due to the browser language change. And yes, they're all changing. ;) – 0xmtn Jan 15 '13 at 15:21
  • The "Choose File" and "No file chosen" text cannot be translated by your application because it's not a string that is set by your application. That string is defined and translated by your browser. If changing the browser's language does not change those strings, you should check to make sure that you have the translation for that languages (if translations are distributed separately) and if they are present, maybe file a bug with your browser. – T0xicCode Jan 16 '13 at 16:45
  • Try Bootstrap FileStyle http://stackoverflow.com/a/18909078/757850 – Fernando Kosh Sep 20 '13 at 05:03
  • possible duplicate of [How to change the button text of ?](http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file) – pstenstrm Aug 25 '14 at 07:55

2 Answers2

11

This problem was disscused several times on Stackoverflow.
Here are the articles:
How to change the button text of input type=“file” ?
Labeling file upload button
Change default text in input type=“file”?

But this is a great article.

Here you can find a solution to your problem.

Sven
  • 1,450
  • 3
  • 33
  • 58
Dragos
  • 171
  • 8
  • 3
    link is dead https://web.archive.org/web/20161119093541/http://www.appelsiini.net:80/projects/filestyle – apm Dec 11 '17 at 10:05
3

Please sue this.

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 3px;
  padding: 8px 12px;
  height: 39px!important;
  width:calc(100% - 26px);
}

.upload-btn-wrapper .btnr {
  border: 1px solid gray;
  color: gray;
  background-color: #eee;
  padding: 5px 10px;
  border-radius: 1px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
}
.upload-btn-wrapper .btnr + span {
  padding: 5px;
  font-weight: normal;
  }

.upload-btn-wrapper input[type=file] {
    font-size: 42px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
<div class="upload-btn-wrapper">
  <button class="btnr" title="haga clic para cargar el archivo">Seleccionar archivos</button>
  <span>No hay archivos elegidos</span>
  <input type="file" name="myfile" title="haga clic para cargar el archivo" />
</div>

And css and run to see

Rajib Ganguly
  • 51
  • 3