PP.Ui.FileUpload (settings)
settings. JSON object that contains values of component properties.
The FileUpload constructor creates an instance of the FileUpload component.
Due to the browser restrictions, loading of several files at same time is unavailable.
To execute the example, in the HEAD tag add links to PP.js library and to PP.css visual styles. To place the component, add DIV items with the fileUpload identifiers on the page. In the onload event of the <body> tag it is necessary to set the call of the createFileUpload() function. In the SCRIPT tag add code of creating the FileUpload component:
function createFileUpload() {
// Create component to load file
fileUpload = new PP.Ui.FileUpload({
// Set parent element
ParentNode: document.getElementById("fileUpload"),
// Set whether additional fields appear on reloading
AutoExpandable: true,
// Set maximum number of input fields
MaxInputsCount: 5,
// Set link to file handler
PostUrl: "//localhost:2755/samples/",
// Set parameters of the button to select files
FileButton: {
Content: "Browse...",
Width: 60
}
});
// Set event handler of file sending
fileUpload.FileUploaded.add(function(sender, args) {
console.log("Files are loaded");
});
// Set event handler of file loader value changing
fileUpload.ValueChanged.add(function(sender, args) {
console.log("File loader value is changed");
});
}
After executing the example the FileUpload component is added on the page, it looks as follows:
Clicking the Browse... button opens a window for file selection. After the file is loaded, its name appears in the text box, and an additional field becomes available:
The file loader value change message is displayed in the console:
File loader value is changed
No more than five additional fields may appear.
Add a file using program:
// Add file
fileUpload.setFileName("File.txt");
Get a list of loaded files:
var files = fileUpload.getFiles();
// Get loaded files
console.log("Loaded files: ");
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
}
As a result, the list of loaded files is displayed in the console:
Loaded files:
Result.txt
File.txt
Send files:
//Send files fileUpload.send();
As a result, the message about sending is displayed in the console:
Files are loaded
Clear input boxes:
// Clear input boxes fileUpload.clearInputs();
As a result, input boxes are empty:
See also: