How to get rid of HEIC files in your app

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.