Hidden iframe design details of SAP UI5 FileUploader

Its implementation code location is as follows:

 /**
     * Helper to retrieve the I18N texts for a button
     * @private
     */
    FileUploader.prototype.getBrowseText = function() {

        // as the text is the same for all FileUploaders, get it only once
        if (!FileUploader.prototype._sBrowseText) {
            var rb = sap.ui.getCore().getLibraryResourceBundle("sap.ui.unified");
            FileUploader.prototype._sBrowseText = rb.getText("FILEUPLOAD_BROWSE");
        }

        return FileUploader.prototype._sBrowseText ? FileUploader.prototype._sBrowseText : "Browse...";

    };

As can be seen from the above figure, the SAP UI5 framework reads its corresponding value from a library file according to the key FILEUPLOAD_BROWSE , and the result is the string Browse... .

The ternary expression in line 1854 in the above figure represents the logic that if the read fails from the library file according to the key FILEUPLOAD_BROWSE , the hard-coded default value Browse... is returned.

The resource file location of the sap.ui.unified entire library to which the SAP UI5 FileUploader control belongs: https://sapui5.hana.ondemand.com/resources/sap/ui/unified/messagebundle_en_US.properties

For SAP UI5 globalization, multilingual and translation support, please refer to Jerry's tutorial: SAP UI5 Application Development Tutorial No. 8 - Multilingual Support

In the onAfterRendering hook of FileUploader, execute prepareFileUploadAndIFrame :

First prepare for file upload:

Do not confuse this this.oFileUpload with this.oFilePath before.

This aFileUpload is where the final rendered native HTML source is stored.

The final generated source code:

 '<input ', 'type="file" ', 'aria-hidden="true" ', 'name="myFileUpload" ', 'id="__xmlview0--fileUploader-fu" ', 'tabindex="-1" ', 'size="1" ', 'title="Upload&#x20;your&#x20;file&#x20;to&#x20;the&#x20;local&#x20;server" ', '>'

 this.oFileUpload = jQuery(aFileUpload.join("")).prependTo(this.$().find(".sapUiFupInputMask")).get(0);

The css class found by the above code through jQuery code: sapUiFupInputMask , and the location in the elements panel is as follows:

Finally this.oFileUpload points to the dom instance returned by jQuery via the css selector:

That is, this input field:

 <input type="file" aria-hidden="true" name="myFileUpload" id="__xmlview0--fileUploader-fu" tabindex="-1" size="1" title="Upload your file to the local server">

Create a hidden iframe and insert it into the static area:

Register the load event for this hidden iframe:

After clicking Browse... button, a dialog box for selecting a local file will pop up:

Then trigger handlechange and use var uploadForm = this.getDomRef("fu_form"); to get the form instance:

Obtain the local file selected by the user through the target.files field of the event object.

Throw a change event: