A profile-photo form works perfectly with your JPG test image. Then someone selects a photo from their iPhone, and the preview stays empty.

The file may be perfectly valid. Your upload workflow may simply depend on image support that is different from the support on the user's device.

HEIC makes this easy to notice. A photo can open normally in one application and fail at a later step in another. Fixing the experience starts with identifying which step actually failed.

Selecting a file does not mean the browser can decode it

A typical file input looks straightforward:

<label for= "photo" > Choose a photo </label> <input id= "photo" name= "photo" type= "file" accept= "image/*" />

Enter fullscreen mode

Exit fullscreen mode

The accept attribute helps guide the file picker. It does not add an image decoder, convert a selected file, or validate its contents.…