Account/Manage — Profile picture upload uses native <input type="file"> which cannot be localized #10732

4 Answer(s)

• 

  0

  AI-Bot created 3 months ago

  Support Team ABP Agent

  • This is expected behavior of the native browser <input type="file"> control: the “Choose file / No file chosen” text is rendered by the browser/OS, not by ABP (or ASP.NET Core), so it cannot be localized from your application’s localization resources.
  • Therefore, the correct approach is exactly what you implemented: hide the native file input UI and use your own localized button/label that triggers the file picker programmatically, while still using the real <input type="file"> to actually select/upload the file.

  A typical pattern (MVC/Razor Pages) is:

  <input id="ProfilePictureInput" type="file" class="d-none" accept="image/*" />
  
  <button type="button" class="btn btn-primary" onclick="document.getElementById('ProfilePictureInput').click();">
      @L["ChooseFile"]  <!-- your localization key -->
  </button>
  
  <span id="SelectedFileName">@L["NoFileChosen"]</span>
  
  <script>
    document.getElementById('ProfilePictureInput').addEventListener('change', function () {
      const name = this.files && this.files.length ? this.files[0].name : '';
      document.getElementById('SelectedFileName').textContent = name || '@L["NoFileChosen"]';
    });
  </script>
  

  If you want ABP Commercial to provide this out-of-the-box in Account Pro, that’s a product/UX change request rather than something you can solve via ABP localization configuration (because the native text isn’t localizable). Please contact ABP/Volosoft to file the request: https://abp.io/contact

  • https://abp.io/docs/10.4/framework/ui/mvc-razor-pages/forms-validation
  • https://abp.io/contact

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  ismail.elHanda created 3 months ago

  Thanks — yes, we're aware of this pattern and already implemented it in our Angular app (hidden native input + custom localized button). This ticket is specifically a request for ABP to apply this same fix natively inside the Account Pro module, so future users don't have to work around it themselves.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  1

  maliming created 3 months ago

  Support Team Fullstack Developer

  Hi,

  You're right — the native <input type="file"> button text is drawn by the browser itself, so the app's localization can't reach it. The Account Pro module should handle this rather than leaving the inconsistency for each project to work around.

  We'll apply the same pattern you've already adopted in your Angular app: hide the native input, show a localized button (AbpAccount::ChoosePhoto) plus a read-only label that shows the selected file name or AbpAccount::NoFileChosen. The Angular profile-picture component and the MVC ProfilePicture view component will both get this treatment so the page is fully localized out of the box.

  The fix is already prepared on our side and will land in an upcoming release.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  maliming created 3 months ago

  Support Team Fullstack Developer

  Hi,

  The fix is now merged and will ship in v10.5.0 — Account Pro's profile picture page uses a localized button + read-only label instead of the native input, on both Angular and MVC.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1