file input null check erroring Object is possibly 'null' in typescript

Question

I am trying to check against input file being null in typescript. the problem is that (if condition is erroring out) telling me Object is possibly 'null'. how to check against null for this particular case ?

const input = document.querySelector('#image') as HTMLInputElement;

const loadImage = () =>{
if (input.files[0]['type']) {
    const fileType = input?.files![0]['type'];
   }
}
<input id="image" ref={inputRef} accept="image/*" type="file" onChange={loadImage} />

You should be able to do it by placing a ? After the variable you expect to be null. — Aaron T
– Aaron T, Commented Jul 10, 2022 at 1:53

Théophile Wallez · Accepted Answer · 2022-07-10 02:08:05Z

1

You can add a condition to check if the input element is null (or undefined) :

if (input && input.files[0]['type']) {
    const fileType = input.files![0]['type'];
}

edited Jul 10, 2022 at 2:08

answered Jul 10, 2022 at 1:57

Théophile Wallez

4895 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shah · Accepted Answer · 2022-07-10 02:09:59Z

0

you only want to return your JSX should there be an input to pass:

{ inputRef && <input ref={inputRef} {…code} /> }

answered Jul 10, 2022 at 2:09

Shah

2,9821 gold badge21 silver badges23 bronze badges

2 Comments

Richardson Over a year ago

run time error is after change happens to the input , so this jsx solution won't fix the issue, plus ref.current.. and i want the input on display this will hide it and cannot even add file to it if the ref is false at start!

Shah Over a year ago

I thought that was the point!

Collectives™ on Stack Overflow

file input null check erroring Object is possibly 'null' in typescript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related