@plusscommunities/pluss-core-web 1.7.3-beta.1 → 1.7.4-beta.0

package/src/components/ImageInput.js

@@ -1,987 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import $ from 'jquery';
-import moment from 'moment';
-import Dropzone from 'react-dropzone';
-import FontAwesome from 'react-fontawesome';
-import { get1400, getThumb300, isVideo } from '../helper';
-import { fileActions } from '../apis';
-import { validateAccess, getApiError } from '../session';
-import { Popup } from './Popup';
-import { Button } from './Button';
-import { GenericInput } from './GenericInput';
-
-const DEFAULT_INPUT = {
-  uploadingImage: false,
-  value: '',
-  displayValue: '',
-};
-
-class ImageInputComponent extends Component {
-  state = {
-    selectedTab: 'upload',
-    inputs: [
-      {
-        uploadingImage: false,
-        value: '',
-        displayValue: '',
-      },
-    ],
-    libraryLoadTriggered: false,
-    libraryLoaded: false,
-    imageLibrary: [],
-    loadingFolders: false,
-    addingFolder: false,
-    deletingFolder: {},
-    deletingImage: {},
-    folders: [],
-    addFolderOpen: false,
-    addFolderInput: '',
-    selectedFolder: null,
-    saveErrorMessage: '',
-  };
-
-  UNSAFE_componentWillMount() {
-    setTimeout(() => {
-      if (this.props.hasDefault) {
-        this.setState({
-          inputs: [
-            {
-              uploadingImage: false,
-              value: this.props.hasDefault,
-              displayValue: this.props.hasDefault,
-            },
-          ],
-        });
-        if (this.props.refreshCallback) {
-          this.props.refreshCallback(this.props.hasDefault);
-        }
-      }
-    }, 100);
-  }
-
-  componentDidMount() {
-    this.getFolders();
-    this.getLibrary();
-  }
-
-  getUploading(index) {
-    return this.state.inputs[index].uploadingImage;
-  }
-
-  getValue() {
-    if (this.props.multiple) {
-      return _.filter(
-        this.state.inputs.map((input) => {
-          return input.value;
-        }),
-        (url) => {
-          return !_.isEmpty(url);
-        },
-      );
-    }
-    return this.state.inputs[0].value;
-  }
-
-  setValue(val) {
-    if (typeof val === 'string') {
-      this.setState({
-        inputs: [
-          {
-            uploadingImage: false,
-            value: val,
-            displayValue: val,
-          },
-        ],
-      });
-    } else {
-      const inputs = [];
-      _.forEach(val, (str) => {
-        inputs.push({
-          uploadingImage: false,
-          value: str,
-          displayValue: str,
-        });
-      });
-      if (!this.props.limit || this.props.limit > inputs.length) inputs.push(DEFAULT_INPUT);
-      this.setState({ inputs });
-    }
-  }
-
-  getImageStyle(displayValue) {
-    if (_.isEmpty(displayValue)) {
-      return null;
-    }
-    const image = isVideo(displayValue) ? get1400(displayValue) : displayValue;
-    if (this.props.noCompress) {
-      return { backgroundImage: `url(${image})`, backgroundSize: 'contain' };
-    }
-    return { backgroundImage: `url(${getThumb300(image)})` };
-  }
-
-  getAccept = () => {
-    const accept = {
-      'image/*': ['.jpeg', '.png'],
-    };
-    if (this.props.allowVideo) {
-      accept['video/*'] = ['.mp4'];
-    }
-    return accept;
-  };
-
-  getContainerClasses() {
-    let result = this.props.className || '';
-    if (this.props.noMenu) {
-      result += ' imageInputOuter-noMenu';
-    }
-    if (!this.props.multiple) {
-      result += ' imageInputOuter-single';
-    }
-    if (this.props.grid) {
-      result += ' imageInputOuter-grid';
-    }
-    return result;
-  }
-
-  getClassNames(input, inputsLength) {
-    let classes = 'imageInput';
-    if (input.uploadingImage) {
-      classes += ' imageInput-uploading';
-    } else if (!_.isEmpty(input.value) && !this.props.onlyAllowUpload) {
-      classes += ' imageInput-hasImage';
-    }
-    if (inputsLength === 1) {
-      classes += ' imageInput-only';
-    }
-    return classes;
-  }
-
-  getErrorState() {
-    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return ' imageInput_upload--error';
-    }
-    return '';
-  }
-
-  refreshFolders = async () => {
-    const res = await fileActions.getMediaFolders(this.props.auth.site);
-    return res.data;
-  };
-
-  getFolders() {
-    this.setState({ loadingFolders: true }, async () => {
-      try {
-        const folders = await this.refreshFolders();
-        this.setState({ loadingFolders: false, folders });
-      } catch (error) {
-        console.log('getFolders - error', error);
-        this.setState({ loadingFolders: false });
-      }
-    });
-  }
-
-  checkRefreshCallback = (inputs) => {
-    if (_.isUndefined(this.props.refreshCallback)) {
-      return;
-    }
-    if (!this.props.multiple) {
-      const image = _.find(inputs, (i) => {
-        return !i.uploadingImage && !_.isEmpty(i.value);
-      });
-      this.props.refreshCallback(image ? image.value : undefined);
-    } else {
-      const images = _.filter(inputs, (i) => {
-        return !i.uploadingImage && !_.isEmpty(i.value);
-      }).map((i) => {
-        return i.value;
-      });
-      this.props.refreshCallback(images);
-    }
-  };
-
-  parseImagesArray = (images) => {
-    return _.map(images, (f) => {
-      const uri = typeof f === 'string' ? f : f.uri;
-      const image1400 = get1400(uri);
-      return {
-        Value: uri,
-        Thumb: getThumb300(uri),
-        1400: image1400,
-        Selected: _.some(this.state.inputs, (input) => input.value === uri || input.value === image1400),
-      };
-    });
-  };
-
-  getLibrary() {
-    if (this.state.libraryLoadTriggered) return;
-
-    this.setState({ libraryLoadTriggered: true }, async () => {
-      try {
-        const res = await fileActions.getMediaLibrary();
-        // console.log('getLibrary', res.data);
-        this.setState({
-          libraryLoaded: true,
-          imageLibrary: this.parseImagesArray(res.data),
-        });
-      } catch (error) {
-        console.log('getLibrary - error', error);
-      }
-    });
-  }
-
-  toggleLibraryItem(image) {
-    const newInputs = _.clone(this.state.inputs);
-    if (image.Selected) {
-      // Unselelct selected image
-      const index = _.findIndex(newInputs, (input) => {
-        return input.value === image.Value || input.value === image[1400];
-      });
-      if (index !== -1) {
-        newInputs.splice(index, 1);
-      }
-      image.Selected = false;
-    } else {
-      // Select unselected image
-      const newFile = {
-        uploadingImage: false,
-        value: image.Value,
-        displayValue: image[1400],
-        fromLibrary: true,
-      };
-      if (!this.props.multiple) {
-        newInputs[newInputs.length - 1] = newFile;
-        // Single image selector -> Unselect others
-        this.state.imageLibrary.map((i) => (i.Selected = false));
-        if (this.state.selectedFolder && this.state.selectedFolder.parsedImages)
-          this.state.selectedFolder.parsedImages.map((i) => (i.Selected = false));
-        image.Selected = true;
-      } else if (!(this.props.limit && newInputs.length === this.props.limit)) {
-        newInputs.splice(newInputs.length - 1, 0, newFile);
-        image.Selected = true;
-      }
-    }
-
-    if (_.isEmpty(newInputs)) newInputs.push(DEFAULT_INPUT);
-    this.setState({
-      inputs: newInputs,
-      imageLibrary: _.clone(this.state.imageLibrary),
-      selectedFolder: this.state.selectedFolder ? _.clone(this.state.selectedFolder) : undefined,
-    });
-    this.checkRefreshCallback(newInputs);
-  }
-
-  addFolder = () => {
-    this.setState({ addFolderOpen: true }, () => {
-      const input = document.getElementById('addFolderInput');
-      if (input) input.focus();
-    });
-  };
-
-  cancelAddStates = { addFolderOpen: false, addFolderInput: '', saveErrorMessage: '' };
-  cancelAddFolder = () => {
-    this.setState(this.cancelAddStates);
-  };
-
-  saveFolder = () => {
-    this.setState({ addingFolder: true }, async () => {
-      try {
-        await fileActions.addMediaFolder(this.props.auth.site, this.state.addFolderInput);
-        const folders = await this.refreshFolders();
-        this.setState({
-          addingFolder: false,
-          folders,
-          ...this.cancelAddStates,
-        });
-      } catch (error) {
-        console.log('addFolder - error', error);
-        this.setState({ addingFolder: false, saveErrorMessage: getApiError(error).message });
-      }
-    });
-  };
-
-  isStockFolder = (folder) => {
-    if (!folder) folder = this.state.selectedFolder;
-    return folder && _.isNil(folder.RowId);
-  };
-
-  selectFolder = (selectedFolder) => {
-    if (!this.isStockFolder(selectedFolder)) {
-      selectedFolder.parsedImages = this.parseImagesArray(selectedFolder.Images);
-    }
-    this.setState({ selectedFolder });
-  };
-
-  selectRoot = () => {
-    this.getFolders();
-    this.setState({ selectedFolder: null });
-  };
-
-  checkSetDisplayValue(input, value) {
-    const displayValue = get1400(value);
-    const storeValue = isVideo(value) || this.props.noCompress ? value : get1400(value);
-    $('<img/>')
-      .attr('src', `${displayValue}?t=${moment().valueOf()}`)
-      .on('load', () => {
-        $(this).remove();
-        input.value = storeValue;
-        input.displayValue = storeValue;
-        input.uploadingImage = false;
-        const newInputs = _.clone(this.state.inputs);
-        this.setState({ inputs: newInputs }, () => {
-          const { selectedTab, selectedFolder } = this.state;
-          if (selectedTab === 'library' && selectedFolder) {
-            // Uploading to a user folder
-            const { RowId, Images } = selectedFolder;
-            const images = [...Images, value];
-            fileActions.addImagesToFolder(RowId, this.props.auth.site, [value]).catch((error) => {
-              console.log('addImagesToFolder error', error);
-            });
-            selectedFolder.Images = images;
-            selectedFolder.parsedImages = this.parseImagesArray(images);
-            this.setState({ selectedFolder: _.clone(selectedFolder) });
-          }
-        });
-        this.checkRefreshCallback(newInputs);
-      })
-      .on('error', () => {
-        $(this).remove();
-        setTimeout(() => {
-          this.checkSetDisplayValue(input, value);
-        }, 200);
-      });
-  }
-
-  onDrop = (files, fromLibrary = false) => {
-    if (this.props.multiple) {
-      const newInputs = _.clone(this.state.inputs);
-      files.forEach((file) => {
-        if (this.props.limit && newInputs.length === this.props.limit) {
-          // hit limit - replace last input if it's empty
-          if (_.isEmpty(newInputs[newInputs.length - 1].value)) {
-            const newInput = newInputs[newInputs.length - 1];
-            this.handleFile(newInput, file);
-          }
-        } else {
-          const newInput = {
-            ...DEFAULT_INPUT,
-            fromLibrary,
-          };
-          newInputs.splice(newInputs.length - 1, 0, newInput);
-          this.handleFile(newInput, file);
-        }
-      });
-      this.setState({
-        inputs: newInputs,
-      });
-      this.checkRefreshCallback(newInputs);
-    } else {
-      this.handleFile(this.state.inputs[0], files[0]);
-    }
-  };
-
-  handleFile = async (input, file) => {
-    if (!file || input.uploadingImage) {
-      return;
-    }
-    input.uploadingImage = true;
-    const newInputs = _.clone(this.state.inputs);
-    this.setState({
-      inputs: newInputs,
-    });
-    this.checkRefreshCallback(newInputs);
-    try {
-      let uploadFile = file;
-      if (!isVideo(file.name)) {
-        uploadFile = await fileActions.compressImage(
-          file,
-          this.props.maxSize || 1400,
-          this.props.quality || 0.8,
-          this.props.noCompress || false,
-        );
-      }
-      const url = await fileActions.uploadMediaAsync(uploadFile, uploadFile.name);
-      this.checkSetDisplayValue(input, url);
-    } catch (error) {
-      console.log('handleFile error', error);
-      this.setState({ uploadingImage: false });
-    }
-  };
-
-  removeImage(input) {
-    const newState = {};
-    if (input.fromLibrary) {
-      input.fromLibrary = undefined;
-      const selectedFolderImages = this.state.selectedFolder ? this.state.selectedFolder.parsedImages : [];
-      const imageList = this.isStockFolder() ? this.state.imageLibrary : selectedFolderImages;
-      const libraryFile = _.find(imageList, (f) => {
-        return f.Value === input.value || f[1400] === input.value;
-      });
-      if (libraryFile) {
-        libraryFile.Selected = false;
-        if (this.isStockFolder()) {
-          newState.imageLibrary = _.clone(this.state.imageLibrary);
-        } else {
-          newState.selectedFolder = this.state.selectedFolder ? _.clone(this.state.selectedFolder) : undefined;
-        }
-      }
-    }
-
-    input.value = '';
-    input.displayValue = '';
-
-    const newInputs = _.clone(this.state.inputs);
-
-    if (newInputs.length > 1) {
-      newInputs.splice(newInputs.indexOf(input), 1);
-      if (newInputs.length === this.props.limit - 1 && !_.isEmpty(newInputs[newInputs.length - 1].value)) {
-        // was full
-        newInputs.push(DEFAULT_INPUT);
-      }
-    }
-
-    newState.inputs = newInputs;
-
-    this.setState(newState);
-
-    this.checkRefreshCallback(newInputs);
-  }
-
-  selectTab(tab) {
-    this.setState({ selectedTab: tab });
-  }
-
-  handleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  deleteFolder = (event, folder) => {
-    event.stopPropagation();
-
-    if (window.confirm(`Are you sure you want to delete ${folder.Name}?`)) {
-      const deletingFolder = { ...this.state.deletingFolder };
-      deletingFolder[folder.RowId] = true;
-      this.setState({ deletingFolder: _.clone(deletingFolder), ...this.cancelAddStates }, async () => {
-        try {
-          await fileActions.deleteMediaFolder(folder.RowId, this.props.auth.site);
-          const folders = await this.refreshFolders();
-          deletingFolder[folder.RowId] = false;
-          this.setState({
-            deletingFolder: _.clone(deletingFolder),
-            folders,
-          });
-        } catch (error) {
-          console.log('addFolder - error', getApiError(error));
-          deletingFolder[folder.RowId] = false;
-          this.setState({ deletingFolder: _.clone(deletingFolder) });
-        }
-      });
-    }
-  };
-
-  deleteImage = (event, image) => {
-    if (window.confirm('Are you sure you want to delete the image?')) {
-      // Unselect the image first if selected
-      if (image.Selected) this.toggleLibraryItem(image);
-
-      const deletingImage = { ...this.state.deletingImage };
-      deletingImage[image.Value] = true;
-      this.setState({ deletingImage: _.clone(deletingImage) }, async () => {
-        try {
-          const { selectedFolder } = this.state;
-          const { RowId, Images } = selectedFolder;
-          await fileActions.deleteImagesFromFolder(RowId, this.props.auth.site, [image.Value]);
-          const images = Images.filter((i) => i.uri !== image.Value);
-          selectedFolder.Images = images;
-          selectedFolder.parsedImages = this.parseImagesArray(images);
-          deletingImage[image.Value] = false;
-          this.setState({ deletingImage: _.clone(deletingImage), selectedFolder: _.clone(selectedFolder) });
-        } catch (error) {
-          console.log('deleteImage - error', getApiError(error));
-          deletingImage[image.Value] = false;
-          this.setState({ deletingImage: _.clone(deletingImage) });
-        }
-      });
-    }
-  };
-
-  canManageLibrary = () => {
-    return validateAccess(this.props.auth.site, 'manageImageLibrary', this.props.auth);
-  };
-
-  canAddImageToLibrary = () => {
-    return validateAccess(this.props.auth.site, 'addToImageLibrary', this.props.auth);
-  };
-
-  renderInput(input, index, inputsLength) {
-    const renderContent = () => {
-      if (this.props.onlyAllowUpload) {
-        return null;
-      }
-      if (isVideo(input.displayValue)) {
-        return <video className="imageInput_image" style={this.props.style} controls src={input.displayValue} />;
-      }
-      if (this.props.simpleStyle && !_.isEmpty(input.displayValue) && !input.uploadingImage) {
-        return (
-          <div className="imageInput_simpleContainer">
-            <div
-              className="imageInput_image"
-              style={{
-                ...this.getImageStyle(input.displayValue),
-                ...this.props.style,
-                // height: this.props.style && this.props.style.height ? this.props.style.height : 80,
-              }}
-            >
-              <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
-                {(state) => {
-                  const { getRootProps, getInputProps } = state;
-
-                  return (
-                    <div className="imageInput_buttonContainer-simple" {...getRootProps()}>
-                      <input {...getInputProps()} />
-                      <Button buttonType="secondary" className="imageInput_button imageInput_button-simple" disabled>
-                        Change image
-                      </Button>
-                    </div>
-                  );
-                }}
-              </Dropzone>
-            </div>
-          </div>
-        );
-      }
-      return <div className="imageInput_image" style={{ ...this.getImageStyle(input.displayValue), ...this.props.style }}></div>;
-    };
-
-    const renderRemove = () => {
-      return (
-        !this.props.disableRemove &&
-        !this.props.disabled &&
-        (this.props.simpleStyle ? (
-          <FontAwesome name="remove" className="imageInput_removeIcon" onClick={this.removeImage.bind(this, input)} />
-        ) : (
-          <p className="imageInput_remove" onClick={this.removeImage.bind(this, input)}>
-            remove
-          </p>
-        ))
-      );
-    };
-
-    const renderDownload = () => {
-      if (isVideo(input.displayValue)) return null;
-      if (this.props.noDownload) return null;
-      return (
-        <a href={input.value} target="_blank" className="imageInput_download">
-          <img
-            alt=""
-            className="dlicon"
-            src="https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:efbab8db-136a-446e-b14a-d00af0067841/public/025971e94153af280049fdf3e3/downloadicon.png"
-          ></img>
-        </a>
-      );
-    };
-
-    const mediaText = this.props.allowVideo ? 'media' : `image${this.props.multiple ? 's' : ''}`;
-    return (
-      <div key={index} className={this.getClassNames(input, inputsLength)} style={{ ...this.props.style }}>
-        <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={this.onDrop}>
-          {(state) => {
-            const { getRootProps, getInputProps, isDragActive } = state;
-            return (
-              <div style={{ ...this.props.style }} className={`imageInput_upload ${this.getErrorState()}`} {...getRootProps()}>
-                <input {...getInputProps()} />
-                <div
-                  className={`${isDragActive ? 'imageInput_dropZoneActive' : ''} ${this.props.horizontalText ? ' imageInput_horizontalText' : ''
-                    }`}
-                >
-                  {!this.props.simpleStyle && (
-                    <img
-                      src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
-                      className="imageInput_icon"
-                      alt="file"
-                    />
-                  )}
-                  <p className="imageInput_helpText">{isDragActive ? `Drop ${mediaText} here` : `Drag and drop ${mediaText} or`}</p>
-                  {!isDragActive && (
-                    <Button buttonType="secondary" className="imageInput_button" disabled>
-                      {this.props.multiple ? `Upload ${mediaText}` : `Upload an ${mediaText}`}
-                    </Button>
-                  )}
-                </div>
-              </div>
-            );
-          }}
-        </Dropzone>
-        <div className="imageInput_uploading" style={{ ...this.props.style }}>
-          <FontAwesome className="spinner imageInput_spinner" name="spinner fa-pulse fa-fw" />
-        </div>
-        {renderContent()}
-        {renderRemove()}
-        {renderDownload()}
-      </div>
-    );
-  }
-
-  renderLibraryImage(image, index, allowDelete) {
-    // console.log(image);
-    let classes = 'imageInput imageInput-hasImage imageInput-libraryImage';
-    if (image.Selected) {
-      classes += ' imageInput-librarySelected';
-    }
-    if (this.props.multiple && this.props.limit && this.state.inputs.length === this.props.limit) {
-      classes += ' imageInput-libraryDisabled';
-    }
-    return (
-      <div key={index} className={classes}>
-        <div
-          className="imageInput_image"
-          style={{ ...this.getImageStyle(image[1400]) }}
-          onClick={this.toggleLibraryItem.bind(this, image)}
-        ></div>
-        <div className="imageInput_selected">
-          <FontAwesome className="imageInput_selectedIcon" name={'check'} />
-        </div>
-        {allowDelete && (
-          <div className="imageInput_delete">
-            {this.state.deletingImage[image.Value] ? (
-              <FontAwesome style={styles.saveImageSpinner} name="spinner fa-pulse fa-fw" />
-            ) : (
-              <FontAwesome className="imageInput_deleteIcon" name="minus-circle" onClick={(event) => this.deleteImage(event, image)} />
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  renderError() {
-    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return <div className={'fieldLabel fieldLabel-warning'}>{this.props.errorMessage ? this.props.errorMessage : 'Required'}</div>;
-    }
-    return null;
-  }
-
-  renderMenu() {
-    if (this.props.noMenu || this.props.disabled) {
-      return null;
-    }
-    return (
-      <div className="imageInputMenu">
-        <p
-          className={`imageInputMenu__option ${this.state.selectedTab === 'upload' ? 'imageInputMenu__option--selected' : ''}`}
-          onClick={() => {
-            this.selectTab('upload');
-          }}
-        >
-          UPLOAD
-        </p>
-        <p
-          className={`imageInputMenu__option ${this.state.selectedTab === 'library' ? 'imageInputMenu__option--selected' : ''}`}
-          onClick={() => {
-            this.selectTab('library');
-          }}
-        >
-          LIBRARY
-        </p>
-      </div>
-    );
-  }
-
-  renderAddFolder() {
-    const isSaving = this.state.addingFolder;
-
-    if (this.state.addFolderOpen) {
-      return (
-        <div className={'imageFolderContainer'}>
-          <FontAwesome name={'folder'} className={'folderIcon'} />
-          <GenericInput
-            id="addFolderInput"
-            type="text"
-            placeholder="Enter folder name here"
-            value={this.state.addFolderInput}
-            onChange={this.handleChange}
-            style={styles.addFolderInputContainer}
-            inputStyle={styles.addFolderInputText}
-            readOnly={isSaving}
-            showError={() => !_.isEmpty(this.state.saveErrorMessage)}
-            errorMessage={this.state.saveErrorMessage}
-          />
-          {isSaving ? (
-            <div className={'addControlContainer'}>
-              <FontAwesome style={styles.saveFolderSpinner} name="spinner fa-pulse fa-fw" />
-            </div>
-          ) : (
-            <div className={'addControlContainer'}>
-              <Button inline buttonType="secondary" onClick={this.cancelAddFolder} style={styles.addFolderCancel}>
-                Cancel
-              </Button>
-              <Button
-                inline
-                buttonType="primary"
-                isActive={!_.isEmpty(this.state.addFolderInput)}
-                onClick={this.saveFolder}
-                style={styles.addFolderSave}
-              >
-                Save
-              </Button>
-            </div>
-          )}
-        </div>
-      );
-    }
-    return (
-      <div className={'imageFolderContainer'} onClick={this.addFolder}>
-        <FontAwesome name={'plus'} className={'addIcon'} />
-        <div className={'addText'}>Add New Folder</div>
-      </div>
-    );
-  }
-
-  renderFolder(folder, index) {
-    const timeStamp = moment(folder.Timestamp).format('DD MMM, YYYY, h:mma');
-    const countText = `${folder.Images ? folder.Images.length : 0} images`;
-
-    return (
-      <div key={index} className={'imageFolderContainer'} onClick={this.selectFolder.bind(this, folder)}>
-        <FontAwesome name={'folder'} className={'folderIcon'} />
-        <div className={'folderTitle'}>{folder.Name}</div>
-        {!this.isStockFolder(folder) && (
-          <div className={'folderAttributeGroup'}>
-            <div className={'folderAttribute'}>{folder.User && folder.User.displayName}</div>
-            <div className={'folderAttribute'} style={{ width: '130px' }}>
-              {timeStamp}
-            </div>
-            <div className={'folderAttribute'} style={{ textAlign: 'right', paddingRight: '5px' }}>
-              {countText}
-            </div>
-            {this.state.deletingFolder[folder.RowId] ? (
-              <FontAwesome style={styles.saveFolderSpinner} name="spinner fa-pulse fa-fw" />
-            ) : (
-              this.canManageLibrary() && (
-                <a onClick={(event) => this.deleteFolder(event, folder)}>
-                  <FontAwesome style={styles.removeFolderButton} name="minus-circle" />
-                </a>
-              )
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  renderFolders() {
-    return (
-      <div className={`imageInputContainer imageInputContainer-library`}>
-        {this.canAddImageToLibrary() && this.renderAddFolder()}
-        {this.state.folders.map((folder, index) => {
-          return this.renderFolder(folder, index);
-        })}
-      </div>
-    );
-  }
-
-  renderBreadCrumbs() {
-    return (
-      <div className={'imageBreadCrumb'}>
-        <div className={'root'} onClick={this.selectRoot}>
-          Library
-        </div>
-        <FontAwesome name={'angle-left'} className={'separator'} />
-        <div className={'folder'}>{this.state.selectedFolder.Name}</div>
-      </div>
-    );
-  }
-
-  renderFolderImages() {
-    const stockFolder = this.isStockFolder();
-    const canDelete = !stockFolder && this.canManageLibrary();
-    const uploadingImages = this.state.inputs.filter((i) => i.uploadingImage);
-    const mediaText = this.props.allowVideo ? 'media' : `image${this.props.multiple ? 's' : ''}`;
-
-    return (
-      <div className={`imageInputContainer imageInputContainer-library`} style={{ ...this.props.style }}>
-        {this.renderBreadCrumbs()}
-        {stockFolder ? (
-          this.state.imageLibrary.map((image, index) => {
-            return this.renderLibraryImage(image, index);
-          })
-        ) : (
-          <div>
-            {this.canAddImageToLibrary() && (
-              <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
-                {(state) => {
-                  const { getRootProps, getInputProps, isDragActive } = state;
-                  return (
-                    <div style={{ padding: '15px' }} className={`imageInput_upload folder ${this.getErrorState()}`} {...getRootProps()}>
-                      <input {...getInputProps()} />
-                      <div className={isDragActive ? 'imageInput_dropZoneActive' : ''}>
-                        <img
-                          src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
-                          className="imageInput_icon"
-                          alt="file"
-                        />
-                        <p className="imageInput_helpText">{isDragActive ? `Drop ${mediaText} here` : `Drag and drop ${mediaText} or`}</p>
-                        {!isDragActive && (
-                          <Button buttonType="secondary" className="imageInput_button" disabled>
-                            {this.props.multiple ? `Upload ${mediaText}` : `Upload an ${mediaText}`}
-                          </Button>
-                        )}
-                      </div>
-                    </div>
-                  );
-                }}
-              </Dropzone>
-            )}
-            {this.state.selectedFolder.parsedImages.map((image, index) => {
-              return this.renderLibraryImage(image, index, canDelete);
-            })}
-            {!_.isNil(uploadingImages) &&
-              uploadingImages.map((input, index) => {
-                return (
-                  <div key={index} className={this.getClassNames(input)}>
-                    <div className="imageInput_uploading">
-                      <FontAwesome className="spinner imageInput_spinner" name="spinner fa-pulse fa-fw" />
-                    </div>
-                  </div>
-                );
-              })}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  renderUploadImages(inputs) {
-    return (
-      <div className={`imageInputContainer ${inputs.length === 1 ? 'imageInputContainer-noPadding' : ''}`} style={{ ...this.props.style }}>
-        {inputs.map((input, index) => {
-          return this.renderInput(input, index, inputs.length);
-        })}
-      </div>
-    );
-  }
-
-  renderContent() {
-    return this.renderUploadImages(this.state.inputs);
-  }
-
-  renderLibraryPopup() {
-    if (this.state.selectedTab === 'upload') {
-      return null;
-    }
-    let content = null;
-    if (this.state.selectedFolder) {
-      content = this.renderFolderImages();
-    } else {
-      content = this.renderFolders();
-    }
-    return (
-      <Popup
-        onClose={() => {
-          this.selectTab('upload');
-        }}
-        hasPadding
-        buttons={[
-          {
-            type: 'primary',
-            onClick: () => {
-              this.selectTab('upload');
-            },
-            isActive: true,
-            text: 'Done',
-          },
-        ]}
-        title="Select images"
-      >
-        {content}
-      </Popup>
-    );
-  }
-
-  renderButtons() {
-    if (this.props.noMenu || this.props.disabled) {
-      return null;
-    }
-    return (
-      <div className="imageInputRight">
-        <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
-          {(state) => {
-            const { getRootProps, getInputProps } = state;
-            return (
-              <div {...getRootProps()} className="imageInputRight_button">
-                <input {...getInputProps()} />
-                <FontAwesome className="imageInputRight_button_icon" name="plus-circle" />
-                <p className="imageInputRight_button_text">Upload File</p>
-              </div>
-            );
-          }}
-        </Dropzone>
-        <div
-          className="imageInputRight_button"
-          onClick={() => {
-            this.selectTab('library');
-          }}
-        >
-          <FontAwesome className="imageInputRight_button_icon" name="picture-o" />
-          <p className="imageInputRight_button_text">Image Library</p>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div style={this.props.containerStyle} className={`imageInputOuter ${this.getContainerClasses()}`}>
-        {this.renderButtons()}
-        {this.renderContent()}
-        {this.renderLibraryPopup()}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  addFolderInputContainer: {
-    marginBottom: '0px',
-    paddingRight: '100px',
-    width: '70%',
-  },
-  addFolderInputText: {
-    paddingBottom: '0px',
-  },
-  addFolderCancel: {
-    paddingLeft: '8px',
-    paddingRight: '8px',
-    width: '80px',
-    marginRight: '16px',
-  },
-  addFolderSave: {
-    paddingLeft: '8px',
-    paddingRight: '8px',
-    width: '80px',
-  },
-  saveFolderSpinner: {
-    fontSize: '20px',
-    marginLeft: '16px',
-  },
-  saveImageSpinner: {
-    fontSize: '18px',
-  },
-  removeFolderButton: {
-    fontSize: '20px',
-    padding: '5px',
-    marginLeft: '16px',
-    cursor: 'pointer',
-  },
-};
-
-const mapStateToProps = (state) => {
-  return {
-    auth: state.auth,
-  };
-};
-
-const ImageInput = connect(mapStateToProps, {}, null, { forwardRef: true })(ImageInputComponent);
-export { ImageInput };