-
- {files.map((file, i) => {
- return (
-
- );
- })}
-
+
+ {files.map((file, i) => {
+ return (
+
+ );
+ })}
);
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
index 12e52b0a..e5e7c947 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
@@ -3,16 +3,21 @@
import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
+import AclProxy from '../../acl_proxy';
import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils';
-let FileDragAndDropPreviewOther = React.createClass({
+
+const { string, number, bool, func } = React.PropTypes;
+
+const FileDragAndDropPreviewOther = React.createClass({
propTypes: {
- type: React.PropTypes.string,
- progress: React.PropTypes.number,
- areAssetsDownloadable: React.PropTypes.bool,
- toggleUploadProcess: React.PropTypes.func,
- downloadUrl: React.PropTypes.string
+ type: string,
+ progress: number,
+ areAssetsDownloadable: bool,
+ toggleUploadProcess: func,
+ downloadUrl: string,
+ showProgress: bool
},
getInitialState() {
@@ -33,39 +38,49 @@ let FileDragAndDropPreviewOther = React.createClass({
},
render() {
-
+ const { progress,
+ areAssetsDownloadable,
+ downloadUrl,
+ type,
+ showProgress } = this.props;
+ const style = !showProgress ? { visibility: 'hidden' } : null;
let actionSymbol;
-
- if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
- actionSymbol =
;
- } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
- actionSymbol = ;
- } else if(this.props.progress === 100) {
- // 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 =
{actionSymbol}
-
{'.' + this.props.type}
+
{'.' + type}
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
index 1f1fd421..302837d5 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
@@ -5,10 +5,9 @@ import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
-import { getLangText } from '../../../utils/lang_utils';
-let FileDragAndDropPreviewProgress = React.createClass({
+const FileDragAndDropPreviewProgress = React.createClass({
propTypes: {
files: React.PropTypes.array
},
@@ -40,24 +39,18 @@ let FileDragAndDropPreviewProgress = React.createClass({
},
render() {
+ const files = this.props.files.filter(displayValidProgressFilesFilter);
+ const style = !files.length ? { display: 'none' } : null;
let overallProgress = this.calcOverallProgress();
- let overallFileSize = this.calcOverallFileSize();
- let style = {
- visibility: 'hidden'
- };
-
- // only visible if overallProgress is over zero
- // or the overallFileSize is greater than 10MB
- if(overallProgress !== 0 && overallFileSize > 10000000) {
- style.visibility = 'visible';
- }
return (
-
+ {getLangText('remove')} ]
+
+ );
+ } else {
+ return (
+ {getLangText('No file chosen')}
+ );
+ }
+ },
+
+ render() {
+ let { multiple,
+ allowedExtensions } = this.props;
+
+ /*
+ * We do not want a button that submits here.
+ * As UploadButton could be used in forms that want to be submitted independent
+ * of clicking the selector.
+ * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
+ */
return (
-
-
- );
- } else {
- return (
- {getLangText('No file chosen')}
+
);
}
- },
-
- render() {
- let { multiple,
- allowedExtensions } = this.props;
-
- /*
- * We do not want a button that submits here.
- * As UploadButton could be used in forms that want to be submitted independent
- * of clicking the selector.
- * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
- */
- return (
-
- );
- }
-});
-
-export default UploadButton;
\ No newline at end of file
+ });
+}
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index bf4250c5..c5d2cb1c 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -18,88 +18,101 @@ import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp }
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
-let ReactS3FineUploader = React.createClass({
+
+const { shape,
+ string,
+ oneOfType,
+ number,
+ func,
+ bool,
+ any,
+ object,
+ oneOf,
+ element,
+ arrayOf } = React.PropTypes;
+
+const ReactS3FineUploader = React.createClass({
propTypes: {
- keyRoutine: React.PropTypes.shape({
- url: React.PropTypes.string,
- fileClass: React.PropTypes.string,
- pieceId: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.number
+ keyRoutine: shape({
+ url: string,
+ fileClass: string,
+ pieceId: oneOfType([
+ string,
+ number
])
}),
- createBlobRoutine: React.PropTypes.shape({
- url: React.PropTypes.string,
- pieceId: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.number
+ createBlobRoutine: shape({
+ url: string,
+ pieceId: oneOfType([
+ string,
+ number
])
}),
- submitFile: React.PropTypes.func,
- autoUpload: React.PropTypes.bool,
- debug: React.PropTypes.bool,
- objectProperties: React.PropTypes.shape({
- acl: React.PropTypes.string
+ handleChangedFile: func, // is for when a file is dropped or selected
+ submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
+ autoUpload: bool,
+ debug: bool,
+ objectProperties: shape({
+ acl: string
}),
- request: React.PropTypes.shape({
- endpoint: React.PropTypes.string,
- accessKey: React.PropTypes.string,
- params: React.PropTypes.shape({
- csrfmiddlewaretoken: React.PropTypes.string
+ request: shape({
+ endpoint: string,
+ accessKey: string,
+ params: shape({
+ csrfmiddlewaretoken: string
})
}),
- signature: React.PropTypes.shape({
- endpoint: React.PropTypes.string
+ signature: shape({
+ endpoint: string
}).isRequired,
- uploadSuccess: React.PropTypes.shape({
- method: React.PropTypes.string,
- endpoint: React.PropTypes.string,
- params: React.PropTypes.shape({
- isBrowserPreviewCapable: React.PropTypes.any, // maybe fix this later
- bitcoin_ID_noPrefix: React.PropTypes.string
+ uploadSuccess: shape({
+ method: string,
+ endpoint: string,
+ params: shape({
+ isBrowserPreviewCapable: any, // maybe fix this later
+ bitcoin_ID_noPrefix: string
})
}),
- cors: React.PropTypes.shape({
- expected: React.PropTypes.bool
+ cors: shape({
+ expected: bool
}),
- chunking: React.PropTypes.shape({
- enabled: React.PropTypes.bool
+ chunking: shape({
+ enabled: bool
}),
- resume: React.PropTypes.shape({
- enabled: React.PropTypes.bool
+ resume: shape({
+ enabled: bool
}),
- deleteFile: React.PropTypes.shape({
- enabled: React.PropTypes.bool,
- method: React.PropTypes.string,
- endpoint: React.PropTypes.string,
- customHeaders: React.PropTypes.object
+ deleteFile: shape({
+ enabled: bool,
+ method: string,
+ endpoint: string,
+ customHeaders: object
}).isRequired,
- session: React.PropTypes.shape({
- customHeaders: React.PropTypes.object,
- endpoint: React.PropTypes.string,
- params: React.PropTypes.object,
- refreshOnRequests: React.PropTypes.bool
+ session: shape({
+ customHeaders: object,
+ endpoint: string,
+ params: object,
+ refreshOnRequests: bool
}),
- validation: React.PropTypes.shape({
- itemLimit: React.PropTypes.number,
- sizeLimit: React.PropTypes.string,
- allowedExtensions: React.PropTypes.arrayOf(React.PropTypes.string)
+ validation: shape({
+ itemLimit: number,
+ sizeLimit: string,
+ allowedExtensions: arrayOf(string)
}),
- messages: React.PropTypes.shape({
- unsupportedBrowser: React.PropTypes.string
+ messages: shape({
+ unsupportedBrowser: string
}),
- formatFileName: React.PropTypes.func,
- multiple: React.PropTypes.bool,
- retry: React.PropTypes.shape({
- enableAuto: React.PropTypes.bool
+ formatFileName: func,
+ multiple: bool,
+ retry: shape({
+ enableAuto: bool
}),
- uploadStarted: React.PropTypes.func,
- setIsUploadReady: React.PropTypes.func,
- isReadyForFormSubmission: React.PropTypes.func,
- areAssetsDownloadable: React.PropTypes.bool,
- areAssetsEditable: React.PropTypes.bool,
- defaultErrorMessage: React.PropTypes.string,
- onInactive: React.PropTypes.func,
+ setIsUploadReady: func,
+ isReadyForFormSubmission: func,
+ areAssetsDownloadable: bool,
+ areAssetsEditable: bool,
+ defaultErrorMessage: string,
+ onInactive: func,
// We encountered some cases where people had difficulties to upload their
// works to ascribe due to a slow internet connection.
@@ -112,22 +125,22 @@ let ReactS3FineUploader = React.createClass({
// which should be passed into 'uploadMethod':
// 'hash': upload using the hash
// 'upload': upload full file (default if not specified)
- enableLocalHashing: React.PropTypes.bool,
- uploadMethod: React.PropTypes.oneOf(['hash', 'upload']),
+ enableLocalHashing: bool,
+ uploadMethod: oneOf(['hash', 'upload']),
// A class of a file the user has to upload
// Needs to be defined both in singular as well as in plural
- fileClassToUpload: React.PropTypes.shape({
- singular: React.PropTypes.string,
- plural: React.PropTypes.string
+ fileClassToUpload: shape({
+ singular: string,
+ plural: string
}),
// Uploading functionality of react fineuploader is disconnected from its UI
// layer, which means that literally every (properly adjusted) react element
// can handle the UI handling.
- fileInputElement: React.PropTypes.oneOfType([
- React.PropTypes.func,
- React.PropTypes.element
+ fileInputElement: oneOfType([
+ func,
+ element
])
},
@@ -376,6 +389,19 @@ let ReactS3FineUploader = React.createClass({
});
},
+ setThumbnailForFileId(fileId, url) {
+ const { filesToUpload } = this.state;
+
+ if(fileId < filesToUpload.length) {
+ const changeSet = { $set: url };
+ const newFilesToUpload = React.addons.update(filesToUpload, { [fileId]: { thumbnailUrl: changeSet } });
+
+ this.setState({ filesToUpload: newFilesToUpload });
+ } else {
+ throw new Error("You're accessing an index out of range of filesToUpload");
+ }
+ },
+
/* FineUploader specific callback function handlers */
onUploadChunk(id, name, chunkData) {
@@ -510,7 +536,12 @@ let ReactS3FineUploader = React.createClass({
onCancel(id) {
// when a upload is canceled, we need to update this components file array
- this.setStatusOfFile(id, 'canceled');
+ this.setStatusOfFile(id, 'canceled')
+ .then(() => {
+ if(typeof this.props.handleChangedFile === 'function') {
+ this.props.handleChangedFile(this.state.filesToUpload[id]);
+ }
+ });
let notification = new GlobalNotificationModel(getLangText('File upload canceled'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
@@ -604,7 +635,12 @@ let ReactS3FineUploader = React.createClass({
//
// If there is an error during the deletion, we will just change the status back to 'online'
// and display an error message
- this.setStatusOfFile(fileId, 'deleted');
+ this.setStatusOfFile(fileId, 'deleted')
+ .then(() => {
+ if(typeof this.props.handleChangedFile === 'function') {
+ this.props.handleChangedFile(this.state.filesToUpload[fileId]);
+ }
+ });
// In some instances (when the file was already uploaded and is just displayed to the user
// - for example in the contract or additional files dialog)
@@ -672,11 +708,6 @@ let ReactS3FineUploader = React.createClass({
// override standard files list with only valid files
files = validFiles;
- // Call this method to signal the outside component that an upload is in progress
- if(typeof this.props.uploadStarted === 'function' && files.length > 0) {
- this.props.uploadStarted();
- }
-
// if multiple is set to false and user drops multiple files into the dropzone,
// take the first one and notify user that only one file can be submitted
if(!this.props.multiple && files.length > 1) {
@@ -849,21 +880,37 @@ let ReactS3FineUploader = React.createClass({
// set the new file array
let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: oldAndNewFiles });
- this.setState({ filesToUpload });
+ this.setState({ filesToUpload }, () => {
+ // when files have been dropped or selected by a user, we want to propagate that
+ // information to the outside components, so they can act on it (in our case, because
+ // we want the user to define a thumbnail when the actual work is not renderable
+ // (like e.g. a .zip file))
+ if(typeof this.props.handleChangedFile === 'function') {
+ // its save to assume that the last file in `filesToUpload` is always
+ // the latest file added
+ this.props.handleChangedFile(this.state.filesToUpload.slice(-1)[0]);
+ }
+ });
},
+ // This method has been made promise-based to immediately afterwards
+ // call a callback function (instantly after this.setState went through)
+ // This is e.g. needed when showing/hiding the optional thumbnail upload
+ // field in the registration form
setStatusOfFile(fileId, status) {
- let changeSet = {};
+ return Q.Promise((resolve) => {
+ let changeSet = {};
- if(status === 'deleted' || status === 'canceled') {
- changeSet.progress = { $set: 0 };
- }
+ if(status === 'deleted' || status === 'canceled') {
+ changeSet.progress = { $set: 0 };
+ }
- changeSet.status = { $set: status };
+ changeSet.status = { $set: status };
- let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
+ let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
- this.setState({ filesToUpload });
+ this.setState({ filesToUpload }, resolve);
+ });
},
isDropzoneInactive() {
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
index cd1dbce2..ed76c5e8 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
@@ -42,6 +42,15 @@ export function displayValidFilesFilter(file) {
return file.status !== 'deleted' && file.status !== 'canceled';
}
+/**
+ * Filter function for filtering all files except for deleted and canceled files
+ * @param {object} file A file from filesToUpload that has status as a prop.
+ * @return {boolean}
+ */
+export function displayRemovedFilesFilter(file) {
+ return file.status === 'deleted' || file.status === 'canceled';
+}
+
/**
* Filter function for which files to integrate in the progress process
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 43ac7bb7..322b9934 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -17,7 +17,7 @@ import UserStore from '../stores/user_store';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
-import PropertyCollapsible from './ascribe_forms/property_collapsible';
+import Property from './ascribe_forms/property';
import RegisterPieceForm from './ascribe_forms/form_register_piece';
import { mergeOptions } from '../utils/general_utils';
@@ -96,15 +96,16 @@ let RegisterPiece = React.createClass( {
getSpecifyEditions() {
if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
return (
-
+ checkboxLabel={getLangText('Specify editions')}
+ expanded={false}>
{getLangText('Editions')}
+
);
}
},
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index 0c293b15..41f2c25a 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -253,7 +253,7 @@ const PRRegisterPieceForm = React.createClass({
name="digitalWorkKey"
label={getLangText('Select the PDF with your work')}>
- {getLangText('Submitted to prize')}
- {getLangText('Submitted to Cyland')}
- {getLangText('Loaned to Cyland')}