{"size": 4981, "ext": "js", "max_stars_repo_path": "web/ui-app/src/components/framework/components/UiSingleFileUpload.js", "max_stars_repo_name": "savitaepi/frontend", "max_stars_repo_stars_event_min_datetime": "2020-07-15T13:18:02.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-15T13:18:02.000Z", "max_issues_repo_path": "web/ui-app/src/components/framework/components/UiSingleFileUpload.js", "max_issues_repo_name": "savitaepi/frontend", "max_issues_repo_issues_event_min_datetime": "2020-07-16T09:39:12.000Z", "max_issues_repo_issues_event_max_datetime": "2021-02-04T08:53:48.000Z", "max_forks_repo_path": "web/ui-app/src/components/framework/components/UiSingleFileUpload.js", "max_forks_repo_name": "savitaepi/frontend", "max_forks_repo_forks_event_min_datetime": "2020-10-12T06:48:35.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-18T08:21:58.000Z"}
{"max_stars_count": 1, "max_issues_count": 29, "max_forks_count": 3, "avg_line_length": 32.135483871, "max_line_length": 270, "alphanum_fraction": 0.4312387071}
import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { translate } from '../../common/common';

export default class UiSingleFileUpload extends Component {
  constructor(props) {
    super(props);
   this.state = {
     showDownloadLink : true
   }
  }

  checkDownloadlink(e){
    if(e.target.files[0]){
        this.setState(
          () =>{
            return  {showDownloadLink : false}
          }
        );
    }else{
      this.setState(
        () =>{
          return  {showDownloadLink : true}
        }
      );
    }
  }

  renderSingleFileUpload = item => {
    switch (this.props.ui) {
      case 'google':
      if (item.readonly && item.optionForNew) {
        let {getVal}  = this.props;
        let fileId =  getVal(item.jsonPath);
       return (
         <div>
       {(fileId && this.state.showDownloadLink) ?  
       <div>
             <a
                href={
                  window.location.origin +
                  '/filestore/v1/files/id?tenantId=' +
                  localStorage.tenantId +
                  '&fileStoreId=' +
                  fileId
                }
                target="_blank"
              >
                {translate(item.label)}
              </a>
              <p style={{margin:'5px 0px 5px 20%'}}>{"OR"}</p>
           </div> : <label style={{margin:'15px 0px 15px 0'}}>
           {item.label.replace("Download", "Upload")} <span style={{ color: '#FF0000' }}>{item.isRequired ? ' *' : ''}</span>
          </label>
          } 
           <div
             style={{
               marginTop: '0px',
               display: item.hide ? 'none' : 'inline-block',
             }}
           >
             <input
               id={item.jsonPath.split('.').join('-')}
               disabled={item.isDisabled}
               type="file"
               accept=".doc,.docx,.xls,.xlsx,.csv,.pdf,.jpeg,.jpg,.png"
               style={{ marginTop: '0px' }}
               onChange={ (e) =>{
                this.checkDownloadlink(e);
                this.props.handler(
                  { target: { value: e.target.files[0] } },
                  item.jsonPath,
                  item.isRequired ? true : false,
                  '',
                  item.requiredErrMsg,
                  item.patternErrMsg,
                  item.hidePrevious=true
                )
               }
               }
             />
           </div>
         </div>
       );
     }else if (item.readonly) {
       let {getVal}  = this.props;
       let fileId =  getVal(item.jsonPath);
       console.log("File store Id Value Is", fileId);
          return (
            (fileId) ?
            <a
              href={
                window.location.origin +
                '/filestore/v1/files/id?tenantId=' +
                localStorage.tenantId +
                '&fileStoreId=' +
                fileId
              }
              target="_blank"
            >
              {translate(item.label)}
            </a> : <div><p style={{margin:'0 0 5px 0','fontWeight':'600','fontSize':'13px'}}>{translate(item.label)}</p><p>{"No documents"}</p></div>
          );
        } else {
          /*
          <RaisedButton
            floatingLabelStyle={{"color": "#696969"}}
            style={{"display": (item.hide ? 'none' : 'block')}}
            containerElement='label'
            fullWidth={true}
            value={this.props.getVal(item.jsonPath)}
            disabled={item.isDisabled}
            label={item.label}>
              <input id={item.jsonPath.split(".").join("-")}   type="file" style={{ display: 'none' }} onChange={(e) => this.props.handler({target:{value: e.target.files[0]}}, item.jsonPath, item.isRequired ? true : false, '', item.requiredErrMsg, item.patternErrMsg)}/>
          </RaisedButton>
        */
          return (
            <div
              style={{
                marginTop: '17px',
                display: item.hide ? 'none' : 'inline-block',
              }}
            >
              <label>
                {item.label} <span style={{ color: '#FF0000' }}>{item.isRequired ? ' *' : ''}</span>
              </label>
              <br />
              <input
                id={item.jsonPath.split('.').join('-')}
                disabled={item.isDisabled}
                type="file"
                accept=".doc,.docx,.xls,.xlsx,.csv,.pdf,.jpeg,.jpg,.png"
                style={{ marginTop: '10px' }}
                onChange={e =>
                  this.props.handler(
                    { target: { value: e.target.files[0] } },
                    item.jsonPath,
                    item.isRequired ? true : false,
                    '',
                    item.requiredErrMsg,
                    item.patternErrMsg
                  )
                }
              />
            </div>
          );
        }
    }
  };

  render() {
    return <div>{this.renderSingleFileUpload(this.props.item)}</div>;
  }
}
