Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Issues with JavaScript libraries and Meteor

I've just recently started using Meteor.

I can't seem to wrap my head around how to properly load and use 3rd party JavaScript libraries.

I am trying to implement a file upload form with the help of some 3rd parties. I want something like DropzoneJS or jQuery Multiple File Upload to handle file selection, while Ink File Picker stores the files in the cloud.

The problem is that the libraries don't react when I try to use them. I can see in the browser that the library gets loaded, and the console is not showing any errors.

Example with DropzoneJS:

JS:

Template.frontpage.rendered = function () {
  $('#dropzone').dropzone({ url: '/file/post' });
}

HTML in the frontpage template:

<form id="dropzone"></form>

This results when inspecting the page:

<form id="dropzone" class="MultiFile-intercepted dz-clickable"></form>

Something is happening, but the form is not being visually rendered at all.

I place the libs in the /client/libs directory. As some have suggested, I've also tried placing them in /client/compatibility.

I have also tried the Dropzonejs meteorite package with no difference.

What am I doing wrong? How can I make libraries like these function properly in Meteor?

Note: This question is sponsored by CodersClan and has been copied from Meteor-Talk Google group. If you answer this question, please update the original post with a link to this page.

User Gravatar

CodersClan

Posted Oct 24 2013 15:17 UTC

$25


  • meteor
  • 1182 Views

2 Replies


Edit: devonbarrett seems to have removed the DO NOT USE from the readme since earlier today. If you are still having issue you should post an issue.

Kjetil,

I expect your issue has to do with the current way Meteor renders templates. While not actually true, meteor does not support updates to the DOM via anything other then handlebars. This will be fixed by early next year if not before then. See Meteor.UI for details on how things will change.

Also you should know that Dropzonejs package does not work just yet, see the DO NO USE at the top of the readme. I was talking with the person who is making that package, via IRC #meteor, and ze is trying to make it work with both current meteor and with the new rendering engine (Meteor.ui).

You have a few options:

  1. Wait for Dropzonejs to be usable. I am in line with you :)

  2. Use the new template engine at the risk of bugs.

  3. use something other then Dropzonejs, for example impicker. Note that I have not tried it.

Finally if you are new to meteor you really should checkout EventedMind. That site is full of very useful videos that can help you get an idea of how meteor works and the options you have when working with it. There is also a few videos on file upload.

User Gravatar

Conner

Posted Oct 24 2013 17:33 UTC

I didnt try DropzoneJS with meteor but i think you should try using meteor constant regions.

Constant regions allow non-Meteor content to be embedded in a Meteor template. Many third-party widgets create and manage their own DOM nodes programmatically. Typically, you put an empty element in your template, which the widget or library will then populate with children.

User Gravatar

pahans

Posted Oct 25 2013 8:19 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions