https://www.webrtc-experiment.com/FileSelector.js

1function FileSelector() {
2    var selector = this;
3
4    var noFileSelectedCallback = function() {};
5
6    selector.selectSingleFile = function(callback, failure) {
7        if (failure) {
8            noFileSelectedCallback = failure;
9        }
10
11        selectFile(callback);
12    };
13    selector.selectMultipleFiles = function(callback, failure) {
14        if (failure) {
15            noFileSelectedCallback = failure;
16        }
17
18        selectFile(callback, true);
19    };
20    selector.selectDirectory = function(callback, failure) {
21        if (failure) {
22            noFileSelectedCallback = failure;
23        }
24
25        selectFile(callback, true, true);
26    };
27
28    selector.accept = '*.*';
29
30    function selectFile(callback, multiple, directory) {
31        callback = callback || function() {};
32
33        var file = document.createElement('input');
34        file.type = 'file';
35
36        if (multiple) {
37            file.multiple = true;
38        }
39
40        if (directory) {
41            file.webkitdirectory = true;
42        }
43
44        file.accept = selector.accept;
45
46        file.onclick = function() {
47            file.clickStarted = true;
48        };
49
50        document.body.onfocus = function() {
51            setTimeout(function() {
52                if (!file.clickStarted) return;
53                file.clickStarted = false;
54
55                if (!file.value) {
56                    noFileSelectedCallback();
57                }
58            }, 500);
59        };
60
61        file.onchange = function() {
62            if (multiple) {
63                if (!file.files.length) {
64                    console.error('No file selected.');
65                    return;
66                }
67
68                var arr = [];
69                Array.from(file.files).forEach(function(file) {
70                    file.url = file.webkitRelativePath;
71                    arr.push(file);
72                });
73                callback(arr);
74                return;
75            }
76
77            if (!file.files[0]) {
78                console.error('No file selected.');
79                return;
80            }
81
82            callback(file.files[0]);
83
84            file.parentNode.removeChild(file);
85        };
86        file.style.display = 'none';
87        (document.body || document.documentElement).appendChild(file);
88        fireClickEvent(file);
89    }
90
91    function getValidFileName(fileName) {
92        if (!fileName) {
93            fileName = 'file' + (new Date).toISOString().replace(/:|\.|-/g, '')
94        }
95
96        var a = fileName;
97        a = a.replace(/^.*[\\\/]([^\\\/]*)$/i, "$1");
98        a = a.replace(/\s/g, "_");
99        a = a.replace(/,/g, '');
100        a = a.toLowerCase();
101        return a;
102    }
103
104    function fireClickEvent(element) {
105        if (typeof element.click === 'function') {
106            element.click();
107            return;
108        }
109
110        if (typeof element.change === 'function') {
111            element.change();
112            return;
113        }
114
115        if (typeof document.createEvent('Event') !== 'undefined') {
116            var event = document.createEvent('Event');
117
118            if (typeof event.initEvent === 'function' && typeof element.dispatchEvent === 'function') {
119                event.initEvent('click', true, true);
120                element.dispatchEvent(event);
121                return;
122            }
123        }
124
125        var event = new MouseEvent('click', {
126            view: window,
127            bubbles: true,
128            cancelable: true
129        });
130
131        element.dispatchEvent(event);
132    }
133}