<p>Recently I started working on an app based on Meteor platform. There is one particular feature in the app which lets users upload images and my search for a viable solution started with this. There are many Meteor packages like slingshot, Collection FS, S3 uploader to upload files to Amazon S3. I decided to go with <a href="https://github.com/CulturalMe/meteor-slingshot">slingshot</a>, as this package uploads files directly from the browser without using the Meteor app&#39;s server for resource consuming file transfers. Plus it has got support for other cloud services like Google Cloud, Rackspace, etc. In this tutorial I&#39;d be happy to share whatever I learnt along the way. </p>
<h2 id="what-are-we-learning-">What are we learning?</h2>
<p>This stand alone app will let users sign in to the app, select, upload and display the latest image uploaded by the user. </p>
<p>Here is what we&#39;re going to learn:</p>
<ul>
<li>creating and setting up Amazon S3 account </li>
<li>creating Meteor projects</li>
<li>templates</li>
<li>upload and progress </li>
<li>events</li>
<li>helpers</li>
<li>displaying the newest image</li>
<li>server configuration for S3</li>
</ul>
<h3 id="amazon-s3-setup">Amazon S3 Setup</h3>
<p>Before touching any code, let&#39;s get done with the S3 account configuration.
Head over to https://aws.amazon.com/s3/ and click on &quot;Try Amazon S3 for Free&quot;. Just follow the instructions given on the screen to complete the verification and registration process.</p>
<h4 id="s3-bucket">S3 Bucket</h4>
<p>Once you&#39;re inside AWS Management Console, click on S3. </p>
<p><img src="https://res.cloudinary.com/hashnode/image/upload/v1453131551/zmmzxtvvlgilwsp9ev89.jpg" alt="Amazon S3"></p>
<p>The next step for you is to create a <code>bucket</code> and select a region that&#39;s nearest to most of your target users.
<img src="https://res.cloudinary.com/hashnode/image/upload/v1453131627/jgd4xvo1rmyem41jv8o5.png" alt="Amazon S3 Bucket"></p>
<h4 id="cors-policy">CORS Policy</h4>
<p>S3 uses <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a> policy to primarily control different types of access to the <code>bucket</code> made from other domains.</p>
<p>Now click on the <code>bucket</code> to open the <code>bucket</code> specific page.  Click on the <code>Properties</code> tab present at the top-right. Finally click on the <code>Edit CORS Configuration</code>  and paste the following (as per slingshot&#39;s official documentaion):</p>
<pre><code>    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;CORSConfiguration xmlns=&quot;http://s3.amazonaws.com/doc/2006-03-01/&quot;&gt;
    &lt;CORSRule&gt;
        &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
        &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
        &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
        &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
        &lt;AllowedMethod&gt;HEAD&lt;/AllowedMethod&gt;
        &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
        &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
    &lt;/CORSRule&gt;
&lt;/CORSConfiguration&gt;
</code></pre><p>Basically we&#39;saying that PUT, POST, GET, and HEAD requests are allowed on this bucket from any domain and any HTTP header can be included.</p>
<h4 id="access-keys">Access Keys</h4>
<p>We will be using access keys to authenticate the requests sent to the bucket. Now, click on your name present on the top navigation bar and click on the <code>Security Credentials</code> link present in the resulting drop down. Toggle the <code>Access Keys (Access Key ID and Secret Access Key)</code> and click on <code>Create New Access Key</code>. Download the key file and we&#39;re done with all the S3 configuration.</p>
<blockquote>
<p><strong>Note</strong>
This key file has highly sensitive information. So, don&#39;t disclose the content to anyone and keep in mind that it can be downloaded only once.</p>
</blockquote>
<h3 id="meteor-project">Meteor project</h3>
<p>Exciting part has arrived! Now let&#39;s get down to code our way to create the image uploader. Fire up your shell and assuming you have already installed <a href="Meteor.com">Meteor</a>,  write the following and hit enter: </p>
<pre><code>meteor create photoshot
</code></pre><p>Note that <code>photoshot</code> is the name of the sample app. It will create a folder named <code>photoshot</code> and three files -- photoshot.html, photoshot.css and photoshot.js.</p>
<p>Delete all of them and wipe the slate clean. For the sake of simplicity, we&#39;ll have the following folder structure:</p>
<p>+-- client</p>
<p>|---- photoshot.html</p>
<p>|---- photoshot.js</p>
<p>+-- server</p>
<p>|---- photoshot.js</p>
<blockquote>
<p><strong>Note</strong>
 As per Meteor convention, any code present inside a folder named <code>client</code>, will only run on the client. Similarly any code present inside a folder named as <code>server</code>, will only run on the server.  </p>
</blockquote>
<h3 id="templates">Templates</h3>
<p>Templates are used link application interface and the JavaScript code. The application logic can be used to reference and manipulate interface elements placed inside a template. They are placed inside <code>body</code> tag as per <a href="https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md">Spacebar</a> syntax. </p>
<p>To start off, open <code>photoshot.html</code> and place the following code:</p>
<pre><code>&lt;head&gt;
  &lt;title&gt;PhotoShot&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
   {{&gt; loginButtons}}

   {{&gt; imageUploader}}
&lt;/body&gt;
</code></pre><p>In this app we&#39;ll be using two templates:  <code>loginButtons</code> and <code>imageUploader</code>.  </p>
<p>Now create the template by placing the following code below the closing <code>body</code> tag:</p>
<pre><code>&lt;template name=&quot;imageUploader&quot;&gt;
&lt;/template&gt;
</code></pre><blockquote>
<p><strong>Note</strong> The <code>loginButtons</code> template is already included in the <code>accounts-ui</code> meteor package.</p>
</blockquote>
<h3 id="image-upload-and-progress">Image upload and progress</h3>
<p>Inside the newly created <code>imageUploader</code> template place the following code:</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;col-md-6 col-md-offset-3&quot;&gt;
   &lt;h1&gt;PhotoShot&lt;/h1&gt;
   &lt;span style=&quot;font-size:15px; margin-left:10px;&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;selectFile&quot;&gt;Select&lt;/label&gt;
      &lt;input type=&quot;file&quot; class=&quot;uploadFile&quot; id=&quot;uploadFile&quot;&gt;
      &lt;p class=&quot;help-block&quot;&gt;Upload image here.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-6&quot;&gt;
        &lt;div class=&quot;progress&quot;&gt;
          &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;{{progress}}&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: {{progress}}%;&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;{{progress}}% Complete&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/span&gt;
  &lt;/div&gt;

{{isUploading}}
</code></pre><p>There are three important things to notice here:</p>
<ol>
<li><p>Creation of field to browse and select file
<code>&lt;input type=&quot;file&quot; class=&quot;uploadFile&quot; id=&quot;uploadFile&quot;&gt;</code></p>
</li>
<li><p>Basic Bootstrap progress bar</p>
</li>
<li><p>Double braced <code>isUploading</code> tag for string replacement. We&#39;ll learn how the status of upload will be shown here in subsequent section.  </p>
</li>
</ol>
<p>Apart from this, as you can see we&#39;ve also added some styling and positioning elements.</p>
<h3 id="events">Events</h3>
<p>Now is the time to write some client side code. We’ll start with the code that gets triggered depending on various action taken by the user (example: click, mouseover, double-click, etc.). Open the photoshot.js file present inside the <code>client</code> folder and paste the code given below:</p>
<pre><code>var uploader = new ReactiveVar();
var imageDetails = new Mongo.Collection(&#39;images&#39;); 
var currentUserId = Meteor.userId();

       Template.imageUploader.events({&#39;change .uploadFile&#39;: function(event, template) {

             event.preventDefault();

             var upload = new Slingshot.Upload(&quot;myImageUploads&quot;);
             var timeStamp = Math.floor(Date.now());                 
         upload.send(document.getElementById(&#39;uploadFile&#39;).files[0], function (error, downloadUrl) {
             uploader.set();
             if (error) {
               console.error(&#39;Error uploading&#39;);
               alert (error);
             }
             else{
               console.log(&quot;Success!&quot;);
               console.log(&#39;uploaded file available here: &#39;+downloadUrl);
               imageDetails.insert({
                   imageurl: downloadUrl,
                   time: timeStamp,
                   uploadedBy: currentUserId
               });
             }
             });
             uploader.set(upload);
           }
       });
</code></pre><p>Give a close look to the first line <code>var uploader = new ReactiveVar();</code>. Here, we’re declaring a custom <code>reactive</code> object by making use of <code>reactivevar</code> meteor package.  This is one of most powerful features of Meteor. <code>Reactive</code> variables are used to keep tab on the value of the variable that changes over time and perform various actions depending on the change. In our case we&#39;ll use to track upload progress.</p>
<p>The next line is for referencing the <code>images</code> collection in the database and <code>currentUserId</code> stores the unique user id created by <code>accounts-password</code> Meteor package.</p>
<p>Next thing that we’re doing is triggering an event when <code>.uploadFile</code> attached with the following element changes:
<code>&lt;input type=&quot;file&quot; class=&quot;uploadFile&quot; id=&quot;uploadFile&quot;&gt;</code>. Then we’re defining a new object <code>upload</code> and assigning it to an instance of <code>Slingshot.Upload()</code> and passing the name of a “directive&quot;—<code>myImageUploads</code> which will be covered in server later on.</p>
<p>Then, we&#39;ll call our <code>upload</code> instance’s send method and pass the file retrieved from the file input element. At the same time a call is made to S3 in the background to upload the image. We&#39;ll cover the required configuration in server section. In the end our Reactivevar <code>uploader</code> is set by passing the <code>upload</code> instance.</p>
<p>Note that in case of successful upload we&#39;re inserting the uploaded image URL, timestamp and user id into the <code>images</code> collection.</p>
<h3 id="helpers">Helpers</h3>
<p>Helper functions are attached to templates and we can use them to execute code inside the templates. </p>
<pre><code>Template.imageUploader.helpers({

    isUploading: function () {
        return Boolean(uploader.get());
    },

    progress: function () {
    var upload = uploader.get();
    if (upload)
    return Math.round(upload.progress() * 100);
    },

    url: function () {

    return imageDetails.findOne({uploadedBy: currentUserId},{sort:{ time : -1 } });

    },

});
</code></pre><p>As you can see, here the helper functions are attached to <code>imageUploader</code> template.</p>
<p>The first function returns true/false depending on whether file is getting uploaded or not. If you open the photoshot.html file, you&#39;ll see that inside <code>imageUploader</code> template there is <code>{{isUploading}}</code>, which gets replaced with the value returned from <code>isUploading</code> helper function. Next function returns the upload progress percentage.</p>
<p>Last function is used to return the url of the last upladed image, by retrieving from the <code>images</code> collection. Here the time stamp and unique user id of the user stored earlier via <code>events</code> are coming into play.</p>
<h3 id="display-the-image">Display the image</h3>
<p>Go back to <code>photoshot.html</code> and add the following just before the closing <code>template</code> tag:</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;col-md-6 col-md-offset-3&quot;&gt;

    &lt;strong&gt;Uploaded image:&lt;/strong&gt;

    &lt;img src=&quot;{{url.imageurl}}&quot;/&gt; 

  &lt;/div&gt;    
&lt;/div&gt;
</code></pre><p>The <code>url</code> function needs to be referenced in the template here via <code>{{url}}</code>. But, we are only concerned with the URL of the image and that value can be retrieved via dot notation. So it becomes <code>{{url.imageurl}}</code>. </p>
<h3 id="server-configuration-for-slingshot">Server configuration for slingshot</h3>
<p>Open the <code>photoshot.js</code> file present inside the <code>server</code> folder and add the following code:</p>
<pre><code>var imageDetails = new Mongo.Collection(&#39;images&#39;);

Slingshot.fileRestrictions(&quot;myImageUploads&quot;, {
  allowedFileTypes: [&quot;image/png&quot;, &quot;image/jpeg&quot;, &quot;image/gif&quot;],
  maxSize: 2 * 1024 * 1024,
});

Slingshot.createDirective(&quot;myImageUploads&quot;, Slingshot.S3Storage, {
  AWSAccessKeyId: &quot;AWS_ACCESS_KEY_ID&quot;,
  AWSSecretAccessKey: &quot;AWS_SECRET_ACCESS_KEY&quot;,
  bucket: &quot;BUCKET_NAME&quot;,
  acl: &quot;public-read&quot;,
  region: &quot;S3_REGION&quot;,

  authorize: function () {
    if (!this.userId) {
      var message = &quot;Please login before posting images&quot;;
      throw new Meteor.Error(&quot;Login Required&quot;, message);
    }

    return true;
  },

  key: function (file) {
    var currentUserId = Meteor.user().emails[0].address;
    return currentUserId + &quot;/&quot; + file.name;
  }

});
</code></pre><p>Have a look at following methods: <code>Slingshot.fileRestrictions()</code> and <code>Slingshot.createDirective()</code>.The first method is quite straight forward. Here, we&#39;re configuring two things: an array of allowed file types and a maximum 2 MB file size restriction.</p>
<p>Next thing that we need to do is use the upload directive <code>myImageUploads</code> mentioned in <code>photoshot.js</code> in client side.
Now we inform Slongshot that we&#39;d like to upload files to S3 by passing <code>Slingshot.S3Storage</code>. Here we&#39;re passing the keyid and access key generated earlier while setting up S3 configuration in AWS console. Apart from that, the bucket name, <a href="docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html">ACL</a> (access control list) and region are also passed.</p>
<p>The next method is used to check whether the user is logged in or not. If not, a message is shown that asks the user to log in before uploading image.</p>
<p>In the end we&#39;re calling a method <code>key</code> that takes the file argument passed from the client. This method is used to return a valid file storage structure to exactly define where the image will reside in the bucket. In our case a folder named as the email address of the uploader will be created and the file will be uploaded to that directory.</p>
<h2 id="conclusion">Conclusion</h2>
<p>In this tutorial we learnt configuration and CORS policy required for Amazon S3. Used Meteor package slingshot to upload image to S3 bucket, stored the image url in MongoDB database and in the meanwhile also got an idea of how Meteor templates, helpers and events work. This example is a vanilla implementation for uploading images, so feel free modify and improve it by adding new functionalities.  </p>
<p>You can download the working sample from <a href="https://github.com/Preetish/Photoshot">GitHub</a>. </p>


Recently I started working on an app based on Meteor platform. There is one particular feature in the app which lets users upload images and my search for a viable solution started with this. There are many Meteor packages like slingshot, Collection FS, S3 uploader to upload files to Amazon S3. I decided to go with [slingshot](https://github.com/CulturalMe/meteor-slingshot), as this package uploads files directly from the browser without using the Meteor app's server for resource consuming file transfers. Plus it has got support for other cloud services like Google Cloud, Rackspace, etc. In this tutorial I'd be happy to share whatever I learnt along the way. 

## What are we learning?

This stand alone app will let users sign in to the app, select, upload and display the latest image uploaded by the user. 

Here is what we're going to learn:

 - creating and setting up Amazon S3 account 
 - creating Meteor projects
 - templates
 - upload and progress 
 - events
 - helpers
 - displaying the newest image
 - server configuration for S3
 
### Amazon S3 Setup

Before touching any code, let's get done with the S3 account configuration.
Head over to https://aws.amazon.com/s3/ and click on "Try Amazon S3 for Free". Just follow the instructions given on the screen to complete the verification and registration process.

#### S3 Bucket
Once you're inside AWS Management Console, click on S3. 

![Amazon S3](https://res.cloudinary.com/hashnode/image/upload/v1453131551/zmmzxtvvlgilwsp9ev89.jpg)

The next step for you is to create a `bucket` and select a region that's nearest to most of your target users.
![Amazon S3 Bucket](https://res.cloudinary.com/hashnode/image/upload/v1453131627/jgd4xvo1rmyem41jv8o5.png)

#### CORS Policy
S3 uses [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) policy to primarily control different types of access to the `bucket` made from other domains.

Now click on the `bucket` to open the `bucket` specific page.  Click on the `Properties` tab present at the top-right. Finally click on the `Edit CORS Configuration`  and paste the following (as per slingshot's official documentaion):

        <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>*</AllowedOrigin>
            <AllowedMethod>PUT</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>HEAD</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
    </CORSConfiguration>
    
Basically we'saying that PUT, POST, GET, and HEAD requests are allowed on this bucket from any domain and any HTTP header can be included.

#### Access Keys

We will be using access keys to authenticate the requests sent to the bucket. Now, click on your name present on the top navigation bar and click on the `Security Credentials` link present in the resulting drop down. Toggle the `Access Keys (Access Key ID and Secret Access Key)` and click on `Create New Access Key`. Download the key file and we're done with all the S3 configuration.

> **Note**
This key file has highly sensitive information. So, don't disclose the content to anyone and keep in mind that it can be downloaded only once.

### Meteor project

Exciting part has arrived! Now let's get down to code our way to create the image uploader. Fire up your shell and assuming you have already installed [Meteor](Meteor.com),  write the following and hit enter: 

    meteor create photoshot

Note that `photoshot` is the name of the sample app. It will create a folder named `photoshot` and three files -- photoshot.html, photoshot.css and photoshot.js.
 
Delete all of them and wipe the slate clean. For the sake of simplicity, we'll have the following folder structure:

+-- client

|---- photoshot.html

|---- photoshot.js

+-- server

|---- photoshot.js

> **Note**
 As per Meteor convention, any code present inside a folder named `client`, will only run on the client. Similarly any code present inside a folder named as `server`, will only run on the server.  
	
### Templates

Templates are used link application interface and the JavaScript code. The application logic can be used to reference and manipulate interface elements placed inside a template. They are placed inside `body` tag as per [Spacebar](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md) syntax. 

To start off, open `photoshot.html` and place the following code:

    <head>
      <title>PhotoShot</title>
    </head>
    
    <body>
       {{> loginButtons}}
     
       {{> imageUploader}}
    </body>

In this app we'll be using two templates:  `loginButtons` and `imageUploader`.  

Now create the template by placing the following code below the closing `body` tag:

    <template name="imageUploader">
    </template>

>**Note** The `loginButtons` template is already included in the `accounts-ui` meteor package.

### Image upload and progress 

Inside the newly created `imageUploader` template place the following code:

    <div class="container">
      <div class="col-md-6 col-md-offset-3">
       <h1>PhotoShot</h1>
       <span style="font-size:15px; margin-left:10px;">
        <div class="form-group">
          <label for="selectFile">Select</label>
          <input type="file" class="uploadFile" id="uploadFile">
          <p class="help-block">Upload image here.</p>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress}}%;">
                <span class="sr-only">{{progress}}% Complete</span>
              </div>
            </div>
          </div>
        </div>
        </span>
      </div>
      
    {{isUploading}}

There are three important things to notice here:

 1. Creation of field to browse and select file
 `<input type="file" class="uploadFile" id="uploadFile">`
 
 2. Basic Bootstrap progress bar
 
 3. Double braced `isUploading` tag for string replacement. We'll learn how the status of upload will be shown here in subsequent section.  

Apart from this, as you can see we've also added some styling and positioning elements.

### Events

Now is the time to write some client side code. We’ll start with the code that gets triggered depending on various action taken by the user (example: click, mouseover, double-click, etc.). Open the photoshot.js file present inside the `client` folder and paste the code given below:

	var uploader = new ReactiveVar();
    var imageDetails = new Mongo.Collection('images'); 
    var currentUserId = Meteor.userId();
        
           Template.imageUploader.events({'change .uploadFile': function(event, template) {
           
                 event.preventDefault();
           
                 var upload = new Slingshot.Upload("myImageUploads");
                 var timeStamp = Math.floor(Date.now());                 
             upload.send(document.getElementById('uploadFile').files[0], function (error, downloadUrl) {
                 uploader.set();
                 if (error) {
	               console.error('Error uploading');
                   alert (error);
                 }
                 else{
                   console.log("Success!");
                   console.log('uploaded file available here: '+downloadUrl);
                   imageDetails.insert({
                       imageurl: downloadUrl,
                       time: timeStamp,
                       uploadedBy: currentUserId
                   });
                 }
                 });
                 uploader.set(upload);
               }
           });

Give a close look to the first line `var uploader = new ReactiveVar();`. Here, we’re declaring a custom `reactive` object by making use of `reactivevar` meteor package.  This is one of most powerful features of Meteor. `Reactive` variables are used to keep tab on the value of the variable that changes over time and perform various actions depending on the change. In our case we'll use to track upload progress.

The next line is for referencing the `images` collection in the database and `currentUserId` stores the unique user id created by `accounts-password` Meteor package.

Next thing that we’re doing is triggering an event when `.uploadFile` attached with the following element changes:
` <input type="file" class="uploadFile" id="uploadFile">`. Then we’re defining a new object `upload` and assigning it to an instance of `Slingshot.Upload()` and passing the name of a “directive"—`myImageUploads` which will be covered in server later on.

Then, we'll call our `upload` instance’s send method and pass the file retrieved from the file input element. At the same time a call is made to S3 in the background to upload the image. We'll cover the required configuration in server section. In the end our Reactivevar `uploader` is set by passing the `upload` instance.

Note that in case of successful upload we're inserting the uploaded image URL, timestamp and user id into the `images` collection.

### Helpers

Helper functions are attached to templates and we can use them to execute code inside the templates. 
    
    Template.imageUploader.helpers({
    
        isUploading: function () {
            return Boolean(uploader.get());
        },
    
        progress: function () {
        var upload = uploader.get();
        if (upload)
        return Math.round(upload.progress() * 100);
        },
    
        url: function () {
       
        return imageDetails.findOne({uploadedBy: currentUserId},{sort:{ time : -1 } });
        
        },
    
    });

As you can see, here the helper functions are attached to `imageUploader` template.

The first function returns true/false depending on whether file is getting uploaded or not. If you open the photoshot.html file, you'll see that inside `imageUploader` template there is `{{isUploading}}`, which gets replaced with the value returned from `isUploading` helper function. Next function returns the upload progress percentage.

Last function is used to return the url of the last upladed image, by retrieving from the `images` collection. Here the time stamp and unique user id of the user stored earlier via `events` are coming into play.

### Display the image

Go back to `photoshot.html` and add the following just before the closing `template` tag:

    <div class="container">
      <div class="col-md-6 col-md-offset-3">
      
        <strong>Uploaded image:</strong>
       
        <img src="{{url.imageurl}}"/> 
    
      </div>    
    </div>

The `url` function needs to be referenced in the template here via `{{url}}`. But, we are only concerned with the URL of the image and that value can be retrieved via dot notation. So it becomes `{{url.imageurl}}`. 

### Server configuration for slingshot

Open the `photoshot.js` file present inside the `server` folder and add the following code:

    var imageDetails = new Mongo.Collection('images');
    
    Slingshot.fileRestrictions("myImageUploads", {
      allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
      maxSize: 2 * 1024 * 1024,
    });
     
    Slingshot.createDirective("myImageUploads", Slingshot.S3Storage, {
      AWSAccessKeyId: "AWS_ACCESS_KEY_ID",
      AWSSecretAccessKey: "AWS_SECRET_ACCESS_KEY",
      bucket: "BUCKET_NAME",
      acl: "public-read",
      region: "S3_REGION",
    
      authorize: function () {
        if (!this.userId) {
          var message = "Please login before posting images";
          throw new Meteor.Error("Login Required", message);
        }
    
        return true;
      },
    
      key: function (file) {
        var currentUserId = Meteor.user().emails[0].address;
        return currentUserId + "/" + file.name;
      }
    
    });

Have a look at following methods: `Slingshot.fileRestrictions()` and `Slingshot.createDirective()`.The first method is quite straight forward. Here, we're configuring two things: an array of allowed file types and a maximum 2 MB file size restriction.

Next thing that we need to do is use the upload directive `myImageUploads` mentioned in `photoshot.js` in client side.
Now we inform Slongshot that we'd like to upload files to S3 by passing `Slingshot.S3Storage`. Here we're passing the keyid and access key generated earlier while setting up S3 configuration in AWS console. Apart from that, the bucket name, [ACL](docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html) (access control list) and region are also passed.

The next method is used to check whether the user is logged in or not. If not, a message is shown that asks the user to log in before uploading image.

In the end we're calling a method `key` that takes the file argument passed from the client. This method is used to return a valid file storage structure to exactly define where the image will reside in the bucket. In our case a folder named as the email address of the uploader will be created and the file will be uploaded to that directory.

## Conclusion

In this tutorial we learnt configuration and CORS policy required for Amazon S3. Used Meteor package slingshot to upload image to S3 bucket, stored the image url in MongoDB database and in the meanwhile also got an idea of how Meteor templates, helpers and events work. This example is a vanilla implementation for uploading images, so feel free modify and improve it by adding new functionalities.  

You can download the working sample from [GitHub](https://github.com/Preetish/Photoshot). 

Upload Files to Amazon S3 with Meteor Slingshot

Product

Explore

Company

Blogs

Partner with us

Support

Comparisons

Comparisons