React FormData not giving image

I’m trying to get image using FormData
const data = new FormData(event.target); but when I do data.get("image") I get null , I’ve set up loading the image in other component and I’m successful in showing the image on screen

in Auth.js {!isLogin && <ImageUpload id="image"/>}

in ImageUpload

<div>
  <input className="form-control" id={props.id} onChange={pickedHandler} type="file" style={{display:"none"}} accept=".jpg,.png,.jpeg" ref={filePickerRef}/>
            
<div className="container mx-auto d-flex justify-content-center">

{previewUrl && <img id="image" name="image" className="mb-3 mt-4" src={previewUrl} alt="preview"/>}
{!previewUrl && <p> select a image </p>}

  </div>
 <button className="form-control btn btn-primary" type="button" onClick={pickImageHandler}>pick image</button>
        </div>```

Try adding name="image" attribute to the file input element (if that is what you are trying to get with data.get("image")).

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.