CODEWITHSUNDEEP
htmlgoogle-chromesafari
Tran Audi
Tran Audi

Reputation: 607

input type="file" attribute accept not working in Safari on macbook

I have the following code:

<div class="row">
  <div class="col-xs-12">
    <div class="form-group">
      <label for="attachments">Attach a file</label>
      <input type="file" id="attachments" accept=".doc,.gif,.jpeg,.jpg,.pdf,.png,.xls,.xlsx,.zip" name="attachments" class="form-control">
    </div>
  </div>
</div>

It works fine in chrome browser on windows, but it does not work in Safari browser of macbook.

enter image description here

Any ideas for this?

Upvotes: 0

Views: 9243

Answers (1)

Kaiido
Kaiido

Reputation: 137141

Indeed it seems Safari doesn't accept files' extensions as accept attribute...
And it could be seen as a bug since they will do the MIME detection against this exact file extension...)

The only workaround I see for now, is to use the full MIME type.
But this may lead to some problem where some browsers will use the OS's MIME types dictionary against... file's extensions.

So the best course of action here is maybe to add both MIMEs and extensions.

<div class="row">
  <div class="col-xs-12">
    <div class="form-group">
      <label for="attachments">Attach a file</label>
      <input type="file" id="attachments" 
        accept="application/msword,image/gif,image/jpeg,application/pdf,image/png,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip,.doc,.gif,.jpeg,.jpg,.pdf,.png,.xls,.xlsx,.zip" 
        name="attachments" class="form-control">
    </div>
  </div>
</div>
(Got the MIMEs from Apache's list)

Also note that this accept attribute should only be there as a convenient way for users to know what kind of files are expected, and absolutely not as a way to check what file types you'll get. Your actual list seems so diversified that it makes little sense to use it.

Upvotes: 1

Related Questions