Video Validation not working

Questions / Help
,
1

Hey , we are trying to use the form to upload both images and videos
We added validators but they fail to prevent uploading mp4 (test).

const maxSize = (maxSizeInBytes) => (fileInfo) => {
    if (fileInfo.size && fileInfo.size > maxSizeInBytes) {
      throw new Error('size');
    }
  };

  const allowedMimeTypes = (types) => (fileInfo) => {
    if (fileInfo.mimeType && !types.includes(fileInfo.mimeType)) {
      throw new Error('mimeType');
    }
  };



<Widget
                          tabs="file"
                          clearable={true}
                          crop="480x480"
                          inputAcceptTypes="image/*,video/mp4"
                          validators={[ maxSize(150 * 1024 * 1024), allowedMimeTypes(['image/jpeg', 'image/png',  'image/gif'])]}
                          onFileSelect={(file) => {
                            if (!file) {
                              formik.setFieldValue('imgUrl', '');
                              return;
                            }
                            if ('done' in file) {
                              file.done((fileInfo: { cdnUrl: any }) => {
                                formik.setFieldValue('imgUrl', fileInfo.cdnUrl);
                              });
                            }
                          }}
                          publicKey="23t65307c6fda2db4aae" // not actual key here
                        />


"@uploadcare/nextjs-loader": "^1.0.0",
    "@uploadcare/react-widget": "^2.3.0",
    "@uploadcare/upload-client": "^6.4.1",

what is the best way to check these details before uploading to server ?

2

Hello Albert. Arch here from Uploadcare.

I’m not familiar with the NextJS syntax so I can’t comment on this part - but I assume everything is good here.

inputAcceptTypes should be configured differently - you’ll need to add a list of video types that are allowed - i.e. video/mov, video/mkv and so on. Please note that this only affects the visibility in the file picker - Drag and Drop would be possible even for any file.

The main concept with validation is that it’s for backend only. In order to check the file it has to be uploaded. One possible option is to have an API call to remove the file if it was uploaded with the exception, another option would be to utilize the webhooks but the main concept here.

Let me know if you have any further questions.

Best regards.

3

Thanks a lot for clarification, I found a solution using validators which seems to be working fine
Can you please advise on video editing process? I saw that there are some features like cuting resizing, which are only with REST API , is there alternative to cut the uploaded video ? or callbacks so that we customize edit before it gets uploaded?

4

As of now you can edit only those video files that are uploaded already. We have video editing on-the-fly in development but no ETA for it at the moment.