Repository: h2oai/wave
File: ui/src/file_upload.tsx (TypeScript)

Code before:
            <input
              id={name}
              data-test={name}
              className={css.uploadInput}
              onChange={onChange}
              type='file'
              accept={fileExtensions?.join(',')}
              multiple={multiple} />
            <label htmlFor={name} className={css.uploadLabel}>Browse...</label>
            <Fluent.Text styles={{ root: { marginTop: 15 } }}>Or drag and drop {multiple ? 'files' : 'a file'} here.</Fluent.Text>
          </>
        )
      },
      getCompactFileUpload = () => (
        <>
          {
            percentComplete
              ? (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Fluent.ProgressIndicator
                    label={label ? <Fluent.Label>{label}</Fluent.Label> : undefined}
                    description={`Uploading: ${(percentComplete * 100).toFixed(2)}%`}
                    percentComplete={percentComplete}
                    styles={{ root: { flex: 1 }, itemName: { padding: 0 }, itemProgress: { paddingTop: 5, paddingBottom: 5 } }}
                  />
                  <Fluent.IconButton iconProps={{ iconName: 'cancel' }} title="Cancel" onClick={() => onUploadCancel()} styles={{ root: { padding: 16, marginTop: 11, marginLeft: 6 } }} />
                </div>
              )
              : (
                <>
                  {label && <Fluent.Label style={{ paddingTop: 6 }}>{label}</Fluent.Label>}
                  <div className={css.compact}>
                    <Fluent.TextField data-test={`textfield-${name}`} readOnly value={fileNames} errorMessage={error} />
                    <input id={name} data-test={name} type='file' hidden onChange={onChange} accept={fileExtensions?.join(',')} multiple={multiple} />
                    <label htmlFor={name} className={clas(css.uploadLabel, css.uploadLabelCompact)}>Browse</label>
                  </div>
                </>
              )
          }
        </>
      )

    return compact ? getCompactFileUpload() : (
      <>
        <form
          className={isDragging && !error && !successMsg ? clas(css.upload, css.uploadDragging) : css.upload}
          style={{ height: height || 300 }}
          onDragStart={onIsDragging}
          onDragEnter={onIsDragging}
          onDragEnd={onIsNotDragging}
          onDragLeave={onIsNotDragging}

Review comment (suggestion):
```suggestion
                  <Fluent.IconButton iconProps={{ iconName: 'cancel' }} title="Cancel" onClick={onUploadCancel} styles={{ root: { padding: 16, marginTop: 11, marginLeft: 6 } }} />
```

Code after:
              accept={fileExtensions?.join(',')}
              multiple={multiple} />
            <label htmlFor={name} className={css.uploadLabel}>Browse...</label>
            <Fluent.Text styles={{ root: { marginTop: 15 } }}>Or drag and drop {multiple ? 'files' : 'a file'} here.</Fluent.Text>
          </>
        )
      },
      getCompactFileUpload = () => (
        <>
          {
            percentComplete
              ? (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Fluent.ProgressIndicator
                    label={label ? <Fluent.Label>{label}</Fluent.Label> : undefined}
                    description={`Uploading: ${(percentComplete * 100).toFixed(2)}%`}
                    percentComplete={percentComplete}
                    styles={{ root: { flex: 1 }, itemName: { padding: 0 }, itemProgress: { paddingTop: 5, paddingBottom: 5 } }}
                  />
                  <Fluent.IconButton iconProps={{ iconName: 'cancel' }} title='Cancel' onClick={rejectXhr.current} styles={{ root: { padding: 16, marginTop: 11, marginLeft: 6 } }} />
                </div>
              )
              : (
                <>
                  {label && <Fluent.Label style={{ paddingTop: 6 }}>{label}</Fluent.Label>}
                  <div className={css.compact}>
                    <Fluent.TextField data-test={`textfield-${name}`} readOnly value={fileNames} errorMessage={error} />
                    <input id={name} data-test={name} type='file' hidden onChange={onChange} accept={fileExtensions?.join(',')} multiple={multiple} />
                    <label htmlFor={name} className={clas(css.uploadLabel, css.uploadLabelCompact)}>Browse</label>
                  </div>
                </>
              )
          }
        </>
      )

    return compact ? getCompactFileUpload() : (
      <>
        <form
          className={isDragging && !error && !successMsg ? clas(css.upload, css.uploadDragging) : css.upload}
          style={{ height: height || 300 }}
          onDragStart={onIsDragging}
          onDragEnter={onIsDragging}
          onDragEnd={onIsNotDragging}
          onDragLeave={onIsNotDragging}
          onDrop={onDrop}
          onDragOver={onDragOver}
        >
          {getUploadBodyComponent()}
        </form>
        <Fluent.PrimaryButton disabled={!!percentComplete || !files.length} text={label || 'Upload'} onClick={() => upload()} />