Fix one file upload input

This commit is contained in:
Aurelsicoko 2018-03-02 11:49:23 +01:00
parent 1b2f94938b
commit b896d96061
4 changed files with 14 additions and 14 deletions

View File

@ -8,7 +8,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { cloneDeep, get, has, isEmpty, isObject, size } from 'lodash';
import { cloneDeep, get, has, isArray, isEmpty, isObject, size } from 'lodash';
import cn from 'classnames';
import BkgImg from 'assets/icons/icon_upload.svg';
@ -32,24 +32,24 @@ class ImgPreview extends React.Component {
// We don't need the generateImgURL function here since the compo will
// always have an init value here
this.setState({
imgURL: get(this.props.files, ['0', 'url'], ''),
imgURL: get(this.props.files, ['0', 'url'], '') || get(this.props.files, 'url', ''),
isImg: this.isPictureType(get(this.props.files, ['0', 'name'], '')),
});
}
componentWillReceiveProps(nextProps) {
if (nextProps.isUploading !== this.props.isUploading) {
const lastFile = this.props.multiple ? nextProps.files.slice(-1)[0] : nextProps.files[0];
const lastFile = this.props.multiple ? nextProps.files.slice(-1)[0] : nextProps.files[0] || nextProps.files;
this.generateImgURL(lastFile);
if (this.props.multiple) {
if (this.props.multiple) {
this.updateFilePosition(nextProps.files.length - 1);
}
}
// Update the preview or slide pictures or init the component
if (nextProps.didDeleteFile !== this.props.didDeleteFile || nextProps.position !== this.props.position || size(nextProps.files) !== size(this.props.files) && !this.state.isInitValue) {
const file = nextProps.files[nextProps.position] || '';
const file = nextProps.files[nextProps.position] || nextProps.files || '';
this.generateImgURL(file)
if (!this.state.isInitValue) {
@ -207,20 +207,20 @@ class ImgPreview extends React.Component {
{ !isEmpty(imgURL) && this.renderContent() }
<ImgPreviewArrow
enable={this.state.isOver && size(files) > 1}
enable={this.state.isOver && isArray(files) && size(files) > 1}
onClick={this.handleClick}
onMouseEnter={(e) => this.setState({ isOverArrow: true })}
onMouseLeave={(e) => this.setState({ isOverArrow: false })}
show={size(files) > 1}
show={isArray(files) && size(files) > 1}
type="right"
/>
<ImgPreviewArrow
enable={this.state.isOver && size(files) > 1}
enable={this.state.isOver && isArray(files) && size(files) > 1}
onClick={this.handleClick}
onMouseEnter={(e) => this.setState({ isOverArrow: true })}
onMouseLeave={(e) => this.setState({ isOverArrow: false })}
show={size(files) > 1}
show={isArray(files) && size(files) > 1}
/>
</div>

View File

@ -82,7 +82,6 @@
right: 0;
bottom: 0;
left: 0;
width: 358px;
height: 144px;
z-index: 999;
background: #333740;

View File

@ -128,7 +128,7 @@ class InputFile extends React.Component {
</div>
</label>
<InputFileDetails
file={value[this.state.position] || value[0]}
file={value[this.state.position] || value[0] || value}
isOpen={this.state.isOpen}
multiple={multiple}
number={value.length}

View File

@ -65,12 +65,13 @@ export class EditPage extends React.Component {
}
// Get all relations made with the upload plugin
// TODO: check if collectionName or model === 'upload_file'
const fileRelations = Object.keys(get(this.getSchema(), 'relations', {})).reduce((acc, current) => {
if (get(this.getSchema(), ['relations', current, 'plugin']) === 'upload') {
const association = get(this.getSchema(), ['relations', current], {});
if (association.plugin === 'upload' && association[association.type] === 'file') {
const relation = {
name: current,
multiple: get(this.getSchema(), ['relations', current, 'nature']) === 'manyToManyMorph',
multiple: association.nature === 'manyToManyMorph',
};
acc.push(relation);