How to Set Up File Upload for Meteor Apps

8 Minutes to Integrate

Meteor is an open-source platform for developing web and mobile apps in JavaScript. By integrating Uploadcare, you’ll get a responsive UI to receive image and file uploads right in your Meteor app with no hassle about file storage or delivery.

How Does Uploading Files, Images, and Docs to Meteor with Uploadcare Work?

Uploadcare is a complete File API that is used to build file handling on the web. In this guide, we’ll be using the following components of the platform:

  • File Uploader for image and file uploading.
  • Storage. Every uploaded file goes to Uploadcare storage.
  • Uploadcare CDN. Once uploaded, every file gets cached by our CDN layers.

We’ll show the basic Uploadcare file handling mechanics, integrate the File Uploader in your Meteor application, and provide you with hints on where to go from there. (It should take you only about 8 minutes.)

Below are a couple of screen captures of a demo app. You’ll have something similar by the end of this guide:

A file upload form that allows you to upload images to Meteor
A file upload form that allows you to upload images to Meteor
A JPEG image uploaded to Meteor
A JPEG image uploaded to Meteor

Step 1. Get an Uploadcare Account

You’ll need an account to continue and integrate the File Uploader to your Meteor app. So, Sign Up if you haven’t done so yet.

Head over to your dashboard and create a new project or go to an existing one. Then, navigate to the “API Keys” section and find the Public API Key.

Note that if you want to go beyond the “image uploader” use case and add non-image files to your project, you will have to provide your billing info.

Step 2. Install File Uploader to Meteor

Run the following to install the File Uploader as our official Meteor package:

meteor add uploadcare:uploadcare-widget

Specify the Public API Key you obtained in the previous step in settings.json:

{
  "public": {
    "uploadcare": {
      "publicKey": "YOUR_PUBLIC_KEY"
    }
  }
}

That’s it. Let’s get straight to the code now.

Step 3. Add Uploader to Client HTML

Once the uploader is installed, you add an <input> element with the specified uploadcare-uploader role to client/main.html where you want the file uploader to appear,

<input type="hidden" id="file-show" role="uploadcare-uploader" />

Our Meteor library looks for such inputs and puts file uploaders there.

You can now navigate to localhost:3000 via your browser and check out the live uploader. Just run meteor in your CLI to get the server running.

When you upload a file, it goes to our storage and CDN layers. Then, its <input> receives a CDN URL possessing a unique file identifier (UUID).

Let’s take this a step further and add the cdnUrl template variable to render that CDN URL:

<template name="show">
  <h2>Show UUID after upload</h2>
  <fieldset>
    <div>
      <label for="file-show">File:</label>
      <input type="hidden" id="file-show" role="uploadcare-uploader" />
    </div>
    <p>
      {{#if uuid}}
      <a href="{{cdnUrl}}">{{uuid}}</a>
      {{else}} No UUID found, upload a file. {{/if}}
    </p>
  </fieldset>
</template>

Step 4. Handling Events With JavaScript API

Our File Uploader comes with a JavaScript API to further enhance the user experience of your web app.

Events would be a great example of something to add to your app’s design. Here’s how you handle the onUploadComplete event with the JavaScript API of our uploader (a snippet from our demo app on GitHub):

import uploadcare from 'meteor/uploadcare:uploadcare-widget'

...

let widget = uploadcare.Widget('[role=uploadcare-uploader]')

widget.onUploadComplete(info => {
    // Handle the uploaded file info.
    this.uuid.set(info.uuid)
    this.cdnUrl.set(info.cdnUrl)
})

Please refer to the uploader’s JavaScript API reference to learn more about supported events.

Step 5. File Uploader Options

The File Uploader is highly customizable. Playing with our live file uploader configurator would be a great starting point. You can always share configurations with your team: every option gets added to the configurator’s URL query string. Here’s an example:

https://uploadcare.com/widget/configure/?effects=crop+enhance&imagesOnly=true&multiple=true

From there, you can check out the Uploadcare documentation where we cover the ways of setting the options as well as the complete file uploader options summary.

For example, this is how you locally (for a single file uploader instance) set the option allowing image-only uploads:

<input type="hidden" role="uploadcare-uploader" ... data-images-only />

Note that changing any options when the File Uploader is running won’t affect its behavior.

Conclusion

Yay! We just covered the basics of enabling your Meteor web app with serverless file uploads and delivering the uploaded assets via CDN. Consider checking out our uploader’s docs for further reading.

Visit the meteor-uploadcare-widget-demo repository on GitHub to look through the source code. If you have any questions, feel free to post them in our community area.