How to get the file name in HTML 5 File Upload?
You can get the file name for the uploaded file of EJ2 Uploader component by the following ways:
Get the file name using the selected event
The Selected event for the EJ2 Uploader component will be triggered for every file selection. So, you can get the file name from the selected event arguments as shown below.
[index.html]
<input type="file" id="fileupload" name="UploadFiles">
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
selected: onSelect
});
uploadObj.appendTo('#fileupload');
function onFileRemove(args) {
args.postRawFile = false;
}
function onSelect(args) {
console.log("Selected File Name is: ", args.filesData[0].name);
}
Get the file name using the Change event
The Change event for the EJ2 Uploader component will be triggered for every file selection. So, you can get the file name from the change event arguments as shown below.
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
change: onChange
});
uploadObj.appendTo('#fileupload');
function onFileRemove(args) {
args.postRawFile = false;
}
function onChange(args) {
if(args.files.length != 0)
console.log("Selected File Name is: ", args.file[0].name);
}
Get the file name using the getFilesData public method
The getFilesData method will return the currently present data of the file shown in the file list. So, you can get the uploaded file name from the getFilesData method in the external button click event as shown below.
[index.html]
<input type="file" id="fileupload" name="UploadFiles"> <input type="button" id="button" value="Click to get the file name" />
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
});
uploadObj.appendTo('#fileupload');
function onFileRemove(args) {
args.postRawFile = false;
}
document.getElementById('button').addEventListener("click", function (e) {
if(this.fileList.length != 0){
console.log("Selected File Name is: ", this.getFilesData()[0].name);
}
}.bind(uploadObj), false);
Get the file name using the filesData public variable
You can get the uploaded file name using the filesData public variable in the external button click event as shown below.
[index.html]
<input type="file" id="fileupload" name="UploadFiles"> <input type="button" id="button" value="Click to get the file name" />
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
});
uploadObj.appendTo('#fileupload');
function onFileRemove(args) {
args.postRawFile = false;
}
document.getElementById('button').addEventListener("click", function (e) {
if(this.fileList.length != 0){
console.log("Selected File Name is: ", this.filesData[0].name);
}
}.bind(uploadObj), false);
Get the file name using the input value of the Uploader
You can get the name of the selected file from the input value of the EJ2 Uploader component in the external button click event as described below.
[index.html]
<input type="file" id="fileupload" name="UploadFiles"> <input type="button" id="button" value="Click to get the file name" />
[index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize the uploader component
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
});
uploadObj.appendTo('#fileupload');
function onFileRemove(args) {
args.postRawFile = false;
}
document.getElementById('button').addEventListener("click", function (e) {
if(this.fileList.length != 0){
console.log("Selected File Name is: ", this.element.value);
}
}.bind(uploadObj), false);
Please find the sample with the provided details.
Sample Link: https://stackblitz.com/edit/cozqth-fx9tdk?file=index.html
Conclusion
I hope you enjoyed learning about how to get the file name in HTML 5 File Upload in JavaScript.
You can refer to our JavaScript File Upload feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript File Upload example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
