React - 使用 Mui 实现文件上传组件

Question

我正在尝试构建一个文件上传组件。早些时候我确实使用过<input type="file">，但我有很少的空间来容纳输入类型，并且在小空间内，我必须显示“选择文件”和总文件路径。当我减小宽度时，组件显示不太美观。

这是我之前的代码：

 <label id="licensefile">
          LicenseFile
          <input            
            type="file"
            name="personalLicense"
            className={styles.personallicense}
          />
        </label>

我的CSS：

.personallicense{

    position: absolute;
    top: 78px;
    left:250px;
    width:50px;
    padding: 0;
    margin:0;
}

input[name="personalLicense"] {
    width: 30px;
  }

我一直在寻找使用 Mui 的替代品

我想建立这样的东西：

import FileUploadOutlined from "@mui/icons-material/FileUploadOutlined";
import TextField from "@mui/material/TextField";

<label >
        License
        <TextField
          variant="standard"      
         
          type="text"
         
          InputProps={{
            endAdornment: (
              <FileUploadOutlined
                onClick={() => {
                  handleUpload();
                }}
              >                
              </FileUploadOutlined>
            ),
          }}
        />
      </label>

如何从类似于输入类型“文件”的 Mui 中调用文件上传

容纳该组件的总空间几乎为 50 到 60 px。我无法调整更多，因为它是现有的组件。

Answer 1

我从其他来源得到了答案，但在这里发布以供将来参考：

<TextField
      variant="standard"          
      type="text"
      InputProps={{
        endAdornment: (
          <IconButton component="label">
            <FileUploadOutlined />
            <input
              styles={{display:"none"}}
              type="file"
              hidden
              onChange={handleUpload}
              name="[licenseFile]"
            />
          </IconButton>
        ),
      }}
    />