TypeScript : TS2531: Object is possibly 'null'

Question

       <div >
            <input type="file"  id="uploadImage"/>
            <button
                @click="Upload"
                style="width: 80px;height: 30px;"
            >
                upload
            </button>
          </div>

  //upload()
    const upload = () => {
      const file= (document.getElementById('uploadImage') as HTMLInputElement).files[0];

    }

I want to get the value of < input type=file/ >, but there is the following error. How to write it will solve it? TS2531: Object is possibly 'null'.

Answer 1

TypeScript is saying you must handle the case where document.getElementById('uploadImage') could return null and where .files could return null.

The first is not possible in your case because you are in a handler for #uploadImage so you can just add a dummy null check or even a non-null assertion, that is, input!.files[0].

const input = document.getElementById('uploadImage') as HTMLInputElement; 
// file may be null if use canceled out of the dialog
const file = input!.files?[0]

Another option would be to get the element from the event, but .files could still be null.

 const upload = (e: ) => {
      const file= (e.target as HTMLInputElement).files?.[0];
 }

Lastly, you should be checking for the change event, not the click since the user hasn't selected anything when they click.

You can see a working example with plain TS here I don't know what framework you're using but it's not really relevant to your question.

// Non-null assertion because we know input exists.
const input: HTMLInputElement = document.querySelector("input")!;

input.addEventListener("change", function test(e: Event) {
  const file = input.files?.[0];
  // .files may be null, handle it properly
  console.log(file ? "File selected: " + file.name : "No file selected")
})