Use react-utility-belt's uploader utils

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} />
                     </Form>

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} />
                 </Property>
                 <Property

js/components/ascribe_forms/form_register_piece.js

@@ -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 &&
+        if (digitalWorkFile && removedFilesFilter(digitalWorkFile)) {
-            (digitalWorkFile.status === FileStatus.DELETED || digitalWorkFile.status === FileStatus.CANCELED)) {
             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
+            // Only keep the thumbnail in the display if it's still valid
-            thumbnailFile.status !== FileStatus.DELETED ? thumbnailFile.url : null
+            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'

js/components/ascribe_settings/contract_settings_update_button.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';
@@ -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} />
         );
     }

js/components/ascribe_uploader/react_s3_fine_uploader_utils.js

@@ -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(', ');
-}

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} />

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({
                     <FurtherDetailsFileuploader
                         areAssetsDownloadable={!!isInline}
                         editable={editable}
-                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        isReadyForFormSubmission={atLeastOneCreatedBlobFile}
                         label={getLangText('Marketplace Thumbnail Image')}
                         otherData={otherData}
                         pieceId={pieceId}