- <form className="btn btn-sm text-muted fw-bold">
- <label
- htmlFor={`file-upload-${this.id}`}
- // TODO: Fix this linting violation
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
- tabIndex={0}
- className={`mb-0 ${
- UserService.Instance.myUserInfo && "pointer"
- }`}
- data-tippy-content={I18NextService.i18n.t("upload_image")}
- >
- {this.state.imageUploadStatus ? (
- <Spinner />
- ) : (
+ <label
+ htmlFor={`file-upload-${this.id}`}
+ className={classNames("mb-0", {
+ pointer: UserService.Instance.myUserInfo,
+ })}
+ data-tippy-content={I18NextService.i18n.t("upload_image")}
+ >
+ {this.state.imageUploadStatus ? (
+ <Spinner />
+ ) : (
+ <button
+ type="button"
+ className="btn btn-sm btn-link rounded-0 text-muted mb-0"
+ onClick={() => {
+ document
+ .getElementById(`file-upload-${this.id}`)
+ ?.click();
+ }}
+ >