Typescript file upload validation

Question

I'm trying to upload a file but i get an error for the following code. The error is property does not exist on type HTML Element. How to resolve this?

I have commented the error for the following line of code.

component.html

<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>

   <ul>
     <label>Select a Module Name</label>
     <select id = "ModuleDropDown">
       <option value="">Select</option>
       <option value="Recuirtmnet">Recuirtmnet</option>
       <option value="Talent" selected="selected">Talent</option>
       <option value="Attrition">Attrition</option>
       <option value="Performance">Performance</option>
       <option value="Survey">Survey</option>
      </select>
     </ul>

    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>

component.ts

fileSelected() {

    //Property 'files' does not exist on type 'HTMLElement'
    let file = document.getElementById('fileToUpload').files[0]; 

    if (file) {
        let fileSize = 0;
        if (file.size > 1024 * 1024)
            this.fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
            this.fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        let dropDown = document.getElementById("ModuleDropDown");


        //Property 'options' does not exist on type 'HTMLElement'.
        //Property 'selectedIndex' does not exist on type 'HTMLElement'
        let dpVal = dropDown.options[dropDown.selectedIndex].value;

        let init_params = {};
        this.init_params.action = 'prepare';
        this.init_params.file_name = file.name;
        this.init_params.file_size = fileSize;
        this.init_params.moduleName = dpVal;

        ws.send(JSON.stringify(init_params))
        console.log("sending init params.....")

    }
}

I'm trying to upload a file and after submitting trying to get the file name, file size and file type and in the other part trying to get the dropdown value. — Jijo Robin, Nov 09 '18 at 08:16
I think you use a bad approach. In angular batter use change event and handle this event. And then get the file from event There you can find a good example https://stackoverflow.com/questions/47936183/angular-file-upload — Roman Skydan, Nov 09 '18 at 08:20

score 3 · Accepted Answer · answered Nov 09 '18 at 08:18

There are a lot of issues with your code. You're using Vanilla JavaScript instead of leveraging the Angular Syntax.

The change on the File Input can be tracked using (change) and passing an $event Object to the Change Handler.
You can use [(ngModel)] to get the value of the selected option from the dropdown.
It's not advisable to use document to access the DOM and make changes to it or show data to it. You should use the String Interpolation Syntax({{}}) instead.

Here's a Sample StackBlitz for your ref.

Select an Option and then Upload a File to see the Selected File Details on the UI and the Selected Dropdown Option on the console.

Typescript file upload validation

1 Answers1