ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Use react-utility-belt's uploader utils

This commit is contained in:
Brett Sun 2016-07-08 16:15:33 +02:00
parent 4515dffb48
commit 16a7e32840
7 changed files with 24 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/ascribe_detail/further_details.js
View File

@ -3,6 +3,8 @@ import React from 'react';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import { atLeastOneCreatedBlobFile } from 'react-utility-belt/es6/uploader/utils/file_validation_utils';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
@ -11,8 +13,6 @@ import FurtherDetailsFileuploader from './further_details_fileuploader';
import Form from './../ascribe_forms/form';
import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { getLangText } from '../../utils/lang';
@ -77,7 +77,7 @@ const FurtherDetails = React.createClass({
multiple
overrideForm
editable={editable}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isReadyForFormSubmission={atLeastOneCreatedBlobFile}
otherData={otherData}
pieceId={pieceId} />
</Form>

5
js/components/ascribe_forms/form_create_contract.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import { atLeastOneCreatedBlobFile } from 'react-utility-belt/es6/uploader/utils/file_validation_utils';
import ContractListActions from '../../actions/contract_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
@ -16,7 +18,6 @@ import AppConstants from '../../constants/application_constants';
import { ValidationTypes } from '../../constants/uploader_constants';
import { getLangText } from '../../utils/lang';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { resolveUrl } from '../../utils/url_resolver';
@ -86,7 +87,7 @@ let CreateContractForm = React.createClass({
areAssetsDownloadable={true}
areAssetsEditable={true}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isReadyForFormSubmission={atLeastOneCreatedBlobFile}
fileClassToUpload={this.props.fileClassToUpload} />
</Property>
<Property

17
js/components/ascribe_forms/form_register_piece.js
View File

@ -1,7 +1,8 @@
'use strict';
import React from 'react';
import { removedFilesFilter, validFilesFilter } from 'react-utility-belt/es6/uploader/utils/file_filters';
import { atLeastOneCreatedBlobFile, fileOptional } from 'react-utility-belt/es6/uploader/utils/file_validation_utils';
import Form from './form';
import Property from './property';
import InputFineUploader from './input_fineuploader';
@ -17,7 +18,6 @@ import { currentUserShape, locationShape } from '../prop_types';
import AppConstants from '../../constants/application_constants';
import { ValidationParts, ValidationTypes } from '../../constants/uploader_constants';
import { FileStatus, formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { getLangText } from '../../utils/lang';
import { resolveUrl } from '../../utils/url_resolver';
@ -74,8 +74,7 @@ let RegisterPieceForm = React.createClass({
},
handleChangedDigitalWork(digitalWorkFile) {
if (digitalWorkFile &&
(digitalWorkFile.status === FileStatus.DELETED || digitalWorkFile.status === FileStatus.CANCELED)) {
if (digitalWorkFile && removedFilesFilter(digitalWorkFile)) {
this.refs.form.refs.thumbnail_file.reset();
// Manually we need to set the ready state for `thumbnailKeyReady` back
@ -94,8 +93,8 @@ let RegisterPieceForm = React.createClass({
fineuploader.setThumbnailForFileId(
digitalWorkFile.id,
// if thumbnail was deleted, we delete it from the display as well
thumbnailFile.status !== FileStatus.DELETED ? thumbnailFile.url : null
// Only keep the thumbnail in the display if it's still valid
validFilesFilter(thumbnailFile) ? thumbnailFile.url : null
);
},
@ -172,7 +171,7 @@ let RegisterPieceForm = React.createClass({
}}
validation={ValidationTypes.registerWork}
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isReadyForFormSubmission={atLeastOneCreatedBlobFile}
isFineUploaderActive={isFineUploaderActive}
disabled={!isFineUploaderEditable}
enableLocalHashing={hashLocally}
@ -191,7 +190,7 @@ let RegisterPieceForm = React.createClass({
}}
handleChangedFile={this.handleChangedThumbnail}
onValidationFailed={this.handleThumbnailValidationFailed}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
isReadyForFormSubmission={fileOptional}
keyRoutine={{
url: `${AppConstants.serverUrl}/s3/key/`,
fileClass: 'thumbnail'

7
js/components/ascribe_settings/contract_settings_update_button.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import { atLeastOneCreatedBlobFile } from 'react-utility-belt/es6/uploader/utils/file_validation_utils';
import ContractListActions from '../../actions/contract_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
@ -13,7 +15,6 @@ import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_butto
import AppConstants from '../../constants/application_constants';
import { ValidationTypes } from '../../constants/uploader_constants';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { makeCsrfHeader } from '../../utils/csrf';
import { getLangText } from '../../utils/lang';
import { resolveUrl } from '../../utils/url_resolver';
@ -60,7 +61,7 @@ let ContractSettingsUpdateButton = React.createClass({
return (
<ReactS3FineUploader
ref='fineuploader'
fileInputElement={UploadButton({ showLabel: false })}
fileInputElement={UploadButton({ showFileLabel: false })}
keyRoutine={{
url: `${AppConstants.serverUrl}/s3/key/`,
fileClass: 'contract'
@ -88,7 +89,7 @@ let ContractSettingsUpdateButton = React.createClass({
singular: getLangText('UPDATE'),
plural: getLangText('UPDATE')
}}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isReadyForFormSubmission={atLeastOneCreatedBlobFile}
submitFile={this.submitFile} />
);
}

104
js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
View File

@ -1,104 +0,0 @@
'use strict';
// FIXME: remove once using react-components
import fineUploader from 'exports?qq!./vendor/s3.fine-uploader';
import MimeTypes from '../../constants/mime_types';
// Re-export qq.status from FineUploader with an additional online
// state that we use to keep track of files from S3.
export const FileStatus = Object.assign({}, fineUploader.status, {
ONLINE: 'online'
});
export const formSubmissionValidation = {
/**
* Returns a boolean if there has been at least one file uploaded
* successfully without it being deleted or canceled.
* @param {array of files} files provided by react fine uploader
* @return {boolean}
*/
atLeastOneUploadedFile(files) {
files = files.filter((file) => {
return file.status !== FileStatus.DELETED &&
file.status !== FileStatus.CANCELED &&
file.status != FileStatus.UPLOADED_FAILED
});
if (files.length && files[0].status === FileStatus.UPLOAD_SUCCESSFUL) {
return true;
} else {
return false;
}
},
/**
* File submission for the form is optional, but if the user decides to submit a file
* the form is not ready until there are no more files currently uploading.
* @param {array of files} files files provided by react fine uploader
* @return {boolean} [description]
*/
fileOptional(files) {
const uploadingFiles = files.filter((file) => file.status === FileStatus.SUBMITTING);
return uploadingFiles.length === 0;
}
};
/**
* Filter function for filtering all deleted, canceled, and failed files
* @param {object} file A file from filesToUpload that has status as a prop.
* @return {boolean}
*/
export function displayValidFilesFilter(file) {
return file.status !== FileStatus.DELETED &&
file.status !== FileStatus.CANCELED &&
file.status !== FileStatus.UPLOAD_FAILED;
}
/**
* Filter function for filtering all files except for deleted, canceled, and failed files
* @param {object} file A file from filesToUpload that has status as a prop.
* @return {boolean}
*/
export function displayRemovedFilesFilter(file) {
return file.status === FileStatus.DELETED ||
file.status === FileStatus.CANCELED ||
file.status === FileStatus.UPLOAD_FAILED;
}
/**
* Filter function for which files to integrate in the progress process
* @param {object} file A file from filesToUpload, that has a status as a prop.
* @return {boolean}
*/
export function displayValidProgressFilesFilter(file) {
return file.status !== FileStatus.DELETED &&
file.status !== FileStatus.CANCELED &&
file.status !== FileStatus.UPLOAD_FAILED &&
file.status !== FileStatus.ONLINE;
}
/**
* Fineuploader allows to specify the file extensions that are allowed to upload.
* For our self defined input, we can reuse those declarations to restrict which files
* the user can pick from his hard drive.
*
* Takes an array of file extensions (['pdf', 'png', ...]) and transforms them into a string
* that can be passed into an html5 input via its 'accept' prop.
* @param {array} allowedExtensions Array of strings without a dot prefixed
* @return {string} Joined string (comma-separated) of the passed-in array
*/
export function transformAllowedExtensionsToInputAcceptProp(allowedExtensions) {
// Get the mime type of the extension if it's defined or add a dot in front of the extension
// This is important for Safari as it doesn't understand just the extension.
const prefixedAllowedExtensions = allowedExtensions.map((ext) => {
return MimeTypes[ext] || ('.' + ext);
});
// generate a comma separated list to add them to the DOM element
// See: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file
return prefixedAllowedExtensions.join(', ');
}

5
js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import { fileOptional } from 'react-utility-belt/es6/uploader/utils/file_validation_utils';
import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property';
@ -15,7 +17,6 @@ import GlobalNotificationActions from '../../../../../../actions/global_notifica
import AscribeSpinner from '../../../../../ascribe_spinner';
import { getLangText } from '../../../../../../utils/lang';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
import { formatText } from '../../../../../../utils/text';
import { resolveUrl } from '../../../../../../utils/url_resolver';
@ -191,7 +192,7 @@ let CylandAdditionalDataForm = React.createClass({
label={getLangText('Additional files (e.g. still images, pdf)')}
submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
isReadyForFormSubmission={fileOptional}
pieceId={piece.id}
otherData={piece.other_data}
multiple={true} />

5
js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import { atLeastOneCreatedBlobFile } from 'react-utility-belt/es6/uploader/utils/file_validation_utils';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
@ -15,7 +17,6 @@ import AscribeSpinner from '../../../../../ascribe_spinner';
import { ValidationParts, ValidationTypes } from '../../../../../../constants/uploader_constants';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
import { getLangText } from '../../../../../../utils/lang';
import { formatText } from '../../../../../../utils/text';
import { resolveUrl } from '../../../../../../utils/url_resolver';
@ -168,7 +169,7 @@ let MarketAdditionalDataForm = React.createClass({
<FurtherDetailsFileuploader
areAssetsDownloadable={!!isInline}
editable={editable}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isReadyForFormSubmission={atLeastOneCreatedBlobFile}
label={getLangText('Marketplace Thumbnail Image')}
otherData={otherData}
pieceId={pieceId}