app/javascript/mastodon/features/compose/components/upload_button.js

   1 import React from 'react';
   2 import IconButton from '../../../components/icon_button';
   3 import PropTypes from 'prop-types';
   4 import { defineMessages, injectIntl } from 'react-intl';
   5 import { connect } from 'react-redux';
   6 import ImmutablePureComponent from 'react-immutable-pure-component';
   7 import ImmutablePropTypes from 'react-immutable-proptypes';
   8
   9 const messages = defineMessages({
  10   upload: { id: 'upload_button.label', defaultMessage: 'Add media (JPEG, PNG, GIF, WebM, MP4, MOV)' },
  11 });
  12
  13 const makeMapStateToProps = () => {
  14   const mapStateToProps = state => ({
  15     acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
  16   });
  17
  18   return mapStateToProps;
  19 };
  20
  21 const iconStyle = {
  22   height: null,
  23   lineHeight: '27px',
  24 };
  25
  26 export default @connect(makeMapStateToProps)
  27 @injectIntl
  28 class UploadButton extends ImmutablePureComponent {
  29
  30   static propTypes = {
  31     disabled: PropTypes.bool,
  32     onSelectFile: PropTypes.func.isRequired,
  33     style: PropTypes.object,
  34     resetFileKey: PropTypes.number,
  35     acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
  36     intl: PropTypes.object.isRequired,
  37   };
  38
  39   handleChange = (e) => {
  40     if (e.target.files.length > 0) {
  41       this.props.onSelectFile(e.target.files);
  42     }
  43   }
  44
  45   handleClick = () => {
  46     this.fileElement.click();
  47   }
  48
  49   setRef = (c) => {
  50     this.fileElement = c;
  51   }
  52
  53   render () {
  54
  55     const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
  56
  57     return (
  58       <div className='compose-form__upload-button'>
  59         <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
  60         <label>
  61           <span style={{ display: 'none' }}>{intl.formatMessage(messages.upload)}</span>
  62           <input
  63             key={resetFileKey}
  64             ref={this.setRef}
  65             type='file'
  66             multiple
  67             accept={acceptContentTypes.toArray().join(',')}
  68             onChange={this.handleChange}
  69             disabled={disabled}
  70             style={{ display: 'none' }}
  71           />
  72         </label>
  73       </div>
  74     );
  75   }
  76
  77 }