diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js index 09516457..83aef402 100644 --- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js +++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js @@ -2,8 +2,6 @@ import React from 'react'; -import Glyphicon from 'react-bootstrap/lib/Glyphicon'; - import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils'; import { getLangText } from '../../../utils/lang_utils'; import { truncateTextAtCharIndex } from '../../../utils/general_utils'; @@ -29,7 +27,9 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = allowedExtensions: string, - handleCancelFile: func // provided by ReactS3FineUploader + // provided by ReactS3FineUploader + handleCancelFile: func, + handleDeleteFile: func }, handleDrop(event) { @@ -74,6 +74,11 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = } }, + onClickRemove() { + const uploadedFile = this.getUploadedFile(); + this.props.handleDeleteFile(uploadedFile.id); + }, + getButtonLabel() { let { filesToUpload, fileClassToUpload } = this.props; @@ -94,8 +99,8 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } = return ( - {' ' + truncateTextAtCharIndex(uploadedFile.name, 40)} - + {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '} + [{getLangText('remove')}] ); } else { diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index 1eb1a429..38f8400b 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -122,7 +122,7 @@ cursor: default; color: lighten($ascribe--button-default-color, 20%); font-size: 4.2em; - top: .15em; + top: .2em; } }