Serverless File Upload for Meteor Web Apps
8 Minutes to Integrate

Meteor is a complete platform for building web and mobile apps in pure JavaScript. Integrating Uploadcare File Uploader, 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.

Brief Intro

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

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

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

Here are a couple of screen captures of our demo app, you’ll end up having something similar by the end of this guide,

Meteor Demo Screen Capture

Meteor Demo Screen Capture

Step 1. Get Uploadcare Account

You’ll need an account to continue and integrate the file uploading widget. So Sign Up if you haven’t done so yet.

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

Note, 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

Run the following to install the uploading widget 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 widget to appear,

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

Our Meteor library looks for such inputs and puts widgets 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 with the widget, it gets to our storage and CDN layers. Then, its <input> receives a CDN URL holding a unique file identifier, UUID.

Let’s bring 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 uploading widget comes with JavaScript API to further enhance the user experience of your web app.

Events would be a great example to add up 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 more about supported events.

Step 5. Widget Options

The file uploading widget 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 Uploadcare documentation where we cover the ways of setting the options as well as the complete widget options summary.

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

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

Note, changing any options when the widget 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.

In case you have any questions, feel free to post those around our community area.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.