fileButtonLineComponent.tsx 940 B

123456789101112131415161718192021222324252627282930313233
  1. import * as React from "react";
  2. interface IFileButtonLineComponentProps {
  3. label: string;
  4. onClick: (file: File) => void;
  5. accept: string;
  6. }
  7. export class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
  8. constructor(props: IFileButtonLineComponentProps) {
  9. super(props);
  10. }
  11. onChange(evt: any) {
  12. var files: File[] = evt.target.files;
  13. if (files && files.length) {
  14. this.props.onClick(files[0]);
  15. }
  16. evt.target.value = "";
  17. }
  18. render() {
  19. return (
  20. <div className="buttonLine">
  21. <label htmlFor="file-upload" className="file-upload">
  22. {this.props.label}
  23. </label>
  24. <input ref="upload" id="file-upload" type="file" accept={this.props.accept} onChange={evt => this.onChange(evt)} />
  25. </div>
  26. );
  27. }
  28. }