mirror of
https://github.com/ascribe/onion.git
synced 2025-01-03 10:25:08 +01:00
Use react-utility-belt's uploader utils
This commit is contained in:
parent
4515dffb48
commit
16a7e32840
js/components
ascribe_detail
ascribe_forms
ascribe_settings
ascribe_uploader
whitelabel/wallet/components
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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'
|
||||
|
@ -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} />
|
||||
);
|
||||
}
|
||||
|
@ -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(', ');
|
||||
}
|
@ -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} />
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user