Uppy: Invalid target option given to Dashboard

Created on 5 Sep 2018 · 15Comments · Source: transloadit/uppy

I'm trying to make a really simple setup and keep getting Uncaught Error: Invalid target option given to Dashboard. I'm not sure why as all the options seem to be valid. It doesn't create the dashboard so I can't actually open the menu.

const Uppy = require("@uppy/core");
const Dashboard = require("@uppy/dashboard");
const Uploader = require("@uppy/xhr-upload");

const uppy = Uppy({
    debug: true,
    autoProceed: false,
    restrictions: {
        maxFileSize: 1000000,
        maxNumberOfFiles: 1,
        minNumberOfFiles: 1
    }
})
.use(Dashboard, {
    trigger: '#fileUpload'
})
.use(Uploader, {
    endpoint: "/File/Upload",
    method: "POST",
    formData: true
});

Source

CrispyBacon1999

Most helpful comment

@kvz @arturi it works fine.
Thanks

atifaziz2 on 17 May 2019

👍2

All 15 comments

Since there's another post with the same issue that wasn't really resolved, just inactive, I'm using browserify for the bundling.

CrispyBacon1999 on 5 Sep 2018

Hi! Could you please make sure you are placing the <script> tag after all the main HTML, at the bottom of the page, before the closing </body>. Getting the same error if I place <sctipt> it in the <head>.

arturi on 5 Sep 2018

Still getting the same issue after moving to the end

CrispyBacon1999 on 5 Sep 2018

Added a target option to a div and it seemed to do the trick.

CrispyBacon1999 on 5 Sep 2018

.use(Dashboard, {
  trigger: '#pick-files'
})

works for me, since body is the default target for Dashboard Modal.

Works with this HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button type="button" id="pick-files">Pick Files</button>

    <link href="uppy.min.css" rel="stylesheet">
    <script src="bundle.js"></script>
  </body>
</html>

arturi on 5 Sep 2018

I was doing it with ASP.NET MVC, where things are split into several partial html files, so there were some issues addressing the body specifically. I created a div with an id for the target and targeted that and that worked.

CrispyBacon1999 on 5 Sep 2018

👍1

@arturi i am getting the same error, while i have put script tag at the bottom of the page before tag.

This is how i am doing.

dashboardError

atifaziz2 on 17 May 2019

Do you have an HTML element with id="pick-files" somewhere before you execute this javascript?

kvz on 17 May 2019

Do you have an HTML element with id="pick-files" somewhere before you execute this javascript?

@kvz No, i have only this HTML

atifaziz2 on 17 May 2019

Yeah, that’s the problem, you need to add something like:

<div id="pick-files"></div>

<script>...</script>
...

before you initialize Uppy. See this Codepen for a live example: https://codepen.io/uppy/pen/mKrGGr

arturi on 17 May 2019

Yeah, that’s the problem, you need to add something like:
<div id="pick-files">

<script>...</script>
...
before you initialize Uppy. See this Codepen for a live example: https://codepen.io/uppy/pen/mKrGGr

@arturi Thanks for response. let me check

atifaziz2 on 17 May 2019

Forgot the closing </div>, it should be: <div id="pick-files"></div>

arturi on 17 May 2019

👍1

@kvz @arturi it works fine.
Thanks

atifaziz2 on 17 May 2019

👍2

Do you have an HTML element with id="pick-files" somewhere before you execute this javascript?

Yes this is the cause of the problem.

abhilashak on 15 Sep 2019

constructor (props) {
      super(props)   
      this.uppy = Uppy({
        id: 'Dashboard',       
        inline: false,
        width: 750,
        height: 550,        
        restrictions: { maxNumberOfFiles: this.props.maxImage },
        autoProceed: false,
      })
      .use(Informer, {
        target: '#uppyInformer'
      }) 
    }

render () {
return(<div id="uppyCont"><DashboardModal uppy={this.uppy} closeModalOnClickOutside open={this.props.modalOpen} onRequestClose={this.props.handleClose}><div id="uppyInformer"  style={{height:30, width:30}}>Uploaded 1 of 30</div></DashboardModal>        
     </div>   
         </div>

    })

Using something like this in a ReactJS project. I get the error:

Invalid target option given to Informer.If you meant to target an HTML element, please make sure that the element exists. Check that the