使用reactjs从媒体库发送文件

Question

我有一个聊天，它是在 REACTJS + Nodejs 中完成的，一切都很完美，但我想实现一个媒体库类型功能，人们可以在其中选择系统中可用的照片，例如：

我有我上传文件并在表格中列出它们的页面。

在我发送消息的聊天页面上，当我单击附加文件按钮时，Windows 窗口会正常打开，以便可以上传和发送图像。

我希望当我单击此按钮时，将打开一个模式，并且将列出系统中可用的这些图像，并且可以在聊天中选择并发送这些图像。

列出聊天中图像的模式我能够打开它，我只是无法通过它，发送选定的图像，我不知道我是否需要回调函数或其他东西。

列出文件的页面：

模式打开的聊天页面：

我希望当您单击模态的任何图像时，它会被发送到聊天室。

负责上传和发送文件的部分代码：

const handleChangeMedias = (e) => {
if (!e.target.files) {
  return;
}

const selectedMedias = Array.from(e.target.files);
setMedias(selectedMedias);  };

<input
          multiple
          type="file"
          id="upload-button"
          disabled={loading || recording || ticketStatus !== "open"}
          className={classes.uploadInput}
          onChange={handleChangeMedias}
        />
        <label htmlFor="upload-button">
          <IconButton
            aria-label="upload"
            component="span"
            onClick={handleOpenContactModal}
            disabled={loading || recording || ticketStatus !== "open"}
          >
            <AttachFileIcon className={classes.sendMessageIcons} />
          </IconButton>
        </label>

感谢 id advance ！

我可以创建页面来上传文件，并且可以在聊天页面上以模式显示这些文件，现在我无法选择这些文件并将其发送到聊天。

Obs：从计算机上传和发送文件到聊天室的功能工作正常，我可以选择文件并发送。