Upload Files to Amazon S3 Meteor Github

Files for Falling star.js

Stable, fast, robust, and well-maintained Shooting star.js package for files management using MongoDB Drove API. What does exactly this means? Calling .insert() method would initiate a file upload and then insert new record into drove. Calling .remove() method would erase stored file and record from MongoDB Drove. And and then on, no need to learn new APIs. It's flavored with extra low-level methods similar .unlink() and .write() for circuitous integrations.

ToC:

• Wiki - Full documentation
• Installation
  • ES6 Import
• API:
  • Initialize Drove
  • Upload file
  • Stream files
  • Download Button
• Documentation and tutorials
  • Demo apps and examples
  • tertiary-political party storage integration examples - AWS S3, DropBox, GridFS and Google Storage
  • TypeScript Definitions
• Related Packages
• Why this bundle?
• Aid / Support
• FAQ
• Awards
• Help & Contribute
• Support this project
• Supporters

Why Meteor-Files?

• Compatible with all front-end frameworks from Blaze to React
• Upload via HTTP and DDP transports, read near difference
• Sustainable and resumable uploads, which will survive connection interruption and server reboot (if a server has persistent storage)
• Upload files through calculating cloud without persistent File Arrangement, like Heroku
• You demand store files at GridFS, AWS S3, Google Storage or DropBox? (Use tertiary-party storage)
• You need to check file mime-blazon, size or extension? Easy! Use onBeforeUpload claw
• Yous demand to resize images after upload? Like shooting fish in a barrel besides! Use onAfterUpload hook, and manage file's subversions in a single record

Installation:

ES6 Import:

              import              {              FilesCollection              }              from              'falling star/ostrio:files'              ;            

API overview (total API)

new FilesCollection([config]) [Isomorphic]

Read full docs for FilesCollection Constructor

Shared code:

              import              {              Meteor              }              from              'falling star/meteor'              ;              import              {              FilesCollection              }              from              'meteor/ostrio:files'              ;              const              Images              =              new              FilesCollection              (              {              collectionName:              'Images'              ,              allowClientCode:              false              ,              // Disallow remove files from Client              onBeforeUpload              (              file              )              {              // Allow upload files under 10MB, and only in png/jpg/jpeg formats              if              (              file              .              size              <=              10485760              &&                              /png|jpg|jpeg/i              .              test              (              file              .              extension              )              )              {              return              true              ;              }              render              'Delight upload paradigm, with size equal or less than 10MB'              ;              }              }              )              ;              if              (              Meteor              .              isClient              )              {              Meteor              .              subscribe              (              'files.images.all'              )              ;              }              if              (              Meteor              .              isServer              )              {              Meteor              .              publish              (              'files.images.all'              ,              function              (              )              {              return              Images              .              find              (              )              .              cursor              ;              }              )              ;              }            

insert(settings[, autoStart]) [Client]

Read full docs for insert() method

Upload form (template):

              <              template              name="uploadForm">              {{#with currentUpload}}     Uploading              <              b              >{{file.proper noun}}</              b              >:              <              span              id="progress">{{progress.get}}%</              span              >              {{else}}              <              input              id="fileInput"              type="file" />   {{/with}}              </              template              >            

Shared lawmaking:

              import              {              FilesCollection              }              from              'meteor/ostrio:files'              ;              const              Images              =              new              FilesCollection              (              {              collectionName:              'Images'              }              )              ;              export              default              Images              ;              // import in other files            

Client's lawmaking:

              import              {              Template              }              from              'shooting star/templating'              ;              import              {              ReactiveVar              }              from              'meteor/reactive-var'              ;              Template              .              uploadForm              .              onCreated              (              office              (              )              {              this              .              currentUpload              =              new              ReactiveVar              (              false              )              ;              }              )              ;              Template              .              uploadForm              .              helpers              (              {              currentUpload              (              )              {              return              Template              .              case              (              )              .              currentUpload              .              get              (              )              ;              }              }              )              ;              Template              .              uploadForm              .              events              (              {              'change #fileInput'              (              e              ,              template              )              {              if              (              e              .              currentTarget              .              files              &&              e              .              currentTarget              .              files              [              0              ]              )              {              // We upload only one file, in case              // multiple files were selected              const              upload              =              Images              .              insert              (              {              file:              eastward              .              currentTarget              .              files              [              0              ]              ,              chunkSize:              'dynamic'              }              ,              false              )              ;              upload              .              on              (              'outset'              ,              role              (              )              {              template              .              currentUpload              .              ready              (              this              )              ;              }              )              ;              upload              .              on              (              'terminate'              ,              office              (              mistake              ,              fileObj              )              {              if              (              error              )              {              alert              (              `Error during upload:                                  ${                  error                  }                `              )              ;              }              else              {              alert              (              `File "                  ${                  fileObj                  .                  proper name                  }                " successfully uploaded`              )              ;              }              template              .              currentUpload              .              fix              (              false              )              ;              }              )              ;              upload              .              first              (              )              ;              }              }              }              )              ;            

For multiple file upload see this demo code.

Upload base64 string (introduced in v1.7.one):

              // Every bit dataURI              Images              .              insert              (              {              file:              'data:image/png,base64str…'              ,              isBase64:              true              ,              // <— Mandatory              fileName:              'motion picture.png'              // <— Mandatory              }              )              ;              // As plain base64:              Images              .              insert              (              {              file:              'base64str…'              ,              isBase64:              true              ,              // <— Mandatory              fileName:              'pic.png'              ,              // <— Mandatory              type:              'paradigm/png'              // <— Mandatory              }              )              ;            

For more expressive example run across Upload demo app

Stream files

To display files you can employ fileURL template helper or .link() method of FileCursor.

Template:

              <              template              name='file'>              <              img              src="{{imageFile.link}}"              alt="{{imageFile.name}}" />              <!-- Same equally: -->              <!-- <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}" /> -->              <              hr              >              <              video              height="auto"              controls="controls">              <              source              src="{{videoFile.link}}?play=true"              type="{{videoFile.type}}" />              <!-- Aforementioned every bit: -->              <!-- <source src="{{fileURL videoFile}}?play=true" type="{{videoFile.blazon}}" /> -->              </              video              >              </              template              >            

Shared lawmaking:

              import              {              Meteor              }              from              'meteor/meteor'              ;              import              {              FilesCollection              }              from              'meteor/ostrio:files'              ;              const              Images              =              new              FilesCollection              (              {              collectionName:              'Images'              }              )              ;              const              Videos              =              new              FilesCollection              (              {              collectionName:              'Videos'              }              )              ;              if              (              Meteor              .              isServer              )              {              // Upload sample files on server'southward startup:              Meteor              .              startup              (              (              )              =>              {              Images              .              load              (              'https://raw.githubusercontent.com/VeliovGroup/Meteor-Files/primary/logo.png'              ,              {              fileName:              'logo.png'              }              )              ;              Videos              .              load              (              'http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_5mb.mp4'              ,              {              fileName:              'Big-Cadet-Bunny.mp4'              }              )              ;              }              )              ;              Shooting star              .              publish              (              'files.images.all'              ,              function              (              )              {              render              Images              .              find              (              )              .              cursor              ;              }              )              ;              Falling star              .              publish              (              'files.videos.all'              ,              office              (              )              {              return              Videos              .              find              (              )              .              cursor              ;              }              )              ;              }              else              {              // Subscribe to file'southward collections on Client              Meteor              .              subscribe              (              'files.images.all'              )              ;              Meteor              .              subscribe              (              'files.videos.all'              )              ;              }            

Client's code:

              Template              .              file              .              helpers              (              {              imageFile              (              )              {              render              Images              .              findOne              (              )              ;              }              ,              videoFile              (              )              {              render              Videos              .              findOne              (              )              ;              }              }              )              ;            

For more expressive example come across Streaming demo app

Download button

Template:

              <              template              name='file'>              <              a              href="{{file.link}}?download=true"              download="{{file.proper noun}}"              target="_parent">              {{file.name}}              </              a              >              </              template              >            

Shared code:

              import              {              Meteor              }              from              'meteor/falling star'              ;              import              {              FilesCollection              }              from              'shooting star/ostrio:files'              ;              const              Images              =              new              FilesCollection              (              {              collectionName:              'Images'              }              )              ;              if              (              Shooting star              .              isServer              )              {              // Load sample image into FilesCollection on server'southward startup:              Meteor              .              startup              (              part              (              )              {              Images              .              load              (              'https://raw.githubusercontent.com/VeliovGroup/Shooting star-Files/principal/logo.png'              ,              {              fileName:              'logo.png'              ,              meta:              {              }              }              )              ;              }              )              ;              Meteor              .              publish              (              'files.images.all'              ,              function              (              )              {              return              Images              .              find              (              )              .              cursor              ;              }              )              ;              }              else              {              // Subscribe on the client              Meteor              .              subscribe              (              'files.images.all'              )              ;              }            

Client's code:

              Template              .              file              .              helpers              (              {              fileRef              (              )              {              return              Images              .              findOne              (              )              ;              }              }              )              ;            

For more expressive instance encounter Download demo

FAQ:

1. Where are files stored by default?: past default if config.storagePath isn't passed into Constructor it'southward equals to avails/app/uploads and relative to running script:
   • a. On development stage: yourDevAppDir/.meteor/local/build/programs/server. Note: All files will be removed as before long as your application rebuilds or y'all run meteor reset. To continue your storage persistent during development use an absolute path outside of your projection folder, due east.g. /information directory.
   • b. On production: yourProdAppDir/programs/server. Notation: If using MeteorUp (MUP), Docker volumes must to be added to mup.json, see MUP usage
2. Cordova usage and evolution: With support of community we practise regular testing on virtual and real devices. To make sure Meteor-Files library runs smoothly in Cordova environment — enable withCredentials; enable {allowQueryStringCookies: true} and {allowedOrigins: true} on both Client and Server. For more details read Cookie's repository FAQ
3. How to pause/continue upload and get progress/speed/remaining fourth dimension?: see Object returned from insert method
4. When using any of accounts packages - bundle accounts-base must be explicitly added to .meteor/packages above ostrio:files
5. gyre/POST uploads - Take a await on Postal service-Example past @noris666
6. In Safari (Mobile and Desktop) for DDP chunk size is reduced past algorithm, due to error thrown if frame is besides big. Limit simultaneous uploads to vi is recommended for Safari. This issue should be fixed in Safari 11. Switching to http transport (which has no such issue) is recommended for Safari. See #458
7. Make certain you're using single domain for the Meteor app, and the same domain for hosting Meteor-Files endpoints, see #737 for details
8. When proxying requests to Falling star-Files endpoint make sure protocol http/1.one is used, see #742 for details

Awards:

Become Support:

• Ask a question via Gitter chat
• Inquire a question or submit an effect
• Releases / Changelog / History
• For more docs and examples read wiki

Demo application:

• Live: files.veliov.com
• Source Code Rep

Related Packages:

• pyfiles (meteor-python-files) Python Customer for Meteor-Files bundle
• meteor-autoform-file - Upload and manage files with autoForm

Back up Falling star-Files project:

• Star on GitHub
• Star on Atmosphere
• Share via Facebook and Twitter
• Sponsor via GitHub
• Support via PayPal — support my open source contributions one time or on regular basis
• Use ostr.io — Monitoring, Analytics, WebSec, Spider web-CRON and Pre-rendering for a website

Contribution:

• Want to help? Please check issues for open and tagged as help wanted issues;
• Want to contribute? Read and follow PR rules. All PRs are welcome on dev co-operative. Please, always give expressive description to your changes and additions.

Supporters:

We would like to thank everyone who back up this project. Because of those guys this project tin can have 100% of our attention.

• @vanshady
• @Neophen
• @rikyperdana
• @derwok, cheque out his project - 4minitz
• @FinnFrotscher
• @Neobii
• @themeteorchef
• @MeDBejoHok
• @martunta

robersondonchat.blogspot.com

Source: https://github.com/veliovgroup/Meteor-Files

Share this post