Блог

У меня здесь загрузчик изображений. Моя проблема в том, что я хотел, чтобы сначала alert отображался после нажатия, если вы не выбрали из autocomplete . В настоящее время alert появляется после выбора изображения.

Codesandbox НАЖМИТЕ ЗДЕСЬ

   const handleDrop = (e) => {
    e.nativeEvent.preventDefault();

    if (!value) {
      setOpen(true);
    } else {
      if (!e) return;
      const files = e.nativeEvent.dataTransfer.files;
      onUploadImage(files);
    }
  };

  const browseFiles = (e) => {
    if (!value) {
      setOpen(true);
    } else {
      if (!e) return;
      const files = e.currentTarget.files;
      onUploadImage(files);
    }
    e.target.value = null;
  };
 

Вы можете достичь этого, добавив onClick к кнопке, которая переносит ввод файла:

      <Button
      size="medium"
      variant="outlined"
      component="label"
      color="primary"
      onClick={(e) => {
        if (!value) {
          setOpen(true);
          e.nativeEvent.preventDefault();
        }
      }}
    >
      <input
        type="file"
        accept="image/*"
        multiple
        style={{ display: "none" }}
        onChange={(e) => browseFiles(e)}
      />
      Browse files
    </Button>