diff --git a/src/components/ControlPane.js b/src/components/ControlPane.js index c5225a55..cd7c08de 100644 --- a/src/components/ControlPane.js +++ b/src/components/ControlPane.js @@ -10,7 +10,8 @@ export default class ControlPane extends React.Component { field: field, value: entry.getIn(['data', field.get('name')]), onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value)), - onAddMedia: (mediaFile) => this.props.onAddMedia(mediaFile) + onAddMedia: (mediaFile) => this.props.onAddMedia(mediaFile), + onRemoveMedia: (mediaFile) => this.props.onRemoveMedia(mediaFile) }); } diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js index 163f13e1..9bab99a9 100644 --- a/src/components/EntryEditor.js +++ b/src/components/EntryEditor.js @@ -12,6 +12,7 @@ export default class EntryEditor extends React.Component { }; this.handleChange = this.handleChange.bind(this); this.handleAddMedia = this.handleAddMedia.bind(this); + this.handleRemoveMedia = this.handleRemoveMedia.bind(this); this.handleSave = this.handleSave.bind(this); } @@ -23,6 +24,14 @@ export default class EntryEditor extends React.Component { this.setState({mediaFiles: this.state.mediaFiles.push(mediaFile)}); } + handleRemoveMedia(mediaFile) { + const newState = this.state.mediaFiles.filterNot((item) => item === mediaFile); + this.state = { + entry: this.props.entry, + mediaFiles: Immutable.List(newState) + }; + } + handleSave() { this.props.onPersist(this.state.entry, this.state.mediaFiles); } @@ -40,6 +49,7 @@ export default class EntryEditor extends React.Component { entry={this.state.entry} onChange={this.handleChange} onAddMedia={this.handleAddMedia} + onRemoveMedia={this.handleRemoveMedia} />
diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js index 8d8efe98..6040d5f2 100644 --- a/src/components/Widgets/ImageControl.js +++ b/src/components/Widgets/ImageControl.js @@ -12,7 +12,7 @@ export default class ImageControl extends React.Component { } }; - this.revokeCurrentObjectURL = this.revokeCurrentObjectURL.bind(this); + this.revokeCurrentImage = this.revokeCurrentImage.bind(this); this.handleChange = this.handleChange.bind(this); this.handleFileInputRef = this.handleFileInputRef.bind(this); this.handleClick = this.handleClick.bind(this); @@ -22,11 +22,12 @@ export default class ImageControl extends React.Component { } componentWillUnmount() { - this.revokeCurrentObjectURL(); + this.revokeCurrentImage(); } - revokeCurrentObjectURL() { + revokeCurrentImage() { if (this.state.currentImage.file) { + this.props.onRemoveMedia(this.state.currentImage.file); window.URL.revokeObjectURL(this.state.currentImage.file); } } @@ -52,7 +53,7 @@ export default class ImageControl extends React.Component { handleChange(e) { e.stopPropagation(); e.preventDefault(); - this.revokeCurrentObjectURL(); + this.revokeCurrentImage(); let imageRef = null; const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files; const files = [...fileList];