diff --git a/index.html b/index.html
index 7131ffbe..eee1d599 100644
--- a/index.html
+++ b/index.html
@@ -3174,7 +3174,8 @@
Drafty.attachments(content, function(att, i) {
attachments.push();
+ mimetype={att.mime} size={Drafty.getEntitySize(att)}
+ onError={this.props.onError} key={i} />);
}, this);
content = React.createElement('span', null, Drafty.format(content, formatter, this));
}
@@ -3217,7 +3218,9 @@
var attachments = [
+ progress={this.props.progress}
+ onCancelUpload={this.props.onCancelUpload}
+ onError={this.props.onError} />
];
return (
@@ -3263,22 +3266,38 @@
});
Message.Attachment = React.createClass({
- render: function() {
- var url = this.props.downloadUrl;
- // Detect if the download URL is relative or absolute.
- // Don't send credentials if the URL is absolute: we don't want to send secret
- // keys to a third-party server.
- if (!(/^(?:(?:[a-z]+:)?\/\/)/i.test(url))) {
- // Relative URL. Convert to absolute and add authentication credentials as parameters.
- var tmp = new URL(url, window.location);
- var token = Tinode.getAuthToken();
- if (token) {
- tmp.searchParams.append("auth", "token");
- tmp.searchParams.append("secret", token.token);
+ getInitialState: function() {
+ return {
+ downloader: null,
+ progress: 0
+ };
+ },
+
+ downloadFile: function(url, filename, mimetype) {
+ var downloader = Tinode.getLargeFileHelper();
+ this.setState({downloader: downloader});
+ var instance = this;
+ downloader.download(url, filename, mimetype, function(e) {
+ instance.setState({progress: e.loaded / instance.props.size});
+ }).then(function() {
+ instance.setState({downloader: null, progress: 0});
+ }).catch(function(err) {
+ if (err) {
+ instance.props.onError("Error downloading file: " + err.message, "err");
}
- tmp.searchParams.append("apikey", API_KEY);
- url = tmp.toString();
+ instance.setState({downloader: null, progress: 0});
+ });
+ },
+
+ handleCancel: function() {
+ if (this.props.uploader) {
+ this.props.onCancelUpload();
+ } else if (this.state.downloader) {
+ this.state.downloader.cancel();
}
+ },
+
+ render: function() {
var filename = this.props.filename || "file_attachment";
if (filename.length > 36) {
filename = filename.substr(0, 16) + "..." + filename.substr(-16);
@@ -3286,15 +3305,34 @@
var size = this.props.size > 0 ?
({bytesToHumanSize(this.props.size)}) :
null;
+
+ // Detect if the download URL is relative or absolute.
+ // If the URL is relative use LargeFileHelper to attach authentication
+ // credentials to the request.
+ var url, download, helperFunc;
+ if (!this.props.uploader && !this.state.downloader &&
+ !(/^(?:(?:[a-z]+:)?\/\/)/i.test(this.props.downloadUrl))) {
+ // Relative URL. Use download helper.
+ url = "javascript:;";
+ var instance = this;
+ helperFunc = function(e) {
+ instance.downloadFile(instance.props.downloadUrl, instance.props.filename, instance.props.mimetype);
+ };
+ } else {
+ url = this.props.downloadUrl;
+ helperFunc = null;
+ }
+ download = this.props.filename;
+ var progress = this.props.uploader ? this.props.progress : this.state.progress;
return (
insert_drive_file
{filename} {size}
- {this.props.uploader ?
-
+ {this.props.uploader || this.state.downloader ?
+
:
-