hello guys, I need some help, I’m trying to figure out how to check every open of the input the files there by. the restrictions prop, but the main problem is that I’m only getting something with some conditional by the onBeforeFileAdded using the
this.uppy.setOptions({
meta: { type: 'avatar' },
allowMultipleUploads: false,
restrictions: {
maxTotalFileSize: 1024 * 1024 * 1024, // 1gb
maxFileSize: 10 * 1024 * 1024, // 10mb
minFileSize: 3 * 1024, // 3kb
allowedFileTypes: allowedFileTypes,
},
});
Then just when I drop the files I get the message about the allowedFileTypes there is another way to check when open the input?
here my component:
class Component extends React.Component {
constructor(props) {
super(props);
this.onComplete = this.onComplete.bind(this);
this.onCancel = this.onCancel.bind(this);
this.isAbortCurrent = false;
this.state = {
restrictionsImages: this.props.imageRestriction,
};
const { id, uppyOptions = {}, tusOptions = {}, isEdit, onEditStart } = props;
if (!id) {
throw new Error('An id is required.');
}
const allowedFileTypes = this.state.restrictionsImages
? supportedImageTypes
: allSupportedTypes;
const { ...otherUppyOptions } = uppyOptions;
this.uppy = new Uppy({
id,
meta: { type: 'avatar' },
allowMultipleUploads: false,
autoProceed: !props.isEdit,
onBeforeFileAdded: (currentFile) => {
this.uppy.setOptions({
meta: { type: 'avatar' },
allowMultipleUploads: false,
restrictions: {
maxTotalFileSize: 1024 * 1024 * 1024, // 1gb
maxFileSize: 10 * 1024 * 1024, // 10mb
minFileSize: 3 * 1024, // 3kb
allowedFileTypes: allowedFileTypes,
},
});
if (!allowedFileTypes.includes(currentFile.type)) {
this.uppy.info(
`${currentFile.type} not supported, only ${allowedFileTypes} supported`,
'error',
4000,
);
this.isAbortCurrent = true;
return false;
}
this.isAbortCurrent = false;
},
onBeforeUpload: (files) => {
return Object.keys(files).length;
},
...otherUppyOptions,
});
if (isEdit) {
this.uppy = this.uppy.use(ImageEditor, {
restrictions: {
allowedFileTypes,
maxTotalFileSize: 1024 * 1024 * 1024, // 1gb
maxFileSize: 10 * 1024 * 1024, // 10mb
minFileSize: 3 * 1024, // 3kb
allowedFileTypes: this.props.imageRestriction
? supportedImageTypes
: allSupportedTypes,
},
quality: 0.8,
cropperOptions: {
viewMode: 1,
aspectRatio: 1,
dragMode: 'move',
toggleDragModeOnDblclick: false,
restore: false,
guides: true,
movable: true,
center: true,
cropBoxResizable: false,
cropBoxMovable: false,
responsive: true,
autoCrop: true,
},
actions: {
revert: false,
cropWidescreen: false,
cropWidescreenVertical: false,
cropSquare: false,
},
});
}
this.uppy = this.uppy
.use(Tus, {
endpoint: storage.upload,
retryDelays: process.env.NODE_ENV === 'development' ? null : [0, 1000, 3000, 5000],
storeFingerprintForResuming: process.env.NODE_ENV !== 'development',
// headers: {
// authorization: process.browser && get(getUserData(), 'token'),
// },
withCredentials: false,
})
.on('complete', this.onComplete)
.on('upload-error', (file, error, response) => {
this.uppy.reset();
reportError(error);
})
.on('error', (file, error, response) => {
this.uppy.reset();
reportError(error);
})
.on('file-editor:start', (file) => {
onEditStart(file?.data);
})
.on('file-editor:complete', (updatedFile) => {
this.uppy.upload();
});
}
onComplete(result) {
this.props.onComplete(
map(result.successful, (file) => {
const parts = file.uploadURL.split('/');
const name = parts[parts.length - 1];
return { preview: file.data, name, type: types.IMAGE };
}),
);
this.uppy.reset();
}
componentDidUpdate(prevProps) {
// automatic upload of preFile (if passed as prop)
if (prevProps.imageRestriction !== this.props.imageRestriction) {
this.setState({ restrictionsImages: this.props.imageRestriction });
}
if (this.props.preFile) {
// let the model handle error in UI, otherwise it will throw unhandled runtime error
setTimeout(() => {
try {
this.uppy.addFile({
name: this.props.preFile.name,
type: this.props.preFile.type,
data: this.props.preFile,
});
} catch (e) {
this.uppy.reset();
}
}, 500);
}
}
UNSAFE_componentWillUnmount() {
this.uppy.close();
}
//Using concept of event bubbling
onCancel(e) {
if (e?.target?.classList?.contains('uppy-DashboardContent-back')) {
this.uppy.cancelAll();
}
}
render() {
const { isEdit } = this.props;
const noteText = this.props.imageRestriction ? 'JPEG and WEBP' : 'All types of images';
console.log('this.props.imageRestriction ', this.props.imageRestriction);
return (
<>
<Head>
<link rel="stylesheet" type="text/css" href={asset('/css/uppy/core.css')} />
<link
rel="stylesheet"
type="text/css"
href={asset('/css/uppy/dashboard.css')}
/>
<link
rel="stylesheet"
type="text/css"
href={asset('/css/uppy/image-editor.css')}
/>
{isEdit && (
<style>
{`.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {background:${PRIMARY_COLOR};}
.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover {
background: ${SECONDARY_COLOR};
}
.uppy-c-btn-primary {
background:${PRIMARY_COLOR};
}
.uppy-c-btn-primary:hover {
background: ${SECONDARY_COLOR};
}
`}
</style>
)}
</Head>
<DashboardModal
uppy={this.uppy}
onClick={this.onCancel}
autoOpenFileEditor
showLinkToFileUploadResult={false}
showProgressDetails={true}
proudlyDisplayPoweredByUppy={false}
plugins={['ImageEditor']}
hideUploadButton
metaFields={[{ id: 'name', name: 'Name', placeholder: 'File name' }]}
note={`We accept only images. Supported formats: ${noteText}`}
{...this.props}
/>
</>
);
}
}
Component.displayName = 'UploaderModalComponent';
export default Component;
Obs: I have on the uploadComponent a props when I open the modal and it’s coming right