87 lines
2.9 KiB
React
87 lines
2.9 KiB
React
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
import FileProgress from './file-progress.jsx';
|
|
import { bytesToHumanSize } from '../lib/strformat.js';
|
|
import { isUrlRelative, sanitizeUrl } from '../lib/utils.js';
|
|
|
|
export default class Attachment extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
downloader: null,
|
|
progress: 0
|
|
};
|
|
|
|
this.downloadFile = this.downloadFile.bind(this);
|
|
this.handleCancel = this.handleCancel.bind(this);
|
|
}
|
|
|
|
downloadFile(url, filename, mimetype) {
|
|
var downloader = this.props.tinode.getLargeFileHelper();
|
|
this.setState({downloader: downloader});
|
|
downloader.download(url, filename, mimetype, (loaded) => {
|
|
this.setState({progress: loaded / this.props.size});
|
|
}).then(() => {
|
|
this.setState({downloader: null, progress: 0});
|
|
}).catch((err) => {
|
|
if (err) {
|
|
this.props.onError("Error downloading file: " + err.message, 'err');
|
|
}
|
|
this.setState({downloader: null, progress: 0});
|
|
});
|
|
}
|
|
|
|
handleCancel() {
|
|
if (this.props.uploader) {
|
|
this.props.onCancelUpload();
|
|
} else if (this.state.downloader) {
|
|
this.state.downloader.cancel();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let filename = this.props.filename || 'file_attachment';
|
|
if (filename.length > 36) {
|
|
filename = filename.substr(0, 16) + '...' + filename.substr(-16);
|
|
}
|
|
let size = this.props.size > 0 ?
|
|
<span className="small gray">({bytesToHumanSize(this.props.size)})</span> :
|
|
null;
|
|
|
|
// Detect if the download URL is relative or absolute.
|
|
// If the URL is relative use LargeFileHelper to attach authentication
|
|
// credentials to the request.
|
|
let url, helperFunc;
|
|
if (!this.props.uploader && !this.state.downloader && isUrlRelative(this.props.downloadUrl)) {
|
|
// Relative URL. Use download helper.
|
|
url = '#';
|
|
helperFunc = (e) => {
|
|
e.preventDefault();
|
|
this.downloadFile(this.props.downloadUrl, this.props.filename, this.props.mimetype);
|
|
};
|
|
} else {
|
|
url = sanitizeUrl(this.props.downloadUrl) || 'about:blank';
|
|
helperFunc = null;
|
|
}
|
|
return (
|
|
<div className="attachment">
|
|
<div><i className="material-icons big gray">insert_drive_file</i></div>
|
|
<div className="flex-column">
|
|
<div>{filename} {size}</div>
|
|
{this.props.uploader || this.state.downloader ?
|
|
<FileProgress progress={this.props.uploader ? this.props.progress : this.state.progress}
|
|
onCancel={this.handleCancel} />
|
|
:
|
|
<div><a href={url} download={this.props.filename} onClick={helperFunc} >
|
|
<i className="material-icons">file_download</i> <FormattedMessage id="save_attachment"
|
|
defaultMessage="save" description="Call to save an attachment" />
|
|
</a></div>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|