use safe urls for thumbnails and links

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -57,7 +57,7 @@ let FileDragAndDropPreview = React.createClass({
                                 url={this.props.file.url}
                                 toggleUploadProcess={this.toggleUploadProcess}
                                 areAssetsDownloadable={this.props.areAssetsDownloadable}
-                                downloadFile={this.handleDownloadFile}/>);
+                                downloadUrl={this.props.file.s3UrlSafe}/>);
         } else {
             previewElement = (<FileDragAndDropPreviewOther
                                 onClick={this.handleDeleteFile}
@@ -65,7 +65,7 @@ let FileDragAndDropPreview = React.createClass({
                                 type={this.props.file.type.split('/')[1]}
                                 toggleUploadProcess={this.toggleUploadProcess}
                                 areAssetsDownloadable={this.props.areAssetsDownloadable}
-                                downloadFile={this.handleDownloadFile}/>);
+                                downloadUrl={this.props.file.s3UrlSafe}/>);
         }
 
         return (

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -10,7 +10,7 @@ let FileDragAndDropPreviewImage = React.createClass({
         progress: React.PropTypes.number,
         url: React.PropTypes.string,
         toggleUploadProcess: React.PropTypes.func,
-        downloadFile: React.PropTypes.func,
+        downloadUrl: React.PropTypes.string,
         areAssetsDownloadable: React.PropTypes.bool
     },
 
@@ -48,7 +48,7 @@ let FileDragAndDropPreviewImage = React.createClass({
             // only if assets are actually downloadable, there should be a download icon if the process is already at
             // 100%. If not, no actionSymbol should be displayed
             if(this.props.areAssetsDownloadable) {
-                actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
+                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file"/>;
             }
 
         } else {

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -11,7 +11,7 @@ let FileDragAndDropPreviewOther = React.createClass({
         progress: React.PropTypes.number,
         areAssetsDownloadable: React.PropTypes.bool,
         toggleUploadProcess: React.PropTypes.func,
-        downloadFile: React.PropTypes.func
+        downloadUrl: React.PropTypes.string
     },
 
     getInitialState() {
@@ -44,7 +44,7 @@ let FileDragAndDropPreviewOther = React.createClass({
             // only if assets are actually downloadable, there should be a download icon if the process is already at
             // 100%. If not, no actionSymbol should be displayed
             if(this.props.areAssetsDownloadable) {
-                actionSymbol = <span className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file" onClick={this.props.downloadFile}/>;
+                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title="Download file"/>;
             }
 
         } else {

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -276,6 +276,11 @@ var ReactS3FineUploader = React.createClass({
             return res.json();
         })
         .then((res) =>{
+            if(res.otherdata) {
+                file.s3Url = res.otherdata.url_safe;
+            } else {
+                throw new Error('Could not find a url to download.');
+            }
             defer.success(res.key);
         })
         .catch((err) => {
@@ -327,7 +332,7 @@ var ReactS3FineUploader = React.createClass({
         if(success) {
             // fetch blobs for images
             response = response.map((file) => {
-                file.url = file.s3Url;
+                file.url = file.s3UrlSafe;
                 file.status = 'online';
                 file.progress = 100;
                 return file;
@@ -390,7 +395,7 @@ var ReactS3FineUploader = React.createClass({
         } else {
             let fileToDelete = this.state.filesToUpload[fileId];
             fileToDelete.status = 'deleted';
-            console.log(this.state.uploader.getUploads());
+
             S3Fetcher
                 .deleteFile(fileToDelete.s3Key, fileToDelete.s3Bucket)
                 .then(() => this.onDeleteComplete(fileToDelete.id, null, false))
@@ -420,7 +425,6 @@ var ReactS3FineUploader = React.createClass({
     },
 
     handleUploadFile(files) {
-        console.log(this.state.files);
         // If multiple set and user already uploaded its work,
         // cancel upload
         if(!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0) {

sass/ascribe_uploader.scss

@@ -97,6 +97,10 @@
     text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
     cursor: pointer;
 
+    &:link, &:visited, &:hover, &:active {
+        text-decoration: none;
+    }
+
     &:hover {
         color: #d9534f;
     }
@@ -111,6 +115,10 @@
     text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
     cursor: pointer;
 
+    &:link, &:visited, &:hover, &:active {
+        text-decoration: none;
+    }
+
     &:hover {
         color: #d9534f;
     }