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).
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.
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.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With