michelk
michelk

Reputation: 97

Meteor: Uploading files to a folder

I'm new on Meteor. I try to find a way to upload files I followed this tuto using fs collections step by step: http://meteortuts.com/category/addanuploader However, it doesn't work. Nothing happened! Is there something missing? I tried it locally and deploying it on apps.meteor.com. On "uploadexample.meteor.com", there is an error because the site don't recognize the "~" character. Locally, the page is displayed but nothing is uploaded. Any idea? Thank you for your replies,

Michelk Here is my code:

HTML:

    <head>
  <title>uploadexample</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>
  <div class="container">
    {{> hello}}
  </div>

</body>

<template name="hello">
  <div class="panel panel-default push-down">
    <div class="panel-heading">
      <h3 class="panel-title">Uploads Section</h3>
    </div>
    <div class="panel-body">
      <p>
        Add Files
        <span class="btn btn-default btn-file">
          <input multiple type="file" name="file" class="file fileInput"/>
        </span>
      </p>
    </div>
    <div class="panel-footer">
        <div class="col-md-9">
          <table class="table table-hover table-striped table-bordered">
            <thead>
            <th>Name</th>
            <th>Download</th>
            </thead>
            <tbody>
              {{#each uploads}}
              <tr>
                <td>{{name}}</td>
                <td><a href="{{url download=true}}" type="button" class="btn btn-default">
                  Download
                </a></td>
              </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
    </div>
  </div>
</template>

The js file:

    Uploads = new FS.Collection('uploads',{
  stores:[new FS.Store.FileSystem('uploads',{path:'~/projectUploads'})]
});
if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault("counter", 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get("counter");
    },
    uploads:function(){
      return Uploads.find();
    }
  });

  Template.hello.events({
    'change .fileInput':function(event,tmpl){
      FS.Utility.eachFile(event,function(file){
        var fileObj = new FS.File(file);
        Uploads.insert(fileObj),function(err){
          console.log(err);
        }
      })
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

The meteor list package:

...tuto meteor/upload fs/uploadexample$ meteor list
bootstrap              1.0.1  Front-end framework from Twitter
cfs:filesystem         0.1.1  Filesystem storage adapter for CollectionFS
cfs:standard-packages  0.5.3  Filesystem for Meteor, collectionFS
meteor-platform        1.2.1  Include a standard set of Meteor packages in your app
twbs:bootstrap         3.3.2  Bootstrap (official): the most popular HTML/CSS/JS framework for responsive, mobile first projects

Upvotes: 3

Views: 1662

Answers (1)

Nikolay Anastasov
Nikolay Anastasov

Reputation: 21

I've been searching kinda the same thing as yours. When your app is running locally with meteor it really makes ~/projectUploads into your local home folder obviously. But when you want your app to be running on meteor hosting meteor deploy example.meteor.com, you should edit your path to ./projectUploads. Everything should work fine. fingers crossed

Upvotes: 2

Related Questions