打字稿文件上传验证

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.....")

    }
}

Answer 1

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

1. The change on the File Input can be tracked using (change) and passing an $event Object to the Change Handler.

2. You can use [(ngModel)] to get the value of the selected option from the dropdown.

3. 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.