Uppy plugin not updating the dom element when using setOptions

Uppy
1

I’m essentially just copy pasting this stackoverflow post I made. I recommend just reading that, since I had to remove some links to documentation due to the following restriction on this board:

Sorry, new users can only put 2 links in a post.

I have the following media uploader component, where I am simply trying to change the accepted file types of my uploader (using uppy):

import React, { useEffect, useRef } from 'react'
import PropTypes from 'prop-types'

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import { useUppy } from '@uppy/react'

const VIDEO_FILE_TYPES = [
  'video/avi',
  'video/mkv',
  'video/mov',
  'video/mp4',
  'video/webm',
  'video/wmv',
]

const IMAGE_FILE_TYPES = [
  'image/gif',
  'image/jpeg',
  'image/jpg',
  'image/png',
  'image/x-png',
]

const MEDIA_FILE_TYPES = {
  image: IMAGE_FILE_TYPES,
  video: VIDEO_FILE_TYPES,
}

const dragDropId = 'DragDrop1'

const MediaUploader = ({ mediaType }) => {
  const dragDropRef = useRef(null)

  const uppy = useUppy(() => (
    new Uppy({
      meta: { type: 'content' },
      restrictions: {
        allowedFileTypes: MEDIA_FILE_TYPES[mediaType],
        maxNumberOfFiles: 1
      },
      autoProceed: true,
    })
  ))

  useEffect(() => {
    uppy
      .use(DragDrop, {
        id: dragDropId,
        target: dragDropRef.current,
      })
  }, [])

  useEffect(() => {
    if (!uppy.getPlugin(dragDropId)) return

    uppy.getPlugin(dragDropId).setOptions({ 
      restrictions: { 
        allowedFileTypes: MEDIA_FILE_TYPES[mediaType] 
      } 
    })
    console.log(uppy.getPlugin(dragDropId).opts.restrictions.allowedFileTypes);
  }, [mediaType])

  return (
    <div ref={dragDropRef} id={dragDropId} />
  )
}

MediaUploader.propTypes = {
  mediaType: PropTypes.string,
}

MediaUploader.defaultProps = {
  mediaType: 'image'
}

export default MediaUploader

However, no matter what I do, the uploader only accepts images.

I have a button that switches the mediaType prop. It switches between image and video. To prove this is working properly, I provided a log statement in the useEffect hook when mediaType is changed. This is the output from that interaction:

enter image description here

So clearly the plugin that uppy is using is being updated, but the dom element is not.

I know it’s not some kind of weird mismatching with the id, since the useEffect hook should immediately return if it can’t find the uppy plugin by the id.

I’ve also tried updating uppy with the following, to no avail:

uppy.setOptions({ restrictions: { allowedFileTypes: MEDIA_FILE_TYPES[mediaType] } })

I’ve tried the above alongside the plugin update and standalone. I also tried updating the uppy instance and then simply updating the plugin with no args, assuming that the plugin might pull the options from the uppy instance.

I’m out of ideas…

2

Hi, the problem is incorrect mime types it seems. Take a look at the mime types defined here, they are different from what you define for video: uppy/mimeTypes.js at 795e81790306042970c94f91e063fb8841dbf806 · transloadit/uppy · GitHub