persistence draft
Persisting individual media file objects
This commit is contained in:
@ -9,7 +9,8 @@ export default class ControlPane extends React.Component {
|
||||
key: field.get('name'),
|
||||
field: field,
|
||||
value: entry.getIn(['data', field.get('name')]),
|
||||
onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value))
|
||||
onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value)),
|
||||
onAddMedia: (mediaFile) => this.props.onAddMedia(mediaFile)
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1,18 +1,32 @@
|
||||
import React from 'react';
|
||||
import Immutable from 'immutable';
|
||||
import ControlPane from './ControlPane';
|
||||
import PreviewPane from './PreviewPane';
|
||||
|
||||
export default class EntryEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {entry: props.entry};
|
||||
this.state = {
|
||||
entry: props.entry,
|
||||
mediaFiles: Immutable.List()
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleAddMedia = this.handleAddMedia.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
}
|
||||
|
||||
handleChange(entry) {
|
||||
this.setState({entry: entry});
|
||||
}
|
||||
|
||||
handleAddMedia(mediaFile) {
|
||||
this.setState({mediaFiles: this.state.mediaFiles.push(mediaFile)});
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
this.props.onPersist(this.state.entry, this.state.mediaFiles);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { collection, entry } = this.props;
|
||||
|
||||
@ -21,12 +35,18 @@ export default class EntryEditor extends React.Component {
|
||||
<h2>{entry && entry.get('title')}</h2>
|
||||
<div className="cms-container" style={styles.container}>
|
||||
<div className="cms-control-pane" style={styles.pane}>
|
||||
<ControlPane collection={collection} entry={this.state.entry} onChange={this.handleChange}/>
|
||||
<ControlPane
|
||||
collection={collection}
|
||||
entry={this.state.entry}
|
||||
onChange={this.handleChange}
|
||||
onAddMedia={this.handleAddMedia}
|
||||
/>
|
||||
</div>
|
||||
<div className="cms-preview-pane" style={styles.pane}>
|
||||
<PreviewPane collection={collection} entry={this.state.entry}/>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={this.handleSave}>Save</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
@ -1,14 +1,18 @@
|
||||
import React from 'react';
|
||||
import ImageProxy from '../../valueObjects/ImageProxy';
|
||||
|
||||
export default class ImageControl extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
currentImage: props.value
|
||||
currentImage: {
|
||||
file: null,
|
||||
imageProxy: new ImageProxy(props.value, null, null, true)
|
||||
}
|
||||
};
|
||||
|
||||
this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
|
||||
this.revokeCurrentObjectURL = this.revokeCurrentObjectURL.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleFileInputRef = this.handleFileInputRef.bind(this);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
@ -18,12 +22,12 @@ export default class ImageControl extends React.Component {
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.revokeCurrentImage();
|
||||
this.revokeCurrentObjectURL();
|
||||
}
|
||||
|
||||
revokeCurrentImage() {
|
||||
if (this.state.currentImage instanceof File) {
|
||||
window.URL.revokeObjectURL(this.state.currentImage);
|
||||
revokeCurrentObjectURL() {
|
||||
if (this.state.currentImage.file) {
|
||||
window.URL.revokeObjectURL(this.state.currentImage.file);
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +52,8 @@ export default class ImageControl extends React.Component {
|
||||
handleChange(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
this.revokeCurrentImage();
|
||||
this.revokeCurrentObjectURL();
|
||||
let imageRef = null;
|
||||
const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files;
|
||||
const files = [...fileList];
|
||||
const imageType = /^image\//;
|
||||
@ -61,27 +66,17 @@ export default class ImageControl extends React.Component {
|
||||
});
|
||||
|
||||
if (file) {
|
||||
// Custom toString function on file, so it can be used on regular image fields
|
||||
file.toString = function() {
|
||||
return window.URL.createObjectURL(file);
|
||||
};
|
||||
this.props.onAddMedia(file);
|
||||
imageRef = new ImageProxy(file.name, file.size, window.URL.createObjectURL(file));
|
||||
}
|
||||
|
||||
this.props.onChange(file);
|
||||
this.setState({currentImage: file});
|
||||
this.props.onChange(imageRef);
|
||||
this.setState({currentImage: {file:file, imageProxy: imageRef}});
|
||||
}
|
||||
|
||||
renderImageName() {
|
||||
if (!this.state.currentImage) return null;
|
||||
|
||||
if (this.state.currentImage instanceof File) {
|
||||
return this.state.currentImage.name;
|
||||
} else if (typeof this.state.currentImage === 'string') {
|
||||
const fileName = this.state.currentImage;
|
||||
return fileName.substring(fileName.lastIndexOf('/') + 1);
|
||||
}
|
||||
|
||||
return null;
|
||||
if (!this.state.currentImage.imageProxy) return null;
|
||||
return this.state.currentImage.imageProxy.uri;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
Reference in New Issue
Block a user