From 16a7e32840a5eb6a4f6c10d0254ce996c4a0203f Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Fri, 8 Jul 2016 16:15:33 +0200 Subject: [PATCH] Use react-utility-belt's uploader utils --- .../ascribe_detail/further_details.js | 6 +- .../ascribe_forms/form_create_contract.js | 5 +- .../ascribe_forms/form_register_piece.js | 17 ++- .../contract_settings_update_button.js | 7 +- .../react_s3_fine_uploader_utils.js | 104 ------------------ .../cyland_additional_data_form.js | 5 +- .../market_additional_data_form.js | 5 +- 7 files changed, 24 insertions(+), 125 deletions(-) delete mode 100644 js/components/ascribe_uploader/react_s3_fine_uploader_utils.js diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js index e073f9df..475d94a2 100644 --- a/js/components/ascribe_detail/further_details.js +++ b/js/components/ascribe_detail/further_details.js @@ -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} /> diff --git a/js/components/ascribe_forms/form_create_contract.js b/js/components/ascribe_forms/form_create_contract.js index 8aeea8f9..16618fce 100644 --- a/js/components/ascribe_forms/form_create_contract.js +++ b/js/components/ascribe_forms/form_create_contract.js @@ -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} /> ); } diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js deleted file mode 100644 index 3b9b94a9..00000000 --- a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js +++ /dev/null @@ -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(', '); -} diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js index 49830570..af54343e 100644 --- a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js +++ b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js @@ -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} /> diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js index 1b2e74e5..8604c1b5 100644 --- a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js +++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js @@ -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({