ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-368-harmonize-functionality-of-ascrib

Browse Source 
Conflicts:
	js/components/ascribe_uploader/react_s3_fine_uploader.js
This commit is contained in:
diminator 2015-06-29 16:15:08 +02:00
commit e36681ad4d
11 changed files with 300 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/components/ascribe_uploader/file_drag_and_drop.js
View File

@ -7,6 +7,7 @@ import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterato
// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
var FileDragAndDrop = React.createClass({
propTypes: {
className: React.PropTypes.string,
onDragStart: React.PropTypes.func,
onDrop: React.PropTypes.func.isRequired,
onDrag: React.PropTypes.func,
@ -17,6 +18,7 @@ var FileDragAndDrop = React.createClass({
onDragEnd: React.PropTypes.func,
filesToUpload: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func,
multiple: React.PropTypes.bool,
dropzoneInactive: React.PropTypes.bool
},
@ -59,7 +61,6 @@ var FileDragAndDrop = React.createClass({
}
},
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
@ -85,6 +86,13 @@ var FileDragAndDrop = React.createClass({
this.props.handleDeleteFile(fileId);
},
handleCancelFile(fileId) {
// input's value is not change the second time someone
// inputs the same file again, therefore we need to reset its value
this.refs.fileinput.getDOMNode().value = '';
this.props.handleCancelFile(fileId);
},
handleOnClick() {
// when multiple is set to false and the user already uploaded a piece,
// do not propagate event
@ -99,9 +107,11 @@ var FileDragAndDrop = React.createClass({
},
render: function () {
let hasFiles = this.props.filesToUpload.length > 0;
let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
// has files only is true if there are files that do not have the status deleted or canceled
let hasFiles = this.props.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0;
let className = hasFiles ? 'has-files ' : '';
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
className += this.props.className ? ' ' + this.props.className : '';
return (
<div
@ -114,10 +124,11 @@ var FileDragAndDrop = React.createClass({
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
onDragEnd={this.handleDragEnd}>
{hasFiles ? null : this.props.multiple ? <span>Click or drag to add files</span> : <span>Click or drag to add a file</span>}
{hasFiles ? null : this.props.multiple ? <span className="file-drag-and-drop-dialog">Click or drag to add files</span> : <span className="file-drag-and-drop-dialog">Click or drag to add a file</span>}
<FileDragAndDropPreviewIterator
files={this.props.filesToUpload}
handleDeleteFile={this.handleDeleteFile}/>
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}/>
<input
multiple={this.props.multiple}
ref="fileinput"

14
js/components/ascribe_uploader/file_drag_and_drop_preview.js
View File

@ -13,17 +13,19 @@ let FileDragAndDropPreview = React.createClass({
url: React.PropTypes.string,
type: React.PropTypes.string
}).isRequired,
handleDeleteFile: React.PropTypes.func
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func
},
handleDeleteFile(event) {
event.preventDefault();
event.stopPropagation();
handleDeleteFile() {
// handleDeleteFile is optional, so if its not submitted,
// don't run it
if(this.props.handleDeleteFile) {
// 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);
}
},

23
js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
View File

@ -3,6 +3,8 @@
import React from 'react';
import ProgressBar from 'react-progressbar';
import AppConstants from '../../constants/application_constants';
let FileDragAndDropPreviewImage = React.createClass({
propTypes: {
progress: React.PropTypes.number,
@ -10,19 +12,36 @@ let FileDragAndDropPreviewImage = React.createClass({
onClick: React.PropTypes.func
},
getInitialState() {
return {
loading: false
};
},
onClick(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
loading: true
});
this.props.onClick(e);
},
render() {
let imageStyle = {
backgroundImage: 'url("' + this.props.url + '")',
backgroundSize: 'cover'
};
let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
return (
<div
onClick={this.props.onClick}
className="file-drag-and-drop-preview-image"
style={imageStyle}>
<ProgressBar completed={this.props.progress} color="black"/>
{this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
{actionSymbol}
</div>
);
}

20
js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
View File

@ -7,7 +7,8 @@ import FileDragAndDropPreview from './file_drag_and_drop_preview';
let FileDragAndDropPreviewIterator = React.createClass({
propTypes: {
files: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func
},
render() {
@ -15,12 +16,17 @@ let FileDragAndDropPreviewIterator = React.createClass({
return (
<div>
{this.props.files.map((file, i) => {
return (
<FileDragAndDropPreview
key={i}
file={file}
handleDeleteFile={this.props.handleDeleteFile}/>
);
if(file.status !== 'deleted' && file.status !== 'canceled') {
return (
<FileDragAndDropPreview
key={i}
file={file}
handleDeleteFile={this.props.handleDeleteFile}
handleCancelFile={this.props.handleCancelFile}/>
);
} else {
return null;
}
})}
</div>
);

23
js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
View File

@ -3,6 +3,8 @@
import React from 'react';
import ProgressBar from 'react-progressbar';
import AppConstants from '../../constants/application_constants';
let FileDragAndDropPreviewOther = React.createClass({
propTypes: {
type: React.PropTypes.string,
@ -10,15 +12,32 @@ let FileDragAndDropPreviewOther = React.createClass({
onClick: React.PropTypes.func
},
getInitialState() {
return {
loading: false
};
},
onClick(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
loading: true
});
this.props.onClick(e);
},
render() {
let actionSymbol = this.state.loading ? <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> : <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete or cancel upload" onClick={this.onClick} />;
return (
<div
onClick={this.props.onClick}
className="file-drag-and-drop-preview">
<ProgressBar completed={this.props.progress} color="black"/>
<div className="file-drag-and-drop-preview-table-wrapper">
<div className="file-drag-and-drop-preview-other">
{this.props.progress === 100 ? <span className="glyphicon glyphicon-remove delete-file" aria-hidden="true" title="Delete"></span> : null}
{actionSymbol}
<span>{'.' + this.props.type}</span>
</div>
</div>

13
js/components/ascribe_uploader/file_drag_and_drop_toolbar.js Normal file
View File

@ -0,0 +1,13 @@
'use strict';
import React from 'react';
let FileDragAndDropToolbar = React.createClass({
render() {
return (
<div></div>
);
}
});
export default FileDragAndDropToolbar;

118
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -12,6 +12,7 @@ import { getCookie } from '../../utils/fetch_api_utils';
import fineUploader from 'fineUploader';
import FileDragAndDrop from './file_drag_and_drop';
import FileDragAndDropToolbar from './file_drag_and_drop_toolbar';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
@ -27,7 +28,7 @@ var ReactS3FineUploader = React.createClass({
createBlobRoutine: React.PropTypes.shape({
url: React.PropTypes.string
}),
handleChange: React.PropTypes.func,
submitKey: React.PropTypes.func,
autoUpload: React.PropTypes.bool,
debug: React.PropTypes.bool,
objectProperties: React.PropTypes.shape({
@ -63,7 +64,8 @@ var ReactS3FineUploader = React.createClass({
deleteFile: React.PropTypes.shape({
enabled: React.PropTypes.bool,
method: React.PropTypes.string,
endpoint: React.PropTypes.string
endpoint: React.PropTypes.string,
customHeaders: React.PropTypes.object
}),
session: React.PropTypes.shape({
endpoint: React.PropTypes.bool
@ -79,15 +81,11 @@ var ReactS3FineUploader = React.createClass({
multiple: React.PropTypes.bool,
retry: React.PropTypes.shape({
enableAuto: React.PropTypes.bool
})
}),
setUploadStatus: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
},
getInitialState() {
return {
filesToUpload: [],
uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
};
},
getDefaultProps() {
return {
autoUpload: true,
@ -108,7 +106,7 @@ var ReactS3FineUploader = React.createClass({
signature: {
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie('csrftoken')
'X-CSRFToken': getCookie('csrftoken')
}
},
deleteFile: {
@ -116,7 +114,7 @@ var ReactS3FineUploader = React.createClass({
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie('csrftoken')
'X-CSRFToken': getCookie('csrftoken')
}
},
cors: {
@ -147,6 +145,14 @@ var ReactS3FineUploader = React.createClass({
multiple: false
};
},
getInitialState() {
return {
filesToUpload: [],
uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig())
};
},
propsToConfig() {
let objectProperties = this.props.objectProperties;
objectProperties.key = this.requestKey;
@ -171,6 +177,7 @@ var ReactS3FineUploader = React.createClass({
callbacks: {
onSubmit: this.onSubmit,
onComplete: this.onComplete,
onCancel: this.onCancel,
onDelete: this.onDelete,
onSessionRequestComplete: this.onSessionRequestComplete,
onProgress: this.onProgress,
@ -235,8 +242,16 @@ var ReactS3FineUploader = React.createClass({
});
this.setState(newState);
this.createBlob(files[id]);
this.props.handleChange();
console.log('completed ' + files[id].name);
this.props.submitKey(files[id].key);
// also, lets check if after the completion of this upload,
// the form is ready for submission or not
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setUploadStatus(true);
} else {
this.props.setUploadStatus(false);
}
},
createBlob(file) {
@ -282,13 +297,18 @@ var ReactS3FineUploader = React.createClass({
console.log('delete');
},
onCancel() {
console.log('cancel');
// handle file removal here, for this.state.filesToUpload (same as in onDeleteComplete)
},
onCancel(id) {
this.removeFileWithIdFromFilesToUpload(id);
onSessionRequestComplete() {
console.log('sessionrequestcomplete');
let notification = new GlobalNotificationModel('File upload canceled', 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setUploadStatus(true);
} else {
this.props.setUploadStatus(false);
}
},
onDeleteComplete(id, xhr, isError) {
@ -296,21 +316,18 @@ var ReactS3FineUploader = React.createClass({
let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
} else {
// also, sync files from state with the ones from fineuploader
let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
this.removeFileWithIdFromFilesToUpload(id);
// splice because I can
filesToUpload.splice(id, 1);
// set state
let newState = React.addons.update(this.state, {
filesToUpload: { $set: filesToUpload }
});
this.setState(newState);
let notification = new GlobalNotificationModel('File deleted', 'success', 10000);
let notification = new GlobalNotificationModel('File deleted', 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
}
if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
// if so, set uploadstatus to true
this.props.setUploadStatus(true);
} else {
this.props.setUploadStatus(false);
}
},
onProgress(id, name, uploadedBytes, totalBytes) {
@ -330,11 +347,15 @@ var ReactS3FineUploader = React.createClass({
// promise
},
handleCancelFile(fileId) {
this.state.uploader.cancel(fileId);
},
handleUploadFile(files) {
// If multiple set and user already uploaded its work,
// cancel upload
if(!this.props.multiple && this.state.filesToUpload.length > 0) {
if(!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0) {
return;
}
@ -373,24 +394,45 @@ var ReactS3FineUploader = React.createClass({
oldAndNewFiles[i].progress = oldFiles[j].progress;
oldAndNewFiles[i].type = oldFiles[j].type;
oldAndNewFiles[i].url = oldFiles[j].url;
oldAndNewFiles[i].key = oldFiles[j].key;
}
}
}
// set the new file array
let newState = React.addons.update(this.state, {
filesToUpload: { $set: oldAndNewFiles }
});
this.setState(newState);
},
removeFileWithIdFromFilesToUpload(fileId) {
// also, sync files from state with the ones from fineuploader
let filesToUpload = JSON.parse(JSON.stringify(this.state.filesToUpload));
// splice because I can
filesToUpload.splice(fileId, 1);
// set state
let newState = React.addons.update(this.state, {
filesToUpload: { $set: filesToUpload }
});
this.setState(newState);
},
render() {
return (
<FileDragAndDrop
onDrop={this.handleUploadFile}
filesToUpload={this.state.filesToUpload}
handleDeleteFile={this.handleDeleteFile}
multiple={this.props.multiple}
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.length > 0} />
<div>
<FileDragAndDrop
className="file-drag-and-drop"
onDrop={this.handleUploadFile}
filesToUpload={this.state.filesToUpload}
handleDeleteFile={this.handleDeleteFile}
handleCancelFile={this.handleCancelFile}
multiple={this.props.multiple}
dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0} />
<FileDragAndDropToolbar />
</div>
);
}

50
js/components/edition.js
View File

@ -434,12 +434,40 @@ let EditionFurtherDetails = React.createClass({
edition: React.PropTypes.object,
handleSuccess: React.PropTypes.func
},
getInitialState() {
return {
loading: false
};
},
showNotification(){
this.props.handleSuccess();
let notification = new GlobalNotificationModel('Details updated', 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
},
submitKey(key){
this.setState({
otherDataKey: key
});
},
setUploadStatus(isReady) {
this.setState({
uploadStatus: isReady
});
},
isReadyForFormSubmission(files) {
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if(files.length > 0 && files[0].status === 'upload successful') {
return true;
} else {
return false;
}
},
render() {
let editable = this.props.edition.acl.indexOf('edit') > -1;
return (
@ -464,22 +492,26 @@ let EditionFurtherDetails = React.createClass({
editable={editable}
edition={this.props.edition} />
<FileUploader
edition={this.props.edition}
ref='uploader'/>
submitKey={this.submitKey}
setUploadStatus={this.setUploadStatus}
isReadyForFormSubmission={this.isReadyForFormSubmission}
edition={this.props.edition}/>
</Col>
</Row>
);
}
});
let FileUploader = React.createClass( {
handleChange(){
this.setState({other_data_key: this.refs.fineuploader.state.filesToUpload[0].key});
let FileUploader = React.createClass({
propTypes: {
setUploadStatus: React.PropTypes.func,
submitKey: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
},
render() {
return (
<ReactS3FineUploader
ref='fineuploader'
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'otherdata',
@ -488,11 +520,13 @@ let FileUploader = React.createClass( {
createBlobRoutine={{
url: apiUrls.blob_digitalworks
}}
handleChange={this.handleChange}
validation={{
itemLimit: 100000,
sizeLimit: '10000000'
}}/>
}}
submitKey={this.props.submitKey}
setUploadStatus={this.props.setUploadStatus}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
);
}
});

64
js/components/register_piece.js
View File

@ -24,8 +24,12 @@ let RegisterPiece = React.createClass( {
mixins: [Router.Navigation],
getInitialState(){
return {digital_work_key: null};
return {
digitalWorkKey: null,
uploadStatus: false
};
},
handleSuccess(){
let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
@ -37,30 +41,44 @@ let RegisterPiece = React.createClass( {
for (let ref in this.refs.form.refs){
data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value;
}
data.digital_work_key = this.state.digital_work_key;
data.digital_work_key = this.state.digitalWorkKey;
return data;
},
handleChange(){
this.setState({digital_work_key: this.refs.uploader.refs.fineuploader.state.filesToUpload[0].key});
submitKey(key){
this.setState({
digitalWorkKey: key
});
},
setUploadStatus(isReady) {
this.setState({
uploadStatus: isReady
});
},
isReadyForFormSubmission(files) {
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if(files.length > 0 && files[0].status === 'upload successful') {
return true;
} else {
return false;
}
},
render() {
let buttons = null;
if (this.refs.uploader && this.refs.uploader.refs.fineuploader.state.filesToUpload[0].status === 'upload successful'){
if (this.state.uploadStatus){
buttons = (
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
Register your artwork
</button>);
}
return (
<div className="row ascribe-row">
<div className="col-md-5">
<FileUploader
ref='uploader'
handleChange={this.handleChange}/>
<br />
</div>
<div className="col-md-7">
<div className="col-md-12">
<h3 style={{'marginTop': 0}}>Lock down title</h3>
<Form
ref='form'
@ -73,6 +91,13 @@ let RegisterPiece = React.createClass( {
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</button>
}>
<Property
label="Files to upload">
<FileUploader
submitKey={this.submitKey}
setUploadStatus={this.setUploadStatus}
isReadyForFormSubmission={this.isReadyForFormSubmission}/>
</Property>
<Property
name='artist_name'
label="Artist Name">
@ -116,11 +141,16 @@ let RegisterPiece = React.createClass( {
});
let FileUploader = React.createClass( {
let FileUploader = React.createClass({
propTypes: {
setUploadStatus: React.PropTypes.func,
submitKey: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func
},
render() {
return (
<ReactS3FineUploader
ref='fineuploader'
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'digitalwork'
@ -128,11 +158,13 @@ let FileUploader = React.createClass( {
createBlobRoutine={{
url: apiUrls.blob_digitalworks
}}
handleChange={this.props.handleChange}
submitKey={this.props.submitKey}
validation={{
itemLimit: 100000,
sizeLimit: '25000000000'
}}/>
}}
setUploadStatus={this.props.setUploadStatus}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}/>
);
}
});

14
sass/ascribe_settings.scss
View File

@ -68,12 +68,14 @@
padding-top: 1em;
padding-left: 1.5em;
padding-right: 1.5em;
cursor:pointer;
input, div, span, pre, textarea, select {
input, div, span:not(.glyphicon), pre, textarea, select {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
span {
font-weight: normal;
font-size: 0.9em;
@ -81,8 +83,8 @@
}
div {
margin-top: 10px;
div {
/* margin-top: 10px; */
div:not(.file-drag-and-drop div) {
padding-left: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
@ -92,6 +94,10 @@
}
}
.progressbar-container, .progressbar-progress {
margin-top: 0 !important;
}
input, pre, textarea, select {
font-weight: 400;
font-size: 1.1em;

45
sass/ascribe_uploader.scss
View File

@ -1,13 +1,15 @@
.file-drag-and-drop {
display: table-cell;
display: block;
outline: 1px dashed #616161;
cursor: pointer;
vertical-align: middle;
text-align: center;
height:208px;
width: 672px;
height: auto;
background-color: #FAFAFA;
transition: .1s linear background-color;
overflow: auto;
margin-top: 1em;
padding: 3em;
}
.inactive-dropzone {
@ -22,25 +24,34 @@
background-color: rgba(72, 218, 203, 0.2);
}
.file-drag-and-drop > span {
font-size: 1.5em;
.file-drag-and-drop .file-drag-and-drop-dialog {
font-size: 1.25em !important;
margin-top: 1em;
&:before {
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
}
.has-files {
text-align: left;
padding: 3em 0 0 0;
padding: 4% 0 0 0;
}
.file-drag-and-drop-position {
display: inline-block;
margin: 0 0 3em 3em;
margin: 0 0 4% 4%;
float:left;
}
.file-drag-and-drop-preview-table-wrapper {
display: table;
height:94px;
width:104px;
height:64px;
width:74px;
}
.file-drag-and-drop-preview {
@ -52,16 +63,16 @@
.file-drag-and-drop-preview-image {
display: table;
height:104px;
width:104px;
height:74px;
width:74px;
overflow:hidden;
border: 1px solid #616161;
text-align: center;
}
.file-drag-and-drop-preview-image .delete-file {
font-size: 3em;
margin-top: .5em;
font-size: 2.5em;
margin-top: .3em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;
@ -73,9 +84,9 @@
.file-drag-and-drop-preview-other .delete-file {
position: relative;
top: .45em;
top: .3em;
margin-top: 0;
font-size: 3em;
font-size: 2.5em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;
@ -94,5 +105,5 @@
.file-drag-and-drop-preview-other span:not(:first-child) {
display: block;
margin-top: 1.5em;
margin-top: .5em;
}