meteor
फ़ाइल अपलोड करना

टिप्पणियों

सर्वर / ग्राहक

फ़ाइलें अपलोड करना आसान या वास्तव में जटिल हो सकता है, यह इस बात पर निर्भर करता है कि आप क्या करना चाहते हैं। सामान्य तौर पर, किसी फ़ाइल को स्वयं ट्रांसफर करना उतना मुश्किल नहीं है। लेकिन अटैचमेंट्स, बाइनरी फाइल्स और इस तरह के किनारे बहुत सारे हैं। और असली स्टिकिंग पॉइंट क्षैतिज स्केलिंग है, और एक समाधान बनाता है जो तब काम करता है जब सर्वर को दूसरे, तीसरे और शून्य समय पर क्लोन किया जाता है।

चलो एक मूल सर्वर / क्लाइंट अपलोड मॉडल के साथ शुरू करते हैं। हम दस्तावेज़ ऑब्जेक्ट मॉडल में एक फ़ाइल इनपुट तत्व जोड़कर शुरू करते हैं।

<template name="example">
  <input type=file />
</template>

फिर अपने नियंत्रक के भीतर एक इनपुट तत्व के लिए एक घटना संलग्न करें, और स्थानांतरण शुरू करने के लिए एक स्थानीय उल्का विधि `` startFileTransfer '' को कॉल करें।

// client/example.js
Template.example.events({
  'change input': function(ev) {  
    _.each(ev.srcElement.files, function(file) {
      Meteor.startFileTransfer(file, file.name);
    });
  }
});

// client/save.js
/**
 * @blob (https://developer.mozilla.org/en-US/docs/DOM/Blob)
 * @name the file's name
 * @type the file's type: binary, text (https://developer.mozilla.org/en-US/docs/DOM/FileReader#Methods) 
 *
 * TODO Support other encodings: https://developer.mozilla.org/en-US/docs/DOM/FileReader#Methods
 * ArrayBuffer / DataURL (base64)
 */
Meteor.startFileTransfer = function(blob, name, path, type, callback) {
  var fileReader = new FileReader(),
    method, encoding = 'binary', type = type || 'binary';
  switch (type) {
    case 'text':
      // TODO Is this needed? If we're uploading content from file, yes, but if it's from an input/textarea I think not...
      method = 'readAsText';
      encoding = 'utf8';
      break;
    case 'binary': 
      method = 'readAsBinaryString';
      encoding = 'binary';
      break;
    default:
      method = 'readAsBinaryString';
      encoding = 'binary';
      break;
  }
  fileReader.onload = function(file) {
    Meteor.call('saveFileToDisk', file.srcElement.result, name, path, encoding, callback);
  }
  fileReader[method](blob);
}

क्लाइंट तब saveFileToDisk सर्वर विधि को कॉल करेगा, जो वास्तविक हस्तांतरण करता है और डिस्क में सब कुछ डालता है।

// 
/**
 * TODO support other encodings:
 * http://stackoverflow.com/questions/7329128/how-to-write-binary-data-to-a-file-using-node-js
 */
Meteor.methods({
  saveFileToDisk: function(blob, name, path, encoding) {
    var path = cleanPath(path), fs = __meteor_bootstrap__.require('fs'),
      name = cleanName(name || 'file'), encoding = encoding || 'binary',
      chroot = Meteor.chroot || 'public';
    // Clean up the path. Remove any initial and final '/' -we prefix them-,
    // any sort of attempt to go to the parent directory '..' and any empty directories in
    // between '/////' - which may happen after removing '..'
    path = chroot + (path ? '/' + path + '/' : '/');

    // TODO Add file existance checks, etc...
    fs.writeFile(path + name, blob, encoding, function(err) {
      if (err) {
        throw (new Meteor.Error(500, 'Failed to save file.', err));
      } else {
        console.log('The file ' + name + ' (' + encoding + ') was saved to ' + path);
      }
    }); 

    function cleanPath(str) {
      if (str) {
        return str.replace(/\.\./g,'').replace(/\/+/g,'').
          replace(/^\/+/,'').replace(/\/+$/,'');
      }
    }
    function cleanName(str) {
      return str.replace(/\.\./g,'').replace(/\//g,'');
    }
  }
});

यह नंगे हड्डियों के दृष्टिकोण की तरह है, और यह वांछित होने के लिए बहुत कुछ छोड़ देता है। यह शायद CSV फ़ाइल या कुछ और अपलोड करने के लिए अच्छा है, लेकिन यह इसके बारे में है।

Dropzone (लोहे के साथ: रूटर)

यदि हम कुछ और अधिक पॉलिश करना चाहते हैं, तो एक एकीकृत Dropzone UI और REST समापन बिंदु के साथ, हमें UI सहायता के साथ कस्टम REST मार्गों और पैकेजों को जोड़ना शुरू करना होगा।

आइए आयरन राउटर और ड्रॉपज़ोन आयात करके शुरू करें।

 meteor add iron:router
 meteor add awatson1978:dropzone

और अपलोड url मार्ग को कॉन्फ़िगर करें जो ड्रॉपज़ोन सहायक में निर्दिष्ट है।

Router.map(function () {
    this.route('uploads', {
      where: 'server',
      action: function () {
        var fs = Npm.require('fs');
        var path = Npm.require('path');
        var self = this;

        ROOT_APP_PATH = fs.realpathSync('.');

        // dropzone.js stores the uploaded file in the /tmp directory, which we access
        fs.readFile(self.request.files.file.path, function (err, data) {

          // and then write the file to the uploads directory
          fs.writeFile(ROOT_APP_PATH + "/assets/app/uploads/" +self.request.files.file.name, data, 'binary', function (error, result) {
            if(error){
              console.error(error);
            }
            if(result){
              console.log('Success! ', result);
            }
          });
        });
      }
    });
  });

ठंडा! हमारे पास snazzy UI के साथ एक फ़ाइल अपलोडर और एक प्रोग्राम योग्य REST समापन बिंदु है। दुर्भाग्य से, यह विशेष रूप से अच्छा नहीं है।

Filepicker.io

चीजों को पैमाने पर रखने के लिए, हमें अपने सर्वर पर स्थानीय भंडारण का उपयोग बंद करना होगा, और या तो एक समर्पित फ़ाइल भंडारण सेवा का उपयोग करना शुरू करना होगा या क्षैतिज भंडारण परत को लागू करना होगा। स्केलेबल फ़ाइल भंडारण के साथ आरंभ करने का सबसे आसान तरीका Filepicker.io जैसे समाधान का उपयोग करना है, जो S3, Azure, Rackspace, और Dropbox का समर्थन करता है। भारोत्तोलक थोड़ी देर के लिए एक लोकप्रिय फिलीपिक्सर एकरूपता रहा है।

meteor add mrt:filepicker

Filepicker पैटर्न अन्य समाधानों की तुलना में अलग है, क्योंकि यह वास्तव में 3rd पार्टी एकीकरण के बारे में है। एक फाइलपिकर इनपुट को जोड़ने से शुरू करें, जिसे आप देखेंगे कि डेटा- * विशेषताओं पर बहुत अधिक निर्भर करता है, जो कि मेटाडोर एप्लिकेशन में एक काफी असामान्य पैटर्न है।

<input type="filepicker"
  id="filepickerAttachment"
  data-fp-button-class="btn filepickerAttachment"
  data-fp-button-text="Add image" 
  data-fp-mimetypes="image/*"
  data-fp-container="modal"
  data-fp-maxsize="5000000" 
  data-fp-services="COMPUTER,IMAGE_SEARCH,URL,DROPBOX,GITHUB,GOOGLE_DRIVE,GMAIL">

आप एक एपीआई कुंजी सेट करना चाहते हैं, फाइलपिक विजेट का निर्माण करेंगे, इसे ट्रिगर करेंगे और इसका आउटपुट देखेंगे।

if(Meteor.isClient){
  Meteor.startup(function() {
    filepicker.setKey("YourFilepickerApiKey");
  });
  Template.yourTemplate.rendered = function(){
    filepicker.constructWidget($("#filepickerAttachment"));
  }
  Template.yourTemplate.events({
  'change #filepickerAttachment': function (evt) {
    console.log("Event: ", evt, evt.fpfile, "Generated image url:", evt.fpfile.url);
  });
});

CollectionFS

हालाँकि, यदि आप संग्रहण के बारे में वास्तव में गंभीर हैं, और आप लाखों छवियों को संग्रहीत करना चाहते हैं, तो आपको Mongo के ग्रिडफ़्फ़ इन्फ्रास्ट्रक्चर का लाभ उठाने की आवश्यकता है, और अपने आप को एक स्टोरेज लेयर बनाएं। उसके लिए, आपको उत्कृष्ट CollectionFS सबसिस्टम की आवश्यकता होगी।

आवश्यक पैकेजों को जोड़कर शुरू करें।

meteor add cfs:standard-packages
meteor add cfs:filesystem

और अपने ऑब्जेक्ट मॉडल में एक फ़ाइल अपलोड तत्व जोड़ना।

<template name="yourTemplate">
    <input class="your-upload-class" type="file">
</template>

फिर क्लाइंट पर एक ईवेंट कंट्रोलर जोड़ें।

Template.yourTemplate.events({
    'change .your-upload-class': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var yourFile = new FS.File(file);
            yourFile.creatorId = Meteor.userId(); // add custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // do callback stuff
                }
            });
        });
    }
});

और अपने सर्वर पर अपने संग्रह को परिभाषित करें:

YourFileCollection = new FS.Collection("yourFileCollection", {
    stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})]
});
YourFileCollection.allow({
    insert: function (userId, doc) {
        return !!userId;
    },
    update: function (userId, doc) {
        return doc.creatorId == userId
    },
    download: function (userId, doc) {
        return doc.creatorId == userId
    }
});

इस बेहतरीन उदाहरण के लिए आरजे को धन्यवाद। आप सभी CollectionFS क्या कर सकते हैं, इस बारे में अधिक जानकारी के लिए संपूर्ण CollectionFS दस्तावेज़ीकरण की जाँच करना चाहते हैं।

सर्वर अपलोड

निम्न स्क्रिप्ट सर्वर फाइल सिस्टम से फाइल को सर्वर में अपलोड करने के लिए हैं। अधिकतर कॉन्फिग फाइल्स और फाइलवॉचर्स के लिए।

//https://forums.meteor.com/t/read-file-from-the-public-folder/4910/5

// Asynchronous Method.
Meteor.startup(function () {
    console.log('starting up');

    var fs = Npm.require('fs');
    // file originally saved as public/data/taxa.csv
    fs.readFile(process.cwd() + '/../web.browser/app/data/taxa.csv', 'utf8', function (err, data) {
        if (err) {
            console.log('Error: ' + err);
            return;
        }

        data = JSON.parse(data);
        console.log(data);
    });
});


// Synchronous Method.
Meteor.startup(function () {
    var fs = Npm.require('fs');
    // file originally saved as public/data/taxa.csv
    var data = fs.readFileSync(process.cwd() + '/../web.browser/app/data/taxa.csv', 'utf8');

    if (Icd10.find().count() === 0) {
        Icd10.insert({
            date:  new Date(),
            data:  JSON.parse(data)
        });
    }
});


Meteor.methods({
  parseCsvFile:function (){
    console.log('parseCsvFile');

    var fs = Npm.require('fs');
    // file originally saved as public/data/taxa.csv
    var data = fs.readFileSync(process.cwd() + '/../web.browser/app/data/taxa.csv', 'utf8');
    console.log('data', data);
  }
});