https://worlddata.ai/Scripts/jquery-input-file-text.js

1(function($) {
2 
3    $.fn.inputFileText = function(userOptions) {
4        // Shortcut for plugin reference
5        var P = $.fn.inputFileText;
6
7        var options = P.getOptions(userOptions);
8
9        if(P.shouldRemoveInputFileText(this, options.remove)) {
10            return P.removeInputFileText(this);
11        }
12        else if(P.hasInputFileText(this)) {
13            return this;
14        }
15
16        // Keep track of input file element's display setting
17        this.attr(P.DISPLAY_ATTRIBUTE, this.css('display'));
18
19        // Hide input file element
20        this.css({
21            display: 'none'
22            //width:  0
23        });
24
25        // Insert button after input file element
26        var button = $(
27            '<input type="button" value="' + options.text + '" class="' + options.buttonClass + '" />'
28            ).insertAfter(this);
29
30        // Insert text after button element
31        var text = $(
32            '<span style="margin-left: 5px" class="' + options.textClass + '"></span>'
33            ).insertAfter(button);
34
35        // Open input file dialog when button clicked
36        var self = this;
37        button.click(function() {
38            self.click();
39        });
40
41        // Update text when input file chosen
42        this.change(function() {
43            // Chrome puts C:\fakepath\... for file path
44            text.text(self.val().replace('C:\\fakepath\\', ''));
45        });
46 
47        // Mark that this plugin has been applied to the input file element
48        return this.attr(P.MARKER_ATTRIBUTE, 'true');
49    };
50
51    $.fn.inputFileText.MARKER_ATTRIBUTE = 'data-inputFileText';
52    $.fn.inputFileText.DISPLAY_ATTRIBUTE = 'data-inputFileText-display';
53
54    $.fn.inputFileText.getOptions = function(userOptions) {
55        return $.extend({
56            // Defaults
57            text: 'Choose File',
58            remove: false,
59            buttonClass: '',
60            textClass: ''
61        }, userOptions);
62    };
63
64    /**
65    Check if plugin has already been applied to input file element.
66    */
67    $.fn.inputFileText.hasInputFileText = function(inputFileElement) {
68        return inputFileElement.attr($.fn.inputFileText.MARKER_ATTRIBUTE) === 'true';
69    };
70
71    /**
72    Check if plugin should be removed from input file element.
73    */
74    $.fn.inputFileText.shouldRemoveInputFileText = function(inputFileElement, remove) {
75        return remove && $.fn.inputFileText.hasInputFileText(inputFileElement);
76    };
77
78    /**
79    Remove plugin from input file element.
80    */
81    $.fn.inputFileText.removeInputFileText = function(inputFileElement) {
82        var P = $.fn.inputFileText;
83
84        inputFileElement.next('input[type=button]').remove();
85        inputFileElement.next('span').remove();
86        return inputFileElement.attr(P.MARKER_ATTRIBUTE, null)
87            .css({
88                display: inputFileElement.attr(P.DISPLAY_ATTRIBUTE)
89            })
90            .attr(P.DISPLAY_ATTRIBUTE, null);
91    };
92 
93}(jQuery));