Folder upload using webkitdirectory and directory not Working on safari browser

Question

I am trying to upload directory using input type file.Its Working fine in GoogleChrome and FireFox but while I am testing it in Safari browser its not working its allowing user to select single file as well. Is there any way to restrict user to select single file and allowed only to select folder in Safari browser.

here is my code where I am using:

const UploadFolder = props => {
  return (
<span>
<a className="dropdown-item" href='#'>
  <i className="fa fa-cloud-upload mr-2 upload-icon" aria-hidden="true"></i>Upload Files Folder</a>
 <input type='file' onChange={(e) => { props.onFolderSelect(e) }} 
 directory="" webkitdirectory="" mozdirectory="" allowdirs="" multiple />
</span>
)
}

export default UploadFolder;

If anyone knows the solution for Safari browser please guide me.

any help will be appreciated.

Thanks in Advance,

Folder upload is not supported in Safari. [Check support here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory#Browser_compatibility) — swapnilmali, Apr 12 '19 at 10:57
@swapnilmali Yes I already checked there. Is there any way to upload folder in Safari? — Kanekar, Apr 12 '19 at 11:11
@Kanekar Did you find a solution? It looks like is supported now — Nathália Pissuti, Aug 10 '20 at 14:46
@NatháliaPissuti No I have not found solution yet. Need to check its supporting or not now. — Kanekar, Sep 18 '20 at 13:43

score 1 · Answer 1 · answered Nov 11 '21 at 15:29

Hi i found a some way to make safari can only select a folder but maybe it's a little bit tricky by using accept extension to block all file extension in safari

In macOS maximum file extension length is limit at 255 character so i'll generate random extension which length more than 255 character and pass it into webkitDirectory input type file

// Example
const fakeExtension = `.${a.repeat(256)},`;
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
return (
  <input
    type="file"
    id="folder-uploader"
    accept={isSafari ? fakeExtension : ''}
    webkitdirectory=""
  />
);

score 1 · Answer 2 · answered Dec 10 '21 at 06:21

I think it is not necessary to fake a 256 length extension string. Any extension that no file can match will work as well. I tweaked a little bit to NCTH's answer.

const fakeExtension = `..`; // no file will match this;

return (
  <input
    type="file"
    accept={fakeExtension}
    webkitdirectory=""
  />
);

Folder upload using webkitdirectory and directory not Working on safari browser

2 Answers2