TypeScript : TS2531: El objeto podría ser 'null'

       <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];

    }

Quiero obtener el valor de < input type=file/ >, pero aparece el siguiente error. ¿Cómo escribirlo para solucionarlo? TS2531: El objeto podría ser 'nulo'.

Respuesta #1

TypeScript está indicando que debes manejar el caso en que document.getElementById('uploadImage') podría devolver null y en el que .files podría devolver null.

El primero no es posible en tu caso porque estás en un manejador para #uploadImage, así que solo puedes agregar una verificación de nulo ficticia o incluso una afirmación de no nulo, es decir, 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]

Otra opción sería obtener el elemento del evento, pero .files aún podría ser nulo.

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

Por último, deberías estar verificando el evento change, no el click, ya que el usuario no ha seleccionado nada cuando hace clic.

Puedes ver un ejemplo funcionando con TS puro aquí. No sé qué framework estás usando, pero realmente no es relevante para tu pregunta.

// 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")
})