How to Upload File to Google Cloud Storage Using Meteor Js

meteor-slingshot

Direct and secure file-uploads to AWS S3, Google Cloud Storage and others.

Install

meteor add edgee:slingshot

Why?

There are many many packages out there that allow file uploads to S3, Google Deject and other cloud storage services, but they usually rely on the meteor apps' server to relay the files to the deject service, which puts the server under unnecessary load.

falling star-slingshot uploads the files directly to the deject service from the browser without always exposing your secret access fundamental or any other sensitive information to the customer and without requiring public write access to cloud storage to the entire public.

File uploads tin can not only exist restricted by file-size and file-type, simply also by other stateful criteria such as the electric current meteor user.

Quick Example

Client side

On the client side we tin can now upload files through to the saucepan:

              var              uploader              =              new              Slingshot              .              Upload              (              "myFileUploads"              )              ;              uploader              .              send              (              document              .              getElementById              (              'input'              )              .              files              [              0              ]              ,              part              (              fault              ,              downloadUrl              )              {              if              (              fault              )              {              // Log service detailed response.              console              .              error              (              'Error uploading'              ,              uploader              .              xhr              .              response              )              ;              alarm              (              fault              )              ;              }              else              {              Meteor              .              users              .              update              (              Falling star              .              userId              (              )              ,              {              $button:              {              "contour.files":              downloadUrl              }              }              )              ;              }              }              )              ;            

Client and Server

These file upload restrictions are validated on the client and and so appended to the directive on the server side to enforce them:

              Slingshot              .              fileRestrictions              (              "myFileUploads"              ,              {              allowedFileTypes:              [              "epitome/png"              ,              "prototype/jpeg"              ,              "image/gif"              ]              ,              maxSize:              10              *              1024              *              1024              // 10 MB (use null for unlimited).              }              )              ;            

Of import: The fileRestrictions must be alleged before the the directive is instantiated.

Server side

On the server we declare a directive that controls upload access rules:

              Slingshot              .              createDirective              (              "myFileUploads"              ,              Slingshot              .              S3Storage              ,              {              saucepan:              "mybucket"              ,              acl:              "public-read"              ,              authorize:              role              (              )              {              //Deny uploads if user is non logged in.              if              (              !              this              .              userId              )              {              var              message              =              "Please login earlier posting files"              ;              throw              new              Meteor              .              Error              (              "Login Required"              ,              message              )              ;              }              return              true              ;              }              ,              primal:              function              (              file              )              {              //Store file into a directory by the user'south username.              var              user              =              Falling star              .              users              .              findOne              (              this              .              userId              )              ;              return              user              .              username              +              "/"              +              file              .              name              ;              }              }              )              ;            

With the directive higher up, no other files than images will be allowed. The policy is directed by the meteor app server and enforced past AWS S3.

Notation: If your bucket is created in any region other than US Standard, you lot will need to ready the region fundamental in the directive. Refer the AWS Slingshot Storage Directives

Storage services

The client side is agnostic to which storage service is used. All it needs for the file upload to work, is a directive proper name.

There is no limit imposed on how many directives can exist alleged for each storage service.

Storage services are pluggable in Slingshot and you can add back up for own storage service equally described in a section below.

Progress bars

You tin can create file upload progress confined as follows:

<template                              proper name=                              "progressBar"              >   <div                              grade=                              "progress"              >     <div                              course=                              "progress-bar"                                            role=                              "progressbar"                                            aria-valuenow=                              "                {{                progress                }}                "                                            aria-valuemin=                              "0"                                            aria-valuemax=                              "100"                                            way=                              "width:                {{                progress                }}%;"              >       <bridge                              class=                              "sr-only"              >{{              progress              }}% Complete</span>     </div>   </div> </template>

Using the Slingshot.Upload instance read and react to the progress:

              Template              .              progressBar              .              helpers              (              {              progress:              function              (              )              {              return              Math              .              round              (              this              .              uploader              .              progress              (              )              *              100              )              ;              }              }              )              ;            

Evidence uploaded file before it is uploaded (latency compensation)

<template                              proper name=                              "myPicture"              >   <img                              src=              {{              url              }}/> </template>

              Template              .              myPicture              .              helpers              (              {              url:              function              (              )              {              //If we are uploading an image, laissez passer true to download the prototype into cache.              //This volition preload the paradigm earlier using the remote epitome url.              return              this              .              uploader              .              url              (              true              )              ;              }              }              )              ;            

This to prove the image from the local source until information technology is uploaded to the server. If Blob URL's are not available information technology will attempt to use FileReader to generate a base64-encoded url representing the information as a fallback.

Add together meta-context to your uploads

You can add together meta-context to your file-uploads, to make your requests more specific on where the files are to be uploaded.

Consider the post-obit case...

We accept an app that features picture albums. An album belongs to a user and simply that user is allowed to upload picture to it. In the deject each album has its own directory where its pictures are stored.

We declare our client-side uploader as follows:

              var              metaContext              =              {              albumId:              album              .              _id              }              var              uploadToMyAlbum              =              new              Slingshot              .              Upload              (              "picturealbum"              ,              metaContext              )              ;            

On the server side the directive tin can now prepare the key accordingly and bank check if the user is allowed post pictures to the given anthology:

              Slingshot              .              createDirective              (              "picturealbum"              ,              Slingshot              .              GoogleCloud              ,              {              acl:              "public-read"              ,              authorize:              function              (              file              ,              metaContext              )              {              var              album              =              Albums              .              findOne              (              metaContext              .              albumId              )              ;              //Denied if album doesn't exist or if it is not owned by the current user.              return              album              &&              album              .              userId              ===              this              .              userId              ;              }              ,              fundamental:              role              (              file              ,              metaContext              )              {              return              metaContext              .              albumId              +              "/"              +              Appointment              .              now              (              )              +              "-"              +              file              .              proper noun              ;              }              }              )              ;            

Manual Client Side validation

You can check if a file uploadable co-ordinate to file-restrictions equally follows:

              var              uploader              =              new              Slingshot              .              Upload              (              "myFileUploads"              )              ;              var              error              =              uploader              .              validate              (              certificate              .              getElementById              (              'input'              )              .              files              [              0              ]              )              ;              if              (              mistake              )              {              console              .              error              (              fault              )              ;              }            

The validate method will return null if valid and returns an Error instance if validation fails.

AWS S3

You will need aAWSAccessKeyId and AWSSecretAccessKey in Meteor.settings and a bucket with the post-obit CORS configuration:

<?xml                              version=                "1.0"                                            encoding=                "UTF-8"              ?> <CORSConfiguration              xmlns=                "http://s3.amazonaws.com/doctor/2006-03-01/"              >     <CORSRule>         <AllowedOrigin>*</AllowedOrigin>         <AllowedMethod>PUT</AllowedMethod>         <AllowedMethod>POST</AllowedMethod>         <AllowedMethod>Go</AllowedMethod>         <AllowedMethod>HEAD</AllowedMethod>         <MaxAgeSeconds>3000</MaxAgeSeconds>         <AllowedHeader>*</AllowedHeader>     </CORSRule> </CORSConfiguration>

Declare AWS S3 Directives every bit follows:

              Slingshot              .              createDirective              (              "aws-s3-example"              ,              Slingshot              .              S3Storage              ,              {              //...              }              )              ;            

S3 with temporary AWS Credentials (Avant-garde)

For actress security yous can employ temporary credentials to sign upload requests.

              var              sts              =              new              AWS              .              STS              (              )              ;              // Using the AWS SDK to think temporary credentials.              Slingshot              .              createDirective              (              'myUploads'              ,              Slingshot              .              S3Storage              .              TempCredentials              ,              {              bucket:              'myBucket'              ,              temporaryCredentials:              Meteor              .              wrapAsync              (              function              (              elapse              ,              callback              )              {              //AWS dictates that the minimum elapsing must be 900 seconds:              var              elapsing              =              Math              .              max              (              Math              .              round              (              elapse              /              k              )              ,              900              )              ;              sts              .              getSessionToken              (              {              DurationSeconds:              duration              }              ,              function              (              fault              ,              result              )              {              callback              (              fault              ,              result              &&              consequence              .              Credentials              )              ;              }              )              ;              }              )              }              )              ;            

If you are running slingshot on an EC2 example, you lot tin can conveniantly retreive your access keys with AWS.EC2MetadataCredentials:

              var              credentials              =              new              AWS              .              EC2MetadataCredentials              (              )              ;              var              updateCredentials              =              Falling star              .              wrapAsync              (              credentials              .              get              ,              credentials              )              ;              Slingshot              .              createDirective              (              'myUploads'              ,              Slingshot              .              S3Storage              .              TempCredentials              ,              {              bucket:              'myBucket'              ,              temporaryCredentials:              function              (              )              {              if              (              credentials              .              needsRefresh              (              )              )              {              updateCredentials              (              )              ;              }              return              {              AccessKeyId:              credentials              .              accessKeyId              ,              SecretAccessKey:              credentials              .              secretAccessKey              ,              SessionToken:              credentials              .              sessionToken              }              ;              }              }              )              ;            

Google Cloud

Generate a individual central and convert it to a .pem file using openssl:

              openssl pkcs12 -in google-cloud-service-key.p12 -nodes -nocerts > google-deject-service-key.pem                          

Setup CORS on the bucket:

              gsutil cors set docs/gs-cors.json gs://mybucket                          

Salvage this file into the /individual directory of your meteor app and add this line to your server-side code:

              Slingshot              .              GoogleCloud              .              directiveDefault              .              GoogleSecretKey              =              Assets              .              getText              (              'google-cloud-service-central.pem'              )              ;            

Declare Google Cloud Storage Directives as follows:

              Slingshot              .              createDirective              (              "google-cloud-example"              ,              Slingshot              .              GoogleCloud              ,              {              //...              }              )              ;            

Rackspace Cloud Files

You will need aRackspaceAccountId (your acocunt number) and RackspaceMetaDataKey in Meteor.settings.

In club to obtain your RackspaceMetaDataKey (a.k.a. Business relationship-Meta-Temp-Url-Key) you demand an auth-token then follow the instructions here.

Note that API-Key, Auth-Token, Meta-Data-Key are non the same affair:

API-Key is what y'all need to obtain an Auth-Token, which in plow is what you need to setup CORS and to set your Meta-Data-Key. The auth-token expires later on 24 hours.

For your directive yous demand container and provide its name, region and cdn.

              Slingshot              .              createDirective              (              "rackspace-files-instance"              ,              Slingshot              .              RackspaceFiles              ,              {              container:              "myContainer"              ,              //Container name.              region:              "lon3"              ,              //Region code (The default would be 'iad3').              //You must set the cdn if you want the files to be publicly accessible:              cdn:              "https://abcdefghije8c9d17810-ef6d926c15e2b87b22e15225c32e2e17.r19.cf5.rackcdn.com"              ,              pathPrefix:              function              (              file              )              {              //Store file into a directory by the user's username.              var              user              =              Falling star              .              users              .              findOne              (              this              .              userId              )              ;              return              user              .              username              ;              }              }              )              ;            

To setup CORS you also demand to your Auth-Token from higher up and use:

curl -I -10 POST -H                              'X-Auth-Token: yourAuthToken'                            \   -H                              'Ten-Container-Meta-Access-Control-Allow-Origin: *'                            \   -H                              'Ten-Container-Meta-Access-Expose-Headers: etag location x-timestamp ten-trans-id Access-Control-Permit-Origin'                            \   https://storage101.containerRegion.clouddrive.com/v1/MossoCloudFS_yourAccoountNumber/yourContainer

Cloudinary

Cloudinary is supported via a 3rd party parcel.
jimmiebtlr:cloudinary

Browser Compatibility

Currently the uploader uses XMLHttpRequest ii to upload the files, which is not supported on Internet Explorer 9 and older versions of Internet Explorer.

This can be circumvented by falling back to iframe uploads in future versions, if required.

Latency compensation is available in Internet Explorer x.

Security

The secret key never leaves the shooting star app server. Nobody will be able to upload anything to your buckets outside of your falling star app.

Instead of using clandestine access keys, Slingshot uses a policy document that is sent to along with the file AWS S3 or Google Deject Storage. This policy is signed by the hole-and-corner key and contains all the restrictions that y'all define in the directive. Past default a signed policy expires after 5 minutes.

Adding Back up for other storage Services

Deject storage services are pluggable in Slingshot. Y'all can add support for a cloud storage service of your selection. All you need is to declare an object with the following parameters:

              MyStorageService              =              {              /**                              * Ascertain the additional parameters that your your service uses here.                              *                              * Notation that some parameters like maxSize are shared by all services. You practise                              * not need to define those by yourself.                              */              directiveMatch:              {              accessKey:              String              ,              options:              Object              ,              foo:              Match              .              Optional              (              Function              )              }              ,              /**                              * Here you lot can set default parameters that your service will use.                              */              directiveDefault:              {              options:              {              }              }              ,              /**                              *                              *                @param                {Object} method - This is the Meteor Method context.                              *                @param                {Object} directive - All the parameters from the directive.                              *                @param                {Object} file - Information virtually the file as gathered past the                              * browser.                              *                @param                {Object} [meta] - Meta data that was passed to the uploader.                              *                              *                @returns                {UploadInstructions}                              */              upload:              function              (              method              ,              directive              ,              file              ,              meta              )              {              var              accessKey              =              directive              .              accessKey              ;              var              fooData              =              directive              .              foo              &&              directive              .              foo              .              call              (              method              ,              file              ,              meta              )              ;              //Here you need to make sure that all parameters passed in the directive              //are going to be enforced by the server receiving the file.              return              {              // Endpoint where the file is to be uploaded:              upload:              "https://example.com"              ,              // Download URL, once the file uploaded:              download:              directive              .              cdn              ||              "https://example.com/"              +              file              .              proper name              ,              // POST information to be fastened to the file-upload:              postData:              [              {              proper noun:              "accessKey"              ,              value:              accessKey              }              ,              {              proper noun:              "signature"              ,              value:              signature              }              //...              ]              ,              // HTTP headers to transport when uploading:              headers:              {              "x-foo-bar":              fooData              }              }              ;              }              ,              /**                              * Accented maximum file-size allowable by the storage service.                              */              maxSize:              five              *              1024              *              1024              *              1024              }              ;            

Example Directive:

              Slingshot              .              createDirective              (              "myUploads"              ,              MyStorageService              ,              {              accessKey:              "a12345xyz"              ,              foo:              function              (              file              ,              metaContext              )              {              return              "bar"              ;              }              }              )              ;            

Dependencies

Meteor core packages:

• underscore
• tracker
• reactive-var
• bank check

Troubleshooting and Aid

If you are having whatsoever queries about how to use slingshot, or how to get it to piece of work with the unlike services or any other general questions nigh it, please mail service a question on Stack Overflow. You will get a high quality answer there much quicker than past posting an event here on github.

Problems reports, Feature Requests and Pull Requests are always welcome.

API Reference

Directives

General (All Services)

authorize: Office (required unless ready in File Restrictions)

maxSize: Number (required unless set in File Restrictions)

allowedFileTypes RegExp, String or Assortment (required unless prepare in File Restrictions)

cdn String (optional) - CDN domain for downloads. i.eastward. "https://d111111abcdef8.cloudfront.net"

expire Number (optional) - Number of milliseconds in which an upload authorization volition expire after the asking was made. Default is 5 minutes.

AWS S3 (Slingshot.S3Storage)

region Cord (optional) - Default is Meteor.settings.AWSRegion or "us-east-1". See AWS Regions

AWSAccessKeyId String (required) - Tin can also exist set in Meteor.settings.

AWSSecretAccessKey Cord (required) - Can also exist set in Meteor.settings.

AWS S3 with Temporary Credentials (Slingshot.S3Storage.TempCredentials)

region String (optional) - Default is Meteor.settings.AWSRegion or "usa-e-1". Meet AWS Regions

temporaryCredentials Function (required) - Function that generates temporary credentials. It takes a signle statement, which is the minumum desired expiration time in milli-seconds and it returns an object that contains AccessKeyId, SecretAccessKey and SessionToken.

Google Cloud Storage (Slingshot.GoogleCloud)

bucket Cord (required) - Proper noun of bucket to use. The default is Meteor.settings.GoogleCloudBucket.

GoogleAccessId String (required) - Can also be prepare in Meteor.settings.

GoogleSecretKey Cord (required) - Tin also exist ready in Meteor.settings.

AWS S3 and Google Cloud Storage

bucket Cord (required) - Name of bucket to use. The default is Meteor.settings.GoogleCloudBucket. For AWS S3 the default bucket is Falling star.settings.S3Bucket.

bucketUrl Cord or Office (optional) - Override URL to which files are uploaded. If it is a role, then the get-go statement is the saucepan proper name. This url also used for downloads unless a cdn is given.

key String or Function (required) - Name of the file on the cloud storage service. If a role is provided, it volition exist called with userId in the context and its render value is used as the cardinal. First argument is file info and the second is the meta-information that can exist passed by the client.

acl String (optional)

cacheControl String (optional) - RFC 2616 Cache-Control directive

contentDisposition String or Function (optional) - RFC 2616 Content-Disposition directive. Default is the uploaded file'south name (inline). If information technology is a function and so it takes the same context and arguments every bit the key part. Utilize nothing to disable.

Rackspace Cloud (Slingshot.RackspaceFiles)

RackspaceAccountId Cord (required) - Can likewise be prepare in Meteor.settings.

RackspaceMetaDataKey String (required) - Tin can also be set in Falling star.settings.

container String (required) - Name of container to use.

region String (optional) - Data Heart region. The default is "iad3". Run into other regions

pathPrefix String or Part (required) - Like to key for S3, merely will always be appended by file.name that is provided by the customer.

deleteAt Date (optional) - Absolute time when the uploaded file is to be deleted. This attribute is not enforced at all. It can be easily altered by the client

deleteAfter Number (optional) - Same as deleteAt, but relative.

File restrictions

authorize Function (optional) - Function to determines if upload is allowed.

maxSize Number (optional) - Maximum file-size (in bytes). Use cypher or 0 for unlimited.

allowedFileTypes RegExp, String or Assortment (optional) - Allowed MIME types. Use null for whatever file type.

polandmustence.blogspot.com

Source: https://githublab.com/repository/CulturalMe/meteor-slingshot

Share this post