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

package/src/components/ImageInput.js

@@ -0,0 +1,987 @@
+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 };