Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input type FILE on HTML FORM not working on Safari Version 14.0.1 (14610.2.11.51.10)

Tags:

SOLVED/NOTE: I have accepted the answer of adding the "accept=" option to the HTML code as a solution to the problem. It should be noted that although this does work as as a work around, the root cause is likely a Safari bug - it should NOT be a requirement to add this to your HTML to make this functionality work.

ORIGINAL PROBLEM DESCRIPTION & INFO:

My mac received an update this morning, now running macOS Mojave 10.14.6 (18G6042). It looks like Safari must have received an update as part of this, although Apple didn't give the update specifics, just the usual "You need to Restart" with no extra info, followed by 20 mins of waiting. Safari is now Version 14.0.1 (14610.2.11.51.10).

Since the update, I find that I can no longer submit files through HTML forms in Safari. The "Choose File" button is displayed, but clicking it results in nothing. I'll post my code below, but I also verified this using the w3schools example at https://www.w3schools.com/tags/att_input_type_file.asp (it won't work in Safari now either), and my code works fine in Chrome & Firefox on the same laptop.

Does anyone have any info on this? Are extra directives required for this to work in Safari now? Is it blocked due to some security issue? Is this just a bug?

Here's my test code in case it is relevant, although it's more or less the same as the w3schools example, with some added PHP to display the file info.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Upload File Test</title>
</head>

<body>

<br/>
<?php
  if (isset($_POST["UploadFile"]))
  {
      if ($_FILES["myfile"]["error"] > 0)
      {
        echo "No file was selected.<br/>\n";
      }
      else
      {
          echo "Upload: " . $_FILES["myfile"]["name"] . "<br/>\n";
          echo "Type: " . $_FILES["myfile"]["type"] . "<br/>\n";
          echo "Size: " . ($_FILES["myfile"]["size"] / 1024) . " kB<br/>\n";
          echo "Stored in: " . $_FILES["myfile"]["tmp_name"] . "<br/>\n";
      }
  }
?>

<FORM NAME="file_upload" METHOD="POST" ACTION="file-test.php" enctype="multipart/form-data" accept-charset="UTF-8">

<label for="file">Upload File:</label>
<input type="file" name="myfile" id="myfile" />

<INPUT type="Submit" name="UploadFile" value="Upload" />
         
</FORM>

<br/>

</body>
</html>

MORE INFO: So the problem continues, and sometimes the dialog opens now, but sometimes it doesn't. Previously, the dialog would always open in the last directory you loaded or saved files from, I just saved a bunch of pages as PDF (via Print) for some work, and now when I go to Choose File again, it shows the dialog below (unfortunately the screenshot doesn't capture the full path, but you get the idea). So it looks like this is an issue within Safari, but I'm still not sure exactly what or how to rectify it. Plus, while the dialog opens on my local test page, it's not opening for web based pages (my sites, w3schools, etc).

Default Choose File Directory

MORE INFO: Safari just defaulted again to the "inaccessible" directory it keeps defaulting to sometimes, here's a screen shot, in case the additional info helps anyone further (probably just the guys at Apple in fixing the bug I'm guessing)... Normally you can't browse to this folder from Safari, which I'm guessing is part of this bug - Safari is trying to default to this directory for file upload, when it can't jump to the last previously used directory for whatever reason.

enter image description here

like image 906
Peter Barton Avatar asked Nov 15 '20 10:11

Peter Barton


People also ask

How do I upload files to Safari?

2, there's a workaround: simply drag a file or files onto the upload button. The upload buttons lights up when the cursor lands on top of them. Some sites are designed to allow drag-and-drop, and may show other animation or a confirmation as to the target.

How do you upload a form in HTML?

The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute.


2 Answers

I have run into the same issue yesterday.

Having looking into it I have found it working elsewhere and fixed it on the site I'm working on by adding an accept attribute with a file types list to the input tag. (e.g. <input type="file" accept=".xls,.xlsx,.xlsb,.txt,.csv,.tsv"/>)

Works fine now in Safari version 14.0.1 (14610.2.11.51.10) on Mojave 10.14.6

like image 141
Michael K Avatar answered Sep 28 '22 06:09

Michael K


I confirm that this is a problem with Safari at least on Mojave. I have Safari 14.0.1 (14610.2.11.51.10) on Mojave 10.14.6 (18G6032 then 18G6042 after security update 2020-06: no change). It seems that no file upload will work: it fails on my own website with very simple html almost limited to <input type="file" />, and also fails on two standard CMS (an old WordPress and current MODX). There is no file selection window coming at all. I tried allowing anything (e.g. popup windows) : no change.

OS X's log indicates that Safari is denied file access when the button is clicked:

Sandbox: Safari(4721) deny(1) iokit-open AppleAPFSUserClient Violation: deny(1) iokit-open AppleAPFSUserClient

It is annoying for those maintaining a website were non-technical users have to provide files: they may conclude that the site is broken while it is not. I have no solution other than adding a warning suggesting to use another browser.

like image 42
PhiM Avatar answered Sep 28 '22 08:09

PhiM