Fork me on GitHub

Angular2-Meteor - Socially

https://github.com/Urigo/meteor-angular2.0-socially
Note: The Socially 2 tutorial is no longer maintained. Instead, we have a new, better and comprehensive tutorial, integrated with our WhatsApp clone tutorial: WhatsApp clone tutorial with Ionic 2, Angular 2 and Meteor (we just moved all features and steps, and implemented them better!)
navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial

Files and UploadFS

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

In this step we are going to add the ability to upload images into our app, and also sorting and naming them.

Angular-Meteor can use Meteor UploadFS which is a suite of Meteor packages that together provide a complete file management solution including uploading, downloading, storage, synchronization, manipulation, and copying.

It supports several storage adapters for saving files to the local filesystem, GridFS and additional storage adapters can be created.

The process is very similar for handling any other MongoDB Collection!

So let's add image upload to our app!

We will start by adding UploadFS to our project, by running the following command:

$ meteor add jalik:ufs

Now, we will decide the storage adapter we want to use. In this example, we will use the GridFS as storage adapters, so we will add the adapter by running this command:

$ meteor add jalik:ufs-gridfs

Note: you can find more information about Stores and Storage Adapters on the UploadFS's GitHub repository.

So now we have the UploadFS support and the storage adapter installed - we still need to create a UploadFS object to handle our files. Note that you will need to define the collection as shared resource because you will need to use the collection in both client and server side.

Creating the Mongo Collection and UploadFS Store

Let's start by creating both/collections/images.collection.ts file, and define a Mongo Collection object called "Images". Since we want to be able to make thumbnails we have to create another Collection called "Thumbs".

Also we will use the stadard Mongo Collection API that allows us to defined auth-rules.

21.2 Create Images and Thumbs collections both/collections/images.collection.ts 
1
2
3
4
5
import { MongoObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';
 
export const Images = new MongoObservable.Collection('images');
export const Thumbs = new MongoObservable.Collection('thumbs');
Improve this code

Let's now create interfaces for both collections:

21.3 Define Image interface both/models/image.model.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export interface Image {
  _id?: string;
  complete: boolean;
  extension: string;
  name: string;
  progress: number;
  size: number;
  store: string;
  token: string;
  type: string;
  uploadedAt: Date;
  uploading: boolean;
  url: string;
  userId?: string;
}
Improve this code
21.4 Define Thumbs interface both/models/image.model.ts 
12
13
14
15
16
17
18
19
20
  uploading: boolean;
  url: string;
  userId?: string;
}
 
export interface Thumb extends Image  {
  originalStore?: string;
  originalId?: string;
}
Improve this code

And use them on Images and Thumbs collections:

21.5 Add interfaces to Mongo Collections both/collections/images.collection.ts 
1
2
3
4
5
6
import { MongoObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';
import { Thumb, Image } from "../models/image.model";
 
export const Images = new MongoObservable.Collection<Image>('images');
export const Thumbs = new MongoObservable.Collection<Thumb>('thumbs');
Improve this code

We have to create Stores for Images and Thumbs.

21.6 Create stores for Images and Thumbs both/collections/images.collection.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { MongoObservable } from 'meteor-rxjs';
import { Meteor } from 'meteor/meteor';
import { UploadFS } from 'meteor/jalik:ufs';
import { Thumb, Image } from "../models/image.model";
 
export const Images = new MongoObservable.Collection<Image>('images');
export const Thumbs = new MongoObservable.Collection<Thumb>('thumbs');
 
function loggedIn(userId) {
  return !!userId;
}
 
export const ThumbsStore = new UploadFS.store.GridFS({
  collection: Thumbs.collection,
  name: 'thumbs',
  permissions: new UploadFS.StorePermissions({
    insert: loggedIn,
    update: loggedIn,
    remove: loggedIn
  })
});
 
export const ImagesStore = new UploadFS.store.GridFS({
  collection: Images.collection,
  name: 'images',
  filter: new UploadFS.Filter({
    contentTypes: ['image/*']
  }),
  copyTo: [
    ThumbsStore
  ],
  permissions: new UploadFS.StorePermissions({
    insert: loggedIn,
    update: loggedIn,
    remove: loggedIn
  })
});
Improve this code

Let's explain a bit what happened.

  • We assigned Stores to their Collections, which is required.
  • We defined names of these Stores.
  • We added filter to ImagesStore so it can receive only images.
  • Every file will be copied to ThumbsStore.

There is a reason why we called one of the Collections the Thumbs!

Since we transfer every uploaded file to ThumbsStore, we can now easily add file manipulations.

Let's resize every file to 32x32:

21.7 Resize images both/collections/images.collection.ts 
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    insert: loggedIn,
    update: loggedIn,
    remove: loggedIn
  }),
  transformWrite(from, to, fileId, file) {
    // Resize to 32x32
    const gm = require('gm');
 
    gm(from, file.name)
      .resize(32, 32)
      .gravity('Center')
      .extent(32, 32)
      .quality(75)
      .stream()
      .pipe(to);
  }
});
 
export const ImagesStore = new UploadFS.store.GridFS({
Improve this code

We used gm module, let's install it:

$ meteor npm install gm --save

Note: To use this module, you need download and install GraphicsMagick or ImageMagick. In Mac OS X, you can use Homebrew and do: brew install graphicsmagick or brew install imagemagick.

Now because we used require, which is a NodeJS API, we need to add a TypeScript declaration, so let's install it:

$ meteor npm install @types/node --save

And let's import it in typings.d.ts file:

21.9 Import NodeJS @types typings.d.ts 
1
2
3
4
5
6
7
/// <reference types="zone.js" />
/// <reference types="meteor-typings" />
/// <reference types="@types/underscore" />
/// <reference types="@types/node" />
 
declare module '*.html' {
  const template: string;
Improve this code

Image upload

Note that for file upload you can use basic HTML <input type="file"> or any other package - you only need the HTML5 File object to be provided.

For our application, we would like to add ability to drag-and-drop images, so we use Angular2 directive that handles file upload and gives us more abilities such as drag & drop, on the client side. In this example, We used angular2-file-drop, which is still in develop. In order to do this, let's add the package to our project:

$ meteor npm install angular2-file-drop --save

And let's add it's module to ours:

21.12 Include file drop module client/imports/app/app.module.ts 
12
13
14
15
16
17
18
 
25
26
27
28
29
30
31
32
import { SHARED_DECLARATIONS } from './shared';
import { MaterialModule } from "@angular/material";
import { AUTH_DECLARATIONS } from "./auth/index";
import { FileDropModule } from "angular2-file-drop";
 
@NgModule({
  imports: [
...some lines skipped...
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyAWoBdZHCNh5R-hB5S5ZZ2oeoYyfdDgniA'
    }),
    MaterialModule.forRoot(),
    FileDropModule
  ],
  declarations: [
    AppComponent,
Improve this code

Now, let's create the PartiesUpload component. It will be responsible for uploading photos, starting with a stub of the view:

21.13 Create a view for an upload client/imports/app/parties/parties-upload.component.html 
1
2
3
4
5
<div class="parties-update-container">
  <div>
    <div>Drop an image to here</div>
  </div>
</div>
Improve this code

And the Component:

21.14 Create a PartiesUpload component client/imports/app/parties/parties-upload.component.ts 
1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
 
import template from './parties-upload.component.html';
 
@Component({
  selector: 'parties-upload',
  template
})
export class PartiesUploadComponent {
  constructor() {}
}
Improve this code

And let's add it to our declarations file:

21.15 Added PartiesUpload component to the index file client/imports/app/parties/index.ts 
1
2
3
4
5
6
7
8
9
10
11
import { PartiesFormComponent } from './parties-form.component';
import { PartiesListComponent } from './parties-list.component';
import { PartyDetailsComponent } from './party-details.component';
import {PartiesUploadComponent} from "./parties-upload.component";
 
export const PARTIES_DECLARATIONS = [
  PartiesFormComponent,
  PartiesListComponent,
  PartyDetailsComponent,
  PartiesUploadComponent
];
Improve this code

We want to use it in PartiesForm:

21.16 Use PartiesUploadComponent inside the form client/imports/app/parties/parties-form.component.html 
17
18
19
20
21
22
23
              <br/>
              <md-checkbox formControlName="public">Public party?</md-checkbox>
              <br/><br/>
              <parties-upload #upload></parties-upload>
              <button color="accent" md-raised-button type="submit">Add my party!</button>
            </div>
            <div class="form-extras">
Improve this code

Now, let's implement fileDrop directive:

21.17 Add bindings to FileDrop client/imports/app/parties/parties-upload.component.html 
1
2
3
4
5
6
7
8
<div class="parties-update-container">
  <div fileDrop
       [ngClass]="{'file-is-over': fileIsOver}"
       (fileOver)="fileOver($event)"
       (onFileDrop)="onFileDrop($event)">
    <div>Drop an image to here</div>
  </div>
</div>
Improve this code

As you can see we used fileOver event. It tells the component if file is over the drop zone.

We can now handle it inside the component:

21.18 Handle fileIsOver client/imports/app/parties/parties-upload.component.ts 
7
8
9
10
11
12
13
14
15
16
17
  template
})
export class PartiesUploadComponent {
  fileIsOver: boolean = false;
 
  constructor() {}
 
  fileOver(fileIsOver: boolean): void {
    this.fileIsOver = fileIsOver;
  }
}
Improve this code

Second thing is to handle onFileDrop event:

21.19 Implement onFileDrop method client/imports/app/parties/parties-upload.component.ts 
14
15
16
17
18
19
20
21
  fileOver(fileIsOver: boolean): void {
    this.fileIsOver = fileIsOver;
  }
 
  onFileDrop(file: File): void {
    console.log('Got file');
  }
}
Improve this code

Now our component is able to catch any dropped file, so let's create a function to upload that file into server.

21.20 Implement the upload method both/methods/images.methods.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { UploadFS } from 'meteor/jalik:ufs';
import { ImagesStore } from '../collections/images.collection';
 
export function upload(data: File): Promise<any> {
  return new Promise((resolve, reject) => {
    // pick from an object only: name, type and size
    const file = {
      name: data.name,
      type: data.type,
      size: data.size,
    };
 
    const upload = new UploadFS.Uploader({
      data,
      file,
      store: ImagesStore,
      onError: reject,
      onComplete: resolve
    });
 
    upload.start();
  });
}
Improve this code

Quick explanation. We need to know the name, the type and also the size of file we want to upload. We can get it from data object.

Now we can move on to use that function in PartiesUpload component:

21.21 Use the upload function client/imports/app/parties/parties-upload.component.ts 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
import template from './parties-upload.component.html';
 
import { upload } from '../../../../both/methods/images.methods';
 
@Component({
  selector: 'parties-upload',
  template
})
export class PartiesUploadComponent {
  fileIsOver: boolean = false;
  uploading: boolean = false;
 
  constructor() {}
 
...some lines skipped...
  }
 
  onFileDrop(file: File): void {
    this.uploading = true;
 
    upload(file)
      .then(() => {
        this.uploading = false;
      })
      .catch((error) => {
        this.uploading = false;
        console.log(`Something went wrong!`, error);
      });
  }
}
Improve this code

Now let's take a little break and solve those annoying missing modules errors. Since the uploading packages we used in the upload method are package that comes from Meteor Atmosphere and they not provide TypeScript declaration (.d.ts files), we need to create one for them.

Let's add it:

21.22 Declare meteor/jalik typings/jalik-ufs.d.ts 
1
2
3
4
5
6
7
8
9
10
11
declare module "meteor/jalik:ufs" {
  interface Uploader {
    start: () => void;
  }
 
  interface UploadFS {
    Uploader: (options: any) => Uploader;
  }
 
  export var UploadFS;
}
Improve this code

Let's also add the file-uploading css class:

21.23 Implement classes client/imports/app/parties/parties-upload.component.html 
1
2
3
4
5
6
<div class="parties-update-container">
  <div fileDrop
       [ngClass]="{'file-is-over': fileIsOver, 'file-uploading': uploading}"
       (fileOver)="fileOver($event)"
       (onFileDrop)="onFileDrop($event)">
    <div>Drop an image to here</div>
Improve this code

Display Uploaded Images

Let's create a simple gallery to list the images in the new party form.

First thing to do is to create a Publication for thumbnails:

21.24 Implement publications of Images and Thumbs server/imports/publications/images.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Meteor } from 'meteor/meteor';
import { Thumbs, Images } from '../../../both/collections/images.collection';
 
Meteor.publish('thumbs', function(ids: string[]) {
  return Thumbs.collection.find({
    originalStore: 'images',
    originalId: {
      $in: ids
    }
  });
});
 
Meteor.publish('images', function() {
  return Images.collection.find({});
});
Improve this code

As you can see we also created a Publication for images. We will use it later.

We still need to add it on the server-side:

21.25 Import those publications in the server entry point server/main.ts 
5
6
7
8
9
10
11
import './imports/publications/parties';
import './imports/publications/users';
import '../both/methods/parties.methods';
import './imports/publications/images';
 
Meteor.startup(() => {
  loadParties();
Improve this code

Now let's take care of UI. This will need to be reactive, so we will use again the MeteorObservable wrapper and RxJS.

Let's create a Subject that will be in charge of notification regarding files actions:

21.26 Use RxJS to keep track of files client/imports/app/parties/parties-upload.component.ts 
1
2
3
4
5
6
7
8
9
10
11
 
13
14
15
16
17
18
19
import {Component} from '@angular/core';
 
import template from './parties-upload.component.html';
 
import { upload } from '../../../../both/methods/images.methods';
 
import {Subject, Subscription} from "rxjs";
 
@Component({
  selector: 'parties-upload',
  template
...some lines skipped...
export class PartiesUploadComponent {
  fileIsOver: boolean = false;
  uploading: boolean = false;
  files: Subject<string[]> = new Subject<string[]>();
 
  constructor() {}
Improve this code

Let's now subscribe to thumbs publication with an array of those ids we created in the previous step:

21.27 Subscribe to the thumbs publication client/imports/app/parties/parties-upload.component.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import {Component, OnInit} from '@angular/core';
 
import template from './parties-upload.component.html';
 
import { upload } from '../../../../both/methods/images.methods';
import {Subject, Subscription} from "rxjs";
import {MeteorObservable} from "meteor-rxjs";
 
@Component({
  selector: 'parties-upload',
  template
})
export class PartiesUploadComponent implements OnInit {
  fileIsOver: boolean = false;
  uploading: boolean = false;
  files: Subject<string[]> = new Subject<string[]>();
  thumbsSubscription: Subscription;
 
  constructor() {}
 
  ngOnInit() {
    this.files.subscribe((filesArray) => {
      MeteorObservable.autorun().subscribe(() => {
        if (this.thumbsSubscription) {
          this.thumbsSubscription.unsubscribe();
          this.thumbsSubscription = undefined;
        }
 
        this.thumbsSubscription = MeteorObservable.subscribe("thumbs", filesArray).subscribe();
      });
    });
  }
 
  fileOver(fileIsOver: boolean): void {
    this.fileIsOver = fileIsOver;
  }
Improve this code

Now we can look for thumbnails that come from ImagesStore:

21.28 Look for the thumbnails client/imports/app/parties/parties-upload.component.ts 
3
4
5
6
7
8
9
10
11
12
 
17
18
19
20
21
22
23
 
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import template from './parties-upload.component.html';
 
import { upload } from '../../../../both/methods/images.methods';
import {Subject, Subscription, Observable} from "rxjs";
import {MeteorObservable} from "meteor-rxjs";
import {Thumb} from "../../../../both/models/image.model";
import {Thumbs} from "../../../../both/collections/images.collection";
 
@Component({
  selector: 'parties-upload',
...some lines skipped...
  uploading: boolean = false;
  files: Subject<string[]> = new Subject<string[]>();
  thumbsSubscription: Subscription;
  thumbs: Observable<Thumb[]>;
 
  constructor() {}
 
...some lines skipped...
          this.thumbsSubscription = undefined;
        }
 
        this.thumbsSubscription = MeteorObservable.subscribe("thumbs", filesArray).subscribe(() => {
          this.thumbs = Thumbs.find({
            originalStore: 'images',
            originalId: {
              $in: filesArray
            }
          }).zone();
        });
      });
    });
  }
Improve this code

We still don't see any thumbnails, so let's add a view for the thumbs:

21.29 Implement the thumbnails in the view client/imports/app/parties/parties-upload.component.html 
5
6
7
8
9
10
11
12
13
14
       (onFileDrop)="onFileDrop($event)">
    <div>Drop an image to here</div>
  </div>
  <div *ngIf="thumbs" class="thumbs">
    <div *ngFor="let thumb of thumbs | async" class="thumb">
      <img [src]="thumb.url"/>
    </div>
    <div class="clear"></div>
  </div>
</div>
Improve this code

Since we are working on a view right now, let's add some style.

We need to create parties-upload.component.scss file:

21.30 Basic styles client/imports/app/parties/parties-upload.component.scss 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.file-uploading {
  opacity: 0.3;
}
 
.file-is-over {
  opacity: 0.7;
}
 
.parties-update-container {
  width: 90%;
  margin: 15px;
 
  .thumbs {
    margin-top: 10px;
    margin-bottom: 10px;
 
    .clear {
      clear: both;
    }
 
    .thumb {
      float: left;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin-right: 5px;
 
      img {
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%
      }
    }
  }
}
 
[filedrop] {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 3px dashed rgba(255, 255, 255, 0.7);
}
Improve this code

And let's import the SCSS file into our Component:

21.31 Added import for the styles file client/imports/app/parties/parties-upload.component.ts 
1
2
3
4
5
6
7
 
11
12
13
14
15
16
17
18
import {Component, OnInit} from '@angular/core';
 
import template from './parties-upload.component.html';
import style from './parties-upload.component.scss';
 
import { upload } from '../../../../both/methods/images.methods';
import {Subject, Subscription, Observable} from "rxjs";
...some lines skipped...
 
@Component({
  selector: 'parties-upload',
  template,
  styles: [ style ]
})
export class PartiesUploadComponent implements OnInit {
  fileIsOver: boolean = false;
Improve this code

Great! We can move on to the next step. Let's do something with the result of the upload function.

We will create the addFile method that updates the files property, and we will add the actual array the in charge of the notifications in files (which is a Subject and only in charge of the notifications, not the actual data):

21.32 Handle file upload client/imports/app/parties/parties-upload.component.ts 
17
18
19
20
21
22
23
 
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
export class PartiesUploadComponent implements OnInit {
  fileIsOver: boolean = false;
  uploading: boolean = false;
  filesArray: string[] = [];
  files: Subject<string[]> = new Subject<string[]>();
  thumbsSubscription: Subscription;
  thumbs: Observable<Thumb[]>;
...some lines skipped...
    this.uploading = true;
 
    upload(file)
      .then((result) => {
        this.uploading = false;
        this.addFile(result);
      })
      .catch((error) => {
        this.uploading = false;
        console.log(`Something went wrong!`, error);
      });
  }
 
  addFile(file) {
    this.filesArray.push(file._id);
    this.files.next(this.filesArray);
  }
}
Improve this code

We want a communication between PartiesUpload and PartiesForm. Let's use Output decorator and the EventEmitter to notify PartiesForm component about every new file.

21.33 Emit event with the new file client/imports/app/parties/parties-upload.component.ts 
1
2
3
4
 
21
22
23
24
25
26
27
 
66
67
68
69
70
71
import {Component, OnInit, EventEmitter, Output} from '@angular/core';
 
import template from './parties-upload.component.html';
import style from './parties-upload.component.scss';
...some lines skipped...
  files: Subject<string[]> = new Subject<string[]>();
  thumbsSubscription: Subscription;
  thumbs: Observable<Thumb[]>;
  @Output() onFile: EventEmitter<string> = new EventEmitter<string>();
 
  constructor() {}
 
...some lines skipped...
  addFile(file) {
    this.filesArray.push(file._id);
    this.files.next(this.filesArray);
    this.onFile.emit(file._id);
  }
}
Improve this code

On the receiving side of this connection we have the PartiesForm component.

Create a method that handles an event with the new file and put images inside the FormBuilder.

21.34 Add images to the PartiesForm component client/imports/app/parties/parties-form.component.ts 
14
15
16
17
18
19
20
 
48
49
50
51
52
53
54
 
56
57
58
59
60
61
62
63
export class PartiesFormComponent implements OnInit {
  addForm: FormGroup;
  newPartyPosition: {lat:number, lng: number} = {lat: 37.4292, lng: -122.1381};
  images: string[] = [];
 
  constructor(
    private formBuilder: FormBuilder
...some lines skipped...
          lat: this.newPartyPosition.lat,
          lng: this.newPartyPosition.lng
        },
        images: this.images,
        public: this.addForm.value.public,
        owner: Meteor.userId()
      });
...some lines skipped...
      this.addForm.reset();
    }
  }
 
  onImage(imageId: string) {
    this.images.push(imageId);
  }
}
Improve this code

To keep Party interface up to date, we need to add images to it:

21.35 Add images property to the Party interface both/models/party.model.ts 
8
9
10
11
12
13
14
  public: boolean;
  invited?: string[];
  rsvps?: RSVP[];
  images?: string[];
}
 
interface RSVP {
Improve this code

The last step will be to create an event binding for onFile.

21.36 Bind the onFile event client/imports/app/parties/parties-form.component.html 
17
18
19
20
21
22
23
              <br/>
              <md-checkbox formControlName="public">Public party?</md-checkbox>
              <br/><br/>
              <parties-upload #upload (onFile)="onImage($event)"></parties-upload>
              <button color="accent" md-raised-button type="submit">Add my party!</button>
            </div>
            <div class="form-extras">
Improve this code

Display the main image of each party on the list

We will use Pipes to achieve this.

Let's create the DisplayMainImagePipe inside client/imports/app/shared/display-main-image.pipe.ts:

21.37 Create DisplayMainImage pipe client/imports/app/shared/display-main-image.pipe.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import {Pipe, PipeTransform} from '@angular/core';
import { Images } from '../../../../both/collections/images.collection';
import { Party } from '../../../../both/models/party.model';
 
@Pipe({
  name: 'displayMainImage'
})
export class DisplayMainImagePipe implements PipeTransform {
  transform(party: Party) {
    if (!party) {
      return;
    }
 
    let imageUrl: string;
    let imageId: string = (party.images || [])[0];
 
    const found = Images.findOne(imageId);
 
    if (found) {
      imageUrl = found.url;
    }
 
    return imageUrl;
  }
}
Improve this code

Since we have it done, let's add it to PartiesList:

21.38 Add DisplayMainImage pipe client/imports/app/shared/index.ts 
1
2
3
4
5
6
7
8
9
import { DisplayNamePipe } from './display-name.pipe';
import {RsvpPipe} from "./rsvp.pipe";
import {DisplayMainImagePipe} from "./display-main-image.pipe";
 
export const SHARED_DECLARATIONS: any[] = [
  DisplayNamePipe,
  RsvpPipe,
  DisplayMainImagePipe
];
Improve this code

We also need to subscribe to images:

21.39 Subscribe to the images publication client/imports/app/parties/parties-list.component.ts 
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
120
121
122
123
124
125
  autorunSub: Subscription;
  location: Subject<string> = new Subject<string>();
  user: Meteor.User;
  imagesSubs: Subscription;
 
  constructor(
    private paginationService: PaginationService
  ) {}
 
  ngOnInit() {
    this.imagesSubs = MeteorObservable.subscribe('images').subscribe();
 
    this.optionsSub = Observable.combineLatest(
      this.pageSize,
      this.curPage,
...some lines skipped...
    this.partiesSub.unsubscribe();
    this.optionsSub.unsubscribe();
    this.autorunSub.unsubscribe();
    this.imagesSubs.unsubscribe();
  }
}
Improve this code

We can now just implement it:

21.40 Implement the pipe client/imports/app/parties/parties-list.component.html 
19
20
21
22
23
24
25
    <pagination-controls class="pagination" (pageChange)="onPageChanged($event)"></pagination-controls>
 
    <md-card *ngFor="let party of parties | async" class="party-card">
      <img *ngIf="party.images && party.images.length > 0" class="party-main-image" [src]="party | displayMainImage">
      <h2 class="party-name">
        <a [routerLink]="['/party', party._id]">{{party.name}}</a>
      </h2>
Improve this code

Add some css rules to keep the control of images:

21.41 Add some styles client/imports/app/parties/parties-list.component.scss 
24
25
26
27
28
29
30
31
32
33
34
      margin: 20px;
      position: relative;
 
      img.party-main-image {
        max-width: 100%;
        max-height: 100%;
      }
 
      .party-name > a {
        color: black;
        text-decoration: none;
Improve this code

We still need to add the reset functionality to the component, since we want to manage what happens after images were added:

21.42 Add the reset method to PartiesUpload component client/imports/app/parties/parties-upload.component.ts 
68
69
70
71
72
73
74
75
76
    this.files.next(this.filesArray);
    this.onFile.emit(file._id);
  }
 
  reset() {
    this.filesArray = [];
    this.files.next(this.filesArray);
  }
}
Improve this code

By using #upload we get access to the PartiesUpload component's API. We can now use the `reset()`` method:

21.43 Reset files on ngSubmit client/imports/app/parties/parties-form.component.html 
6
7
8
9
10
11
12
        <h2>Add it now! ></h2>
      </div>
      <div class="form-center">
        <form *ngIf="user" [formGroup]="addForm" (ngSubmit)="addParty(); upload.reset();">
          <div style="display: table-row">
            <div class="form-inputs">
              <md-input dividerColor="accent" formControlName="name" placeholder="Party name"></md-input>
Improve this code

And that's it!

Cloud Storage

By storing files in the cloud you can reduce your costs and get a lot of other benefits.

Since this chapter is all about uploading files and UploadFS doesn't have built-in support for cloud services we should mention another library for that.

We recommend you to use Slingshot. You can install it by running:

$ meteor add edgee:slingshot

It's very easy to use with AWS S3, Google Cloud and other cloud storage services.

From slignshot's repository:

meteor-slingshot uploads the files directly to the cloud service from the browser without ever exposing your secret access key or any other sensitive data to the client and without requiring public write access to cloud storage to the entire public.

navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial