Issue
The attachment dialog (file uploader) in onboarding web form was not displaying in Arabic, even though:
- All other form fields were properly translated
- Translations existed in the Arabic translation files
- The system worked correctly in other parts of the application
What i see?
- File uploader dialog showed English text: “Drag and drop files here or upload from”
- “My Device”, “Link”, “Camera” buttons remained in English
- “Drop files here” message appeared in English
- Only some strings like “Link” and “Camera” were properly translated
Investigation Process To Find out The Reason
- Checked Translation Files: Verified that translations existed in
apps/frappe/frappe/locale/ar.po - Analyzed Web Form Code: Examined
apps/frappe/frappe/website/doctype/web_form/web_form.py - Identified Missing Translations: Found that some key strings had empty translations:
"Drag and drop files here or upload from"→msgstr ""(empty)"My Device"→msgstr ""(empty)"Drop files here"→msgstr ""(empty)
The load_translations method in WebForm class was missing some file uploader strings from its translation list. The method collects specific strings for translation but didn’t include all the strings used by the file uploader component.
Translations are not always sent from the server to the front-end in the case of Web Forms
Solution Using Monkey Patching
Instead of modifying core Frappe files (which is not recommended), we implemented a monkey patching solution.
Step 1: Create Utility Module
Create a new file: apps/your_app/your_app/utils/web_form.py
# Monkey patch the load_translations method to include missing file uploader translations
def monkey_patch_web_form_translations():
"""Monkey patch the load_translations method to include missing file uploader translations"""
import frappe
from frappe import _
from frappe.website.doctype.web_form.web_form import WebForm
# Store the original method
original_load_translations = WebForm.load_translations
def patched_load_translations(self, context):
"""Patched load_translations method with additional file uploader translations"""
# Call the original method first
original_load_translations(self, context)
# Add missing file uploader translations
additional_messages = [
"Drag and drop files here or upload from",
"My Device",
"Link",
"Camera",
"Upload",
"Set all public",
"Set all private",
"Public",
"Private",
"Optimize",
"Drop files here",
"Take Photo",
"No Images",
"Total Images",
"Preview",
"Submit",
"Capture",
"Attach a web link",
"← Back to upload files",
]
# Get the existing messages from context
existing_messages = []
if hasattr(context, 'translated_messages'):
try:
import json
existing_dict = json.loads(context.translated_messages)
existing_messages = list(existing_dict.keys())
except:
pass
# Add our additional messages to the existing ones
all_messages = existing_messages + additional_messages
# Update the context with all messages
context.translated_messages = frappe.as_json({message: _(message) for message in all_messages if message})
# Replace the method
WebForm.load_translations = patched_load_translations
Step 2: Import and Execute the Patch
Modify apps/your_app/your_app/__init__.py:
from .utils.web_form import monkey_patch_web_form_translations
# Apply the monkey patch when the app is loaded
monkey_patch_web_form_translations()
Step 3: Add Missing Translations
Add the missing translations to apps/your_app/your_app/translations/ar.csv:
"Drag and drop files here or upload from","اسحب الملفات هنا أو قم بتحميلها من",""
"My Device","جهازي",""
"Drop files here","أفلت الملفات هنا",""
Step 4: Build and Restart
# Clear cache
bench --site your_site clear-cache
bench --site your_site clear-website-cache
# Build the app
bench build --app your_app
# Restart bench
Ctrl + c
bench start
