Meteor-files: Handling package using angulaJs tecnology

[eeerrrttty]

Hello! First thanks for this amazing package, i searched in everywhere, this was the better i could find. Im starting an angularjs-meteor application, and the tutorial uses the depraceted packaged CFS... Now im wanting to integrate my angularjs-meteor application with your package, how would be my code to an simple upload from ? Let i show you my code:

<input type="file" ng-model="controler.file"> //HTML

My controler code is like that:

import angular from 'angular';
import angularMeteor from 'angular-meteor';

import template from './wrapPostenviar.html';
import './wrapPostenviar.css';

import { Meteor } from 'meteor/meteor';
import { name as Modals } from '../modals/modals';
import { Posts } from '../../../api/posts';
import { Accounts } from 'meteor/accounts-base';
//import { name as PostEnviar } from '../postEnviar/postEnviar';
//import { name as PostLista } from '../postLista/postLista';

class WrapPostenviar {
  constructor($scope, $reactive) {
    'ngInject';
    $reactive(this).attach($scope);
    this.file = {};
    this.post = {};
    this.helpers({
      posts() {
        return Posts.find({},{sort: { createdAt: -1 }});
      }
    });
  }

  submit() {
    this.owner = {owner: Meteor.userId()};
    this.username = {username: Meteor.users.findOne(Meteor.userId()).username};
    this.date = {createdAt: new Date};
    this.result = angular.extend(this.post, this.owner, this.username, this.date);
    Posts.insert(this.result);
    this.reset();
  }

  reset() {
    this.post = {};
  }
}

const name = 'wrapPostenviar';

// create a module
export default angular.module(name, [
  angularMeteor,
  'ui.materialize',
  Modals
//  PostEnviar
//  PostLista
]).component(name, {
  template,
  controllerAs: name,
  controller: WrapPostenviar
});

How could be my code to send this model 'this.file' to server and save as a path?

[dr-dimitru]

Hi @eeerrrttty ,

Sorry, I'm not familiar with Angular.
But as long as it JS, all you need is:

1. On submit or on change event of input[type="file"] field get the value as FileList
2. Pass each element of FileList to .insert() method of FilesCollection

[dr-dimitru]

@eeerrrttty any news on your end?

[dr-dimitru]

@eeerrrttty ?

[dr-dimitru]

Closed due to silence on issue owner end

[dr-dimitru]

@eeerrrttty reopened, sorry for delay

[dr-dimitru]

Moved to: https://github.com/VeliovGroup/Meteor-Files/issues/308

[BrianDAC]

Hi, @dr-dimitru, i have a question that is related to this topic, i have this Model schema
Post = {
title:String,
content:String,
images: [ String ]
}

I use angular too and i think i made to upload an image, but i want to save in Post.images, the path's of that images can you help me?

[dr-dimitru]

Hello @BrianDAC , cure I can help. Could you describe your current setup, and what you're expecting?

[BrianDAC]

Thanks @dr-dimitru, here is my setup.

Files:

• /imports
  --/collections
  ---images.js

const Images = new FilesCollection({
  debug:true,
  collectionName: 'Images',
  allowClientCode: false, // Disallow remove files from Client
  onBeforeUpload: function (file) {
    // Allow upload files under 10MB, and only in png/jpg/jpeg formats
    if (file.size > 1024*1024*10) {
      return 'Por favor, sube una imagen con tamaño menor a 10MB';
    }
    return true
  }
});

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

if (Meteor.isServer) {
  Meteor.publish('files.images.all', function () {
    return Images.find().cursor;
  });
}
export default Images

and my controller
-/client
--/controllers
---/postController.js

$scope.createPost = function () {
   var imagesFiles = $(".inputImages")[0].files // here i got all the image files
   $scope.newPost.images = []

    for (var key in imageFiles) {
        var selectedFile =  imageFiles[key];
        //now i covert the image to base64 with a pre-configured function
       // PD. i dont know if this is the best way to upload one image
    var timeStamp = new Date().valueOf();
    selectedFile.convertToBase64(function(base64) {
        var upload = Images.insert({
        file: base64,
        isBase64: true,
        fileName: 'imagen' + timeStamp.toString()
        });
    console.log(upload)
        // Here i want to push the path of the upload file to $scope.newPost.images
        // i want the result something like this
        // console.log($scope.newPost.images) 
        // ["/assets/app/uploads/images/image1.jpg", "another path", "some other paths"...]
        // because then i want to put then in the HTML
        // so i can put the value in img tag for example
        //  <img src="{{ newPost.images[0] }}">
        })
    }

    Meteor.call("posts.insert", $scope.newPost)
}

when i upload an image in the terminal it shows me this

[FilesCollection] [File Start Method] image1 - SAkcrqCT6tqBK5mkS
[FilesCollection] [Upload] [Start Method] Got #-1/1 chunks, dst: image1
[FilesCollection] [Upload] [DDP] Got #1/1 chunks, dst: image1
[Upload] [DDP] Got #-1/1 chunks, dst: image1
[Upload] [finish(ing)Upload] -> assets/app/uploads/Images/SAkcrqCT6tqBK5mkS
[Upload] [finish(ed)Upload] -> assets/app/uploads/Images/SAkcrqCT6tqBK5mkS
[_preCollectionCursor.observe] [removed]: SAkcrqCT6tqBK5mkS

[dr-dimitru]

Hi @BrianDAC ,

1. Files is not accessible directly by path (this field is for server usage)
2. Use onUploaded hook, see example below
3. You don't have to convert file to base64 before upload

$scope.createPost = function () {
   var imagesFiles = $(".inputImages")[0].files // here i got all the image files
   $scope.newPost.images = []

    for (var key in imageFiles) {
        var selectedFile =  imageFiles[key];
    var timeStamp = new Date().valueOf();
    selectedFile.convertToBase64(function(base64) {
        var upload = Images.insert({
        file: base64,
        isBase64: true,
        fileName: 'imagen' + timeStamp.toString(),
                onUploaded: function (error, fileObj) {
                    if (error) {
                      alert('Error during upload: ' + error);
                    } else {
                      alert(Images.link(fileObj)); // <-- Link to file
                    }
                    template.currentFile.set(false);
                }
        });
    console.log(upload)
        })
    }

    Meteor.call("posts.insert", $scope.newPost);
}

[BrianDAC]

Thanks @dr-dimitru it works!

[dr-dimitru]

@BrianDAC I'm glad it helped you :)

Please, support this project by:

• Star on GitHub
• Star on Atmosphere
• Share on Facebook and Twitter
• Donate via PayPal