File Upload / Dropzone

The row is ordered logically: icon and name at the start, size and the remove button at the end, so the whole row swaps in Arabic and the remove button lands on the left. Build it as a flex row with margin-inline-start: auto on the button, never margin-left: auto and never float: right. If a coloured edge marks the file status, draw it with border-inline-start rather than border-left, or after the flip the edge sits at the opposite end from the name.

The bar fills from the logical start, which in Arabic is the right. Build the fill as an inner element pinned with inset-inline-start: 0 and animate its inline-size from 0 to 100%: it mirrors on its own, because the edge it is anchored to is the one that moved. Stay off transform: scaleX(), since transform-origin accepts no logical keyword at all, and off linear-gradient(to right, …), since gradients have none either. A native <progress> takes its direction from the inherited direction value, so a dir="ltr" you add to the row to fix the file name reverses the fill along with it.

A file name is user text whose direction you cannot know in advance, so isolate it instead of forcing one: <bdi>, or unicode-bidi: plaintext on the element holding it. CSS has no direction: auto, since the property takes only ltr and rtl; the automatic behaviour lives in the dir="auto" attribute and in the plaintext keyword, which isolates the run and reads its direction from the first strong character. Without isolation the neutral characters next to digits (hyphen, underscore, dot) take the direction of the Arabic paragraph, the name breaks into islands that are reordered right to left, and invoice_2026.pdf renders on screen as pdf.2026_invoice. Parentheses make it worse, since their Bidi_Mirrored property is Yes and the glyphs themselves swap. Do not patch this with dir="ltr" on the row: that flips the layout and the bar with it, and it mangles Arabic names carrying digits such as "تقرير 2026.pdf".

A file size is a number and a unit, and neither mirrors: numbers read left to right in Arabic too. The failure is mixing systems: a page that prints ٢٫٤ in Arabic-Indic digits and then MB in Latin letters, or one that builds the string with toFixed(1) and glues an Arabic unit onto it, so "2.4 ميجابايت" sits in the list next to "٨٦٠ كيلوبايت". Pick one numbering system for the whole product and format through it: Intl.NumberFormat("ar-EG", { style: "unit", unit: "megabyte", unitDisplay: "short" }) returns the number, the separator and the unit from one source, and the Arabic decimal separator is U+066B, not the dot. If you want Latin digits inside an Arabic page, ask for them explicitly with ar-EG-u-nu-latn.

The picker window is not part of your page: the operating system draws it, and its direction and language follow the device settings, not your dir attribute and not your interface language. Do not promise an Arabic dialog and do not try to style it. The default text inside the input itself (Choose File, No file chosen) comes from the browser locale and cannot be translated or replaced, and ::file-selector-button styles the button without touching its words. That alone is reason enough to hide the input behind a <label> whose text you write yourself.