0

I have a button that, when clicked in Chrome or Firefox or Edge, shows the file browser window where I can then select a file and complete the file upload. However, when I click the button in Safari, nothing happens - the file browser window does not appear. I am running on Windows 10 and have a Windows version of Safari installed.

Button:

<a href="javascript:void(0)" id="uploadFile">Upload File</a>

Handler:

        $(document).ready(function() {
            $("#uploadFile").click(function() {
                $("#uploadFileHandle").click();
                $('html,body').css('cursor','progress');
                var formdata = false;
                if (window.FormData) {
                  formdata = new FormData();
                }
                $("#uploadFileHandle").on("change", function() {
                    $('html,body').css('cursor','progress');
                    var i = 0, len = this.files.length, file;
                    file = this.files[0];
                    formdata.append("fileUpload", file)
                    if (formdata) {
                        csrftoken();
                        $.ajax({
                            url: "/profile/uploadFile",
                            type: "POST",
                            data: formdata,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if (response.success) {
                                    var res = response.file;
                                    $('html,body').css('cursor','default');
                                }
                            }
                        })
                    }   
                });
            });
        });

Any ideas on how to get the file browser window to appear when the Upload File button is clicked in Safari?

Quoshy
  • 33
  • 1
  • 8
  • yeah just use a jquery plugin, you will save a ton of headache – Steven Sep 06 '17 at 18:43
  • This doesn't open a "file window" in any browser? There's no code to do that, and the anchor is "voided" ? – adeneo Sep 06 '17 at 18:52
  • I could be remembering wrong, but it looks like you are programmatically trying to activate the file upload with an artificial `click` call and I THINK some browsers disable this as a security measure and require a direct user click. That's why a lot of people will use the label field with a `for` attribute as the element to click to trigger a file upload dialog. – Jonathan Bowman Sep 06 '17 at 19:41

2 Answers2

1

I believe that, for security reasons, some browsers will baulk at programmatic activation of file upload dialogs.

Instead of an a tag, try using the label tag with a for attribute equal to the ID of your file upload input, like this:

<label for="uploadFileHandle">Upload File</label>

When a label has a for attribute, clicking it will automatically also click the element that has a matching ID. This behavior is not blocked by any browsers I know of and will lighten your javascript, too.

body {
  padding: 25px;
}

#uploadFile {
  transition: all .2s ease-in-out;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  background-color: #2ecc71;
  border: 2px solid #2ecc71;
  color: #ffffff;
  font-family: sans-serif;
  cursor: pointer;
}

#uploadFile:hover {
  background-color: #ffffff;
  color: #2ecc71;
}

#uploadFileHandle {
  visibility: hidden;
}
<label for="uploadFileHandle" id="uploadFile">Upload File</label>
<input type="file" id="uploadFileHandle">
Jonathan Bowman
  • 1,606
  • 1
  • 12
  • 17
  • Thanks! I'll give that a go and let you know how it goes. – Quoshy Sep 06 '17 at 19:55
  • Unfortunately, that didn't do the trick. This is what I tried: and I removed the line: $("#uploadFileHandle").click(); from the jQuery. It worked fine again in Chrome etc. but still nothing in Safari. Do you have any other suggestions? – Quoshy Sep 06 '17 at 20:37
  • I added a snippet to my answer that shows how you would set it up so the label is essentially a button that triggers the file upload, no javascript needed. It's working for me, but not sure how far you can get with their embedded code snippets. Does this example work for you in your version of Safari? – Jonathan Bowman Sep 06 '17 at 20:48
  • Apologies, I left out the tag in my original question - I had class="displayNone" and Safari doesn't like that. Removing that and styling it as you have did the trick. I really appreciate your answer! I wouldn't have been able to figure it out without you. – Quoshy Sep 06 '17 at 20:55
0

Figured it out thanks to a comment on this post: How to open a file / browse dialog using javascript?

I apologize for leaving out an important line in my original question:

<input type="file" class="displayNone" id="uploadFileHandle">

Apparently, Safari doesn't like the class="displayNone" on the input element. I got it working by removing the displayNone class and then styling it differently to hide the element. Thanks for the replies everyone!

Quoshy
  • 33
  • 1
  • 8