logo
podcast Podcast
get help Get Unstuck

How to get rid of HEIC files in your app

And it makes your app easier to use for non-iPhone users too

Joel Clermont
Joel Clermont
2023-10-27

Let's say you have a file input on your form allowing a user to upload a profile image. You can add an accept attribute to your file inputs with a comma-separated list of acceptable file types for your application. You can list file extensions like .png or mime types like image/png.

<input type="file" name="profile_image" accept="image/png,image/jpeg,image/gif" />

The main benefit here is the user's browser will automatically filter their file picker to those types. It helps users avoid uploading a file type you don't support.

Please keep in mind: this doesn't count as validation though. You'll still want to validate the file type on the server side. But it is a nicer experience for the user.

And one additional benefit for iPhone users that sometimes upload those pesky HEIC files: Safari will see the accepted mime types and convert the native HEIC format to one of your accepted types automatically.

Here to help,

Joel

P.S. Ever get to the end of the week and think "wow, I could really use more help on my Laravel app"? We can help.

Toss a coin in the jar if you found this helpful.
Want a tip like this in your inbox every weekday? Sign up below 👇🏼
email
No spam. Only real-world advice you can use.