Where Should I Store Uploaded Files in Meteor

Files for Meteor.js

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

ToC:

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

Why Meteor-Files?

• Compatible with all front-finish frameworks from Blaze to React
• Upload via HTTP and DDP transports, read well-nigh difference
• Sustainable and resumable uploads, which will survive connection interruption and server reboot (if a server has persistent storage)
• Upload files through computing cloud without persistent File Organisation, like Heroku
• You need shop files at GridFS, AWS S3, Google Storage or DropBox? (Use 3rd-party storage)
• You demand to cheque file mime-type, size or extension? Easy! Apply onBeforeUpload hook
• You demand to resize images after upload? Piece of cake besides! Use onAfterUpload hook, and manage file'due south subversions in a single record

Installation:

            
                              meteor                                add                                  ostrio:files                          
          

ES6 Import:

            
                              one                import                                                {                                                FilesCollection                                                }                                                from                                                'meteor/ostrio:files'                ;                          
          

API overview (full API)

new FilesCollection([config]) [Isomorphic]

Read total docs for FilesCollection Constructor

Shared code:

            
                              1                import                                                {                                                Meteor                                                }                                                from                                                'falling star/falling star'                ;                                                ii                                import                                                {                                                FilesCollection                                                }                                                from                                                'meteor/ostrio:files'                ;                                                3                4                                const                                                Images                                                =                                                new                                                FilesCollection                (                {                                                five                                  collectionName                :                                                'Images'                ,                                                6                                  allowClientCode                :                                                false                ,                                                // Disallow remove files from Client                                                7                                                onBeforeUpload                (                file                )                                                {                                                8                                                // Permit upload files under 10MB, and just in png/jpg/jpeg formats                                                9                                                if                                                (                file                .                size                                                <=                                                10485760                                                &&                                                /                png|jpg|jpeg                /                i                .                test                (                file                .                extension                )                )                                                {                                                x                                                return                                                true                ;                                                11                                                }                                                12                                                return                                                'Please upload image, with size equal or less than 10MB'                ;                                                13                                                }                                                14                                }                )                ;                                                fifteen                16                                if                                                (                Meteor                .                isClient                )                                                {                                                17                                                Meteor                .                subscribe                (                'files.images.all'                )                ;                                                18                                }                                                19                20                                if                                                (                Falling star                .                isServer                )                                                {                                                21                                                Meteor                .                publish                (                'files.images.all'                ,                                                role                                                (                )                                                {                                                22                                                return                                                Images                .                discover                (                )                .                cursor                ;                                                23                                                }                )                ;                                                24                                }                          
          

insert(settings[, autoStart]) [Client]

Read total docs for insert() method

Upload grade (template):

            
                              1                <                template                                                name                =                "                uploadForm                "                >                                                two                {{#with currentUpload}}                3                                  Uploading                                <                b                >                {{file.name}}                </                b                >                :                                4                                                <                span                                                id                =                "                progress                "                >                {{progress.get}}%                </                span                >                                                5                {{else}}                half-dozen                                                <                input                                                id                =                "                fileInput                "                                                blazon                =                "                file                "                                                />                                                7                {{/with}}                8                                </                template                >                          
          

Shared code:

            
                              ane                import                                                {                                                FilesCollection                                                }                                                from                                                'falling star/ostrio:files'                ;                                                2                                const                                                Images                                                =                                                new                                                FilesCollection                (                {                collectionName                :                                                'Images'                }                )                ;                                                iii                                consign                                                default                                                Images                ;                                                // import in other files                          
          

Client's lawmaking:

            
                              1                import                                                {                                                Template                                                }                                                from                                                'meteor/templating'                ;                                                2                                import                                                {                                                ReactiveVar                                                }                                                from                                                'meteor/reactive-var'                ;                                                3                                Template                .                uploadForm                .                onCreated                (                part                                                (                )                                                {                                                4                                                this                .                currentUpload                                                =                                                new                                                ReactiveVar                (                imitation                )                ;                                                5                                }                )                ;                                                6                7                                Template                .                uploadForm                .                helpers                (                {                                                viii                                                currentUpload                (                )                                                {                                                9                                                render                                                Template                .                instance                (                )                .                currentUpload                .                get                (                )                ;                                                10                                                }                                                xi                                }                )                ;                                                12                xiii                                Template                .                uploadForm                .                events                (                {                                                xiv                                                'modify #fileInput'                (                e                ,                                  template                )                                                {                                                15                                                if                                                (                e                .                currentTarget                .                files                                                &&                                  e                .                currentTarget                .                files                [                0                ]                )                                                {                                                16                                                // We upload only one file, in case                                                17                                                // multiple files were selected                                                18                                                const                                  upload                                =                                                Images                .                insert                (                {                                                nineteen                                  file                :                                  e                .                currentTarget                .                files                [                0                ]                ,                                                xx                                  chunkSize                :                                                'dynamic'                                                21                                                }                ,                                                fake                )                ;                                                22                23                                  upload                .                on                (                'starting time'                ,                                                function                                                (                )                                                {                                                24                                  template                .                currentUpload                .                set                (                this                )                ;                                                25                                                }                )                ;                                                26                27                                  upload                .                on                (                'end'                ,                                                function                                                (                error                ,                                  fileObj                )                                                {                                                28                                                if                                                (                mistake                )                                                {                                                29                                                alert                (                `                Mistake during upload:                                ${                error                }                `                )                ;                                                thirty                                                }                                                else                                                {                                                31                                                alert                (                `                File "                ${                fileObj                .                name                }                " successfully uploaded                `                )                ;                                                32                                                }                                                33                                  template                .                currentUpload                .                set                (                imitation                )                ;                                                34                                                }                )                ;                                                35                36                                  upload                .                start                (                )                ;                                                37                                                }                                                38                                                }                                                39                                }                )                ;                          
          

For multiple file upload see this demo code.

Upload base64 string (introduced in v1.vii.i):

            
                              1                // As dataURI                                                ii                                Images                .                insert                (                {                                                3                                  file                :                                                'information:image/png,base64str…'                ,                                                iv                                  isBase64                :                                                true                ,                                                // <— Mandatory                                                5                                  fileName                :                                                'film.png'                                                // <— Mandatory                                                6                                }                )                ;                                                7                viii                                // Every bit apparently base64:                                                nine                                Images                .                insert                (                {                                                10                                  file                :                                                'base64str…'                ,                                                11                                  isBase64                :                                                true                ,                                                // <— Mandatory                                                12                                  fileName                :                                                'moving picture.png'                ,                                                // <— Mandatory                                                13                                  type                :                                                'paradigm/png'                                                // <— Mandatory                                                fourteen                                }                )                ;                          
          

For more than expressive case run across Upload demo app

Stream files

To brandish files y'all tin can use fileURL template helper or .link() method of FileCursor.

Template:

            
                              1                <                template                                                name                =                '                file                '                >                                                two                                                <                img                                                src                =                "                {{imageFile.link}}                "                                                alt                =                "                {{imageFile.name}}                "                                                />                                                three                                                <!-- Same as: -->                                                4                                                <!-- <img src="{{fileURL imageFile}}" alt="{{imageFile.name}}" /> -->                                                5                                                <                hr                >                                                6                                                <                video                                                height                =                "                car                "                                                controls                =                "                controls                "                >                                                7                                                <                source                                                src                =                "                {{videoFile.link}}?play=true                "                                                type                =                "                {{videoFile.type}}                "                                                />                                                8                                                <!-- Same equally: -->                                                9                                                <!-- <source src="{{fileURL videoFile}}?play=true" type="{{videoFile.type}}" /> -->                                                ten                                                </                video                >                                                11                                </                template                >                          
          

Shared code:

            
                              1                import                                                {                                                Shooting star                                                }                                                from                                                'shooting star/meteor'                ;                                                2                                import                                                {                                                FilesCollection                                                }                                                from                                                'shooting star/ostrio:files'                ;                                                3                4                                const                                                Images                                                =                                                new                                                FilesCollection                (                {                collectionName                :                                                'Images'                }                )                ;                                                five                                const                                                Videos                                                =                                                new                                                FilesCollection                (                {                collectionName                :                                                'Videos'                }                )                ;                                                half dozen                7                                if                                                (                Meteor                .                isServer                )                                                {                                                viii                                                // Upload sample files on server's startup:                                                9                                                Meteor                .                startup                (                (                )                                                =>                                                {                                                10                                                Images                .                load                (                'https://raw.githubusercontent.com/VeliovGroup/Meteor-Files/chief/logo.png'                ,                                                {                                                11                                  fileName                :                                                'logo.png'                                                12                                                }                )                ;                                                xiii                                                Videos                .                load                (                'http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_5mb.mp4'                ,                                                {                                                fourteen                                  fileName                :                                                'Big-Buck-Bunny.mp4'                                                15                                                }                )                ;                                                xvi                                                }                )                ;                                                17                xviii                                                Meteor                .                publish                (                'files.images.all'                ,                                                function                                                (                )                                                {                                                19                                                return                                                Images                .                find                (                )                .                cursor                ;                                                xx                                                }                )                ;                                                21                22                                                Meteor                .                publish                (                'files.videos.all'                ,                                                role                                                (                )                                                {                                                23                                                return                                                Videos                .                find                (                )                .                cursor                ;                                                24                                                }                )                ;                                                25                                }                                                else                                                {                                                26                                                // Subscribe to file'southward collections on Client                                                27                                                Meteor                .                subscribe                (                'files.images.all'                )                ;                                                28                                                Falling star                .                subscribe                (                'files.videos.all'                )                ;                                                29                                }                          
          

Client's code:

            
                              ane                Template                .                file                .                helpers                (                {                                                2                                                imageFile                (                )                                                {                                                3                                                return                                                Images                .                findOne                (                )                ;                                                iv                                                }                ,                                                5                                                videoFile                (                )                                                {                                                6                                                return                                                Videos                .                findOne                (                )                ;                                                vii                                                }                                                8                                }                )                ;                          
          

For more expressive case see Streaming demo app

Download push button

Template:

            
                              1                <                template                                                proper noun                =                '                file                '                >                                                two                                                <                a                                                href                =                "                {{file.link}}?download=truthful                "                                                download                =                "                {{file.proper name}}                "                                                target                =                "                _parent                "                >                                                iii                {{file.name}}                4                                                </                a                >                                                v                                </                template                >                          
          

Shared code:

            
                              ane                import                                                {                                                Meteor                                                }                                                from                                                'meteor/shooting star'                ;                                                ii                                import                                                {                                                FilesCollection                                                }                                                from                                                'meteor/ostrio:files'                ;                                                three                                const                                                Images                                                =                                                new                                                FilesCollection                (                {                collectionName                :                                                'Images'                }                )                ;                                                four                5                                if                                                (                Meteor                .                isServer                )                                                {                                                6                                                // Load sample prototype into FilesCollection on server's startup:                                                vii                                                Meteor                .                startup                (                function                                                (                )                                                {                                                8                                                Images                .                load                (                'https://raw.githubusercontent.com/VeliovGroup/Meteor-Files/master/logo.png'                ,                                                {                                                9                                  fileName                :                                                'logo.png'                ,                                                ten                                  meta                :                                                {                }                                                xi                                                }                )                ;                                                12                                                }                )                ;                                                13                14                                                Meteor                .                publish                (                'files.images.all'                ,                                                function                                                (                )                                                {                                                15                                                return                                                Images                .                discover                (                )                .                cursor                ;                                                16                                                }                )                ;                                                17                                }                                                else                                                {                                                18                                                // Subscribe on the customer                                                19                                                Falling star                .                subscribe                (                'files.images.all'                )                ;                                                20                                }                          
          

Client's code:

            
                              1                Template                .                file                .                helpers                (                {                                                two                                                fileRef                (                )                                                {                                                3                                                render                                                Images                .                findOne                (                )                ;                                                4                                                }                                                five                                }                )                ;                          
          

For more expressive instance see Download demo

FAQ:

1. Where are files stored past default?: by default if config.storagePath isn't passed into Constructor it'south equals to assets/app/uploads and relative to running script:
   • a. On evolution stage: yourDevAppDir/.meteor/local/build/programs/server. Annotation: All files will be removed every bit presently as your application rebuilds or y'all run meteor reset. To keep your storage persistent during development employ an absolute path outside of your project binder, e.thousand. /data directory.
   • b. On production: yourProdAppDir/programs/server. Annotation: 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 do regular testing on virtual and real devices. To make sure Falling star-Files library runs smoothly in Cordova environment — enable withCredentials; enable {allowQueryStringCookies: true} and {allowedOrigins: truthful} on both Client and Server. For more details read Cookie's repository FAQ
3. How to intermission/continue upload and get progress/speed/remaining time?: meet Object returned from insert method
4. When using any of accounts packages - package accounts-base must be explicitly added to .falling star/packages above ostrio:files
5. cURL/Postal service uploads - Accept a look on Mail service-Case by @noris666
6. In Safari (Mobile and Desktop) for DDP chunk size is reduced by algorithm, due to fault thrown if frame is too large. Limit simultaneous uploads to 6 is recommended for Safari. This issue should be stock-still in Safari 11. Switching to http transport (which has no such issue) is recommended for Safari. See #458
7. Brand certain you're using single domain for the Meteor app, and the aforementioned domain for hosting Meteor-Files endpoints, see #737 for details
8. When proxying requests to Meteor-Files endpoint make sure protocol http/1.i is used, see #742 for details

Awards:

Get Support:

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

Demo application:

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

• pyfiles (falling star-python-files) Python Client for Meteor-Files package
• meteor-autoform-file - Upload and manage files with autoForm

Back up Meteor-Files project:

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

Contribution:

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

Supporters:

We would like to thank anybody who support this project. Because of those guys this project tin can take 100% of our attention.

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

velazquezscame1998.blogspot.com

Source: https://packosphere.com/ostrio/files

Share this post