disable image button if no image is selected in input field

Question

How can I disable the image button if no image is selected on the input field. The button should be disabled if the image not is chosen.

import { useState } from "react";

const CommentForm = ({ handleSubmit, submitLabel }) => {
  const [text, setText] = useState("");
  const textType = "plainText";
  const textDisabled = text.length === 0 || text.trim().length === 0;
  const onSubmit = (event) => {
    event.preventDefault();
    handleSubmit(text, null, textType);
    setText("");
  };

  return (
    
       setText(e.target.value)}
      />
      <button className="comment-form-button" disabled={textDisabled}>
        {submitLabel}
      </button>
    </form>
  );
};

export default CommentForm;
</code></pre>

user_3411426 · Answer

I would just have a function that checks whether or not the input has a value inside of it and if not it leaves the button disabled. See snippet below. You can attach that logic to any event so if the input is blank the button will be set to disabled.

const imageFile = document.getElementById('imageFile');
const submitImage = document.getElementById('submitImage');

imageFile.addEventListener('keyup', function(){
if(imageFile.value !== "") {
  submitImage.removeAttribute('disabled');
  } else if(imageFile.value === "") {
  submitImage.setAttribute('disabled', true);
  }
});

disable image button if no image is selected in input field

1 Answers