mirror of
https://github.com/ascribe/onion.git
synced 2024-06-30 13:41:57 +02:00
139 lines
4.5 KiB
JavaScript
139 lines
4.5 KiB
JavaScript
'use strict';
|
|
|
|
import React from 'react';
|
|
|
|
import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
|
|
import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
|
|
|
|
import { getLangText } from '../../../utils/lang_utils';
|
|
import { truncateTextAtCharIndex } from '../../../utils/general_utils';
|
|
import { extractFileExtensionFromString } from '../../../utils/file_utils';
|
|
|
|
|
|
const { shape, string, number, func, bool } = React.PropTypes;
|
|
|
|
const FileDragAndDropPreview = React.createClass({
|
|
propTypes: {
|
|
file: shape({
|
|
url: string,
|
|
type: string,
|
|
progress: number,
|
|
id: number,
|
|
status: string,
|
|
s3Url: string,
|
|
s3UrlSafe: string
|
|
}).isRequired,
|
|
handleDeleteFile: func,
|
|
handleCancelFile: func,
|
|
handlePauseFile: func,
|
|
handleResumeFile: func,
|
|
areAssetsDownloadable: bool,
|
|
areAssetsEditable: bool,
|
|
numberOfDisplayedFiles: number
|
|
},
|
|
|
|
toggleUploadProcess() {
|
|
if(this.props.file.status === 'uploading') {
|
|
this.props.handlePauseFile(this.props.file.id);
|
|
} else if(this.props.file.status === 'paused') {
|
|
this.props.handleResumeFile(this.props.file.id);
|
|
}
|
|
},
|
|
|
|
handleDeleteFile() {
|
|
// handleDeleteFile is optional, so if its not submitted,
|
|
// don't run it
|
|
// On the other hand, if the files progress is not yet at a 100%,
|
|
// just run fineuploader.cancel
|
|
if(this.props.handleDeleteFile && this.props.file.progress === 100) {
|
|
this.props.handleDeleteFile(this.props.file.id);
|
|
} else if(this.props.handleCancelFile && this.props.file.progress !== 100) {
|
|
this.props.handleCancelFile(this.props.file.id);
|
|
}
|
|
},
|
|
|
|
handleDownloadFile() {
|
|
if(this.props.file.s3Url) {
|
|
// This simply opens a new browser tab with the url provided
|
|
open(this.props.file.s3Url);
|
|
}
|
|
},
|
|
|
|
getFileName() {
|
|
const { numberOfDisplayedFiles, file } = this.props;
|
|
|
|
if(numberOfDisplayedFiles === 1) {
|
|
return (
|
|
<span className="file-name">
|
|
{truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
|
|
</span>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
|
|
getRemoveButton() {
|
|
if(this.props.areAssetsEditable) {
|
|
return (
|
|
<div className="delete-file">
|
|
<span
|
|
className="glyphicon glyphicon-remove text-center"
|
|
aria-hidden="true"
|
|
title={getLangText('Remove file')}
|
|
onClick={this.handleDeleteFile}/>
|
|
</div>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
|
|
render() {
|
|
const { file,
|
|
areAssetsDownloadable,
|
|
numberOfDisplayedFiles } = this.props;
|
|
const innerStyle = numberOfDisplayedFiles === 1 ? { verticalAlign: 'middle' } : null;
|
|
const outerStyle = numberOfDisplayedFiles !== 1 ? { display: 'inline-block' } : null;
|
|
|
|
let previewElement;
|
|
|
|
// Decide whether an image or a placeholder picture should be displayed
|
|
if(file.type.split('/')[0] === 'image') {
|
|
previewElement = (
|
|
<FileDragAndDropPreviewImage
|
|
onClick={this.handleDeleteFile}
|
|
progress={file.progress}
|
|
url={file.url}
|
|
toggleUploadProcess={this.toggleUploadProcess}
|
|
areAssetsDownloadable={areAssetsDownloadable}
|
|
downloadUrl={file.s3UrlSafe}/>
|
|
);
|
|
} else {
|
|
previewElement = (
|
|
<FileDragAndDropPreviewOther
|
|
onClick={this.handleDeleteFile}
|
|
progress={file.progress}
|
|
type={file.type.split('/')[1]}
|
|
toggleUploadProcess={this.toggleUploadProcess}
|
|
areAssetsDownloadable={areAssetsDownloadable}
|
|
downloadUrl={file.s3UrlSafe}/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={outerStyle}>
|
|
<div
|
|
style={innerStyle}
|
|
className="file-drag-and-drop-position">
|
|
{this.getRemoveButton()}
|
|
{previewElement}
|
|
</div>
|
|
{this.getFileName()}
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default FileDragAndDropPreview;
|