Meteor-Files: Meteor Method not found

Hello,

I’m currently trying to implement your great work into my app, but I’m getting stuck and I’m pretty sure it’s an easy fix, since I have tried numerous packages for file upload, and I had succeeded in making yours work, but now I can’t seem to remember what I did to fix this in the first time (I had the exact same issue).

So here is my problem :

Each time I try uploading an image, I get this error in the alert : ‘MeteorFileWrite7e458a7a8b08855665e6d1f9545…6020a5e65dfdd026cfcaaea01890d181’ not found [404] and this one is the console : ‘MeteorFileAbort7e458a7a8b08855665e6d1f95453b9fa6020a5e65dfdd026cfcaaea01890d181’ not found [404]

I know it means that it can’t find a method, and I must have written something on the worng side of the app, but I can’t find what exactly.

Here is my image.js file (on shared side) :

export const Images = new FilesCollection({
  storagePath: 'assets/app/uploads/Images',
  downloadRoute: '/uploads',
  collectionName: 'Images',
  allowClientCode: true, // Disallow remove files from Client
  public: true,
  debug: true,
  onBeforeUpload: function (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;
    } else {
      return 'Please upload image, with size equal or less than 10MB';
    }
  }
});

//Images.collection.attachSchema(new SimpleSchema(Images.schema));

if (Meteor.isServer) {
  Meteor.publish('images', function imagesPublication() {
    return Images.find({
      $or: [
        { private: { $ne: true } },
        { owner: this.userId },
      ],
    });
  });
  Images.allow({
    insert: function() {
      return true;
    },
    update: function() {
      return true;
    },
    remove: function() {
      return true;
    }
  });
}

if (Meteor.isClient) {
  Meteor.subscribe('images');
}

I have a template newCloth.html with a form in which I hope to be able to uplaod a n image :

<template name="newCloth">
        {{# autoForm collection=Clothes id="newClothForm" type="insert"}}
        <fieldset>
            (form code...)
            {{#if currentUpload}}
                {{#with currentUpload}}
                    <div class="file-field input-field">
                        Uploading <b>{{file.name}}</b> : 
                        <span id="progress">{{progress}} %</span>
                    </div>
                {{/with}}
            {{else}}
                    <div class="file-field input-field">
                        <div class="btn">
                            <span id="progress">Upload</span>
                            <input id="fileInput" type="file" /><br/>
                        </div>
                    </div>
                    <br/><br/><br/>
            {{/if}}
            <button type="submit" class="btn btn-primary">{{ getSubmit }}</button>
            <button type="reset" class="btn btn-default">{{ getReset }}</button>
        </fieldset>
        {{/autoForm}}
</template>

and here are my helpers and events for the template (newCloth.js) :

import { Clothes } from '../../api/cloth.js';
import { Images } from '../../api/image.js';
import './newCloth.html';


Template.newCloth.onRendered(function() {
    //code needed so the select displays with materialize
});

Template.newCloth.onCreated(function () {
    this.currentUpload = new ReactiveVar(false);
});

Template.newCloth.helpers({
    Clothes: function(){
        return Clothes;
    },
    currentUpload: function () {
        return Template.instance().currentUpload.get();
    },
    (...)
});

Template.newCloth.events({
  'change #fileInput': function (e, template) {
    if (e.currentTarget.files && e.currentTarget.files[0]) {
      // We upload only one file, in case 
      // multiple files were selected
      var upload = Images.insert({
        file: e.currentTarget.files[0],
        streams: 'dynamic',
        chunkSize: 'dynamic'
      }, false);

      upload.on('start', function () {
        template.currentUpload.set(this);
      });

      upload.on('uploaded', function (error, fileObj) {
        if (!error) {
          sweetAlert('File "' + fileObj.name + '" successfully uploaded');
        }
      });

      upload.on('error', function (error, fileObj) {
        sweetAlert("Error !", 'Error during upload', "error");
        console.log(error);
      });

      upload.start();
    }
  }
});

var newClothHooks = {
    (hooks for submitting...)
}
AutoForm.addHooks('newClothForm', newClothHooks);

I’m sorry that’s a lot of code, but I’m desperate, I’ve been working on image upload for a week now and everything seems to fail at some point…

Thank you for your work, and for your time and help in advance.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 55 (29 by maintainers)

Most upvoted comments

Hey @dr-dimitru good news, my team mate found the problem : it was exactly as I thought at first, I just forgot something. I hadn’t imported the collection on the server, which explain the lack of server logs and the Meteor Method not found.

So I just added « import { Images } from ‘…/imports/api/images/image.js’; » on server/main.js, and now everything works fine.

I’m really sorry for the inconvenience, and want to thank you for your patience and your time, you did an amazing work, thank you.

Now I just have to make it work with the rest of the project.

Sorry again, and thanks.

@TheYojimbo you’re welcome thank you for update from your end.