0

Ребята подскажите пожалуйста как добавить к товару изображения через форму добавления https://jsfiddle.net/2gvcfqh5

// коллекция
Items = new Mongo.Collection('items');

// менеджер шаблона
Template.itemAdd.events({
  'submit form': function(e) {
    e.preventDefault();
    function slugify(text) {
        return text.toString().toLowerCase()
          .replace(/\s+/g, '-')        // Replace spaces with -
          .replace(/[^\w\-]+/g, '')   // Remove all non-word chars
          .replace(/\-\-+/g, '-')      // Replace multiple - with single -
          .replace(/^-+/, '')          // Trim - from start of text
          .replace(/-+$/, '');         // Trim - from end of text
    };

    var imgArr = document.getElementById("imgItem").files;
    var item = {
      price: $(e.target).find('[name=price]').val(),
      title: $(e.target).find('[name=imgItem]').val(),
      titleSlug: slugify($(e.target).find('[name=title]').val()),
      img: imgArr
    };

    Meteor.call('itemInsert', item, function(error, result) {
      if (error) {
        return throwErrors(error.reason);
      }

      Router.go('itemPage', {_id: result._id});

    });
  }
});


//публикация
Meteor.publish('items', function () {
  return Items.find();
});

Meteor.methods({
  itemInsert: function (itemAttributes) {
    //check(Meteor.userId(), String);
    check(itemAttributes, {
      title: String,
      price: String,
      titleSlug: String,
      img_src: Object,
    });

    var item = _.extend(itemAttributes, {
      createdAt: new Date(),
    });

    var itemId = Items.insert(item);
    return {
      _id: itemId
    };
  }
});


// router

Router.configure({
  layoutTemplate: 'layout',
  loadingTepmlate: 'loading',
  waitOn: function () {
    return Meteor.subscribe('items');
  }
});

Router.route('/', {
  name: 'itemsList'
});

Router.route('/item/:_id',{
  name: 'itemPage',
  data: function () {
    return Items.findOne(this.params._id);
  }
});

Router.route('/add',{
  name: 'itemAdd'
});

Router.onBeforeAction('loading');
<template name="itemPage">
  <h1>{{title}}</h1>
  <p><span class="fz24">{{price}}</span> <i class="glyphicon glyphicon-ruble"></i></p>
</template>

1 ответ 1

0

Если нужно ссылку добавить на изображение, то можно так:

<template name="itemPage">

<h1>{{title}}</h1>
  <p><span class="fz24">{{price}}</span> <i class="glyphicon glyphicon-ruble"></i></p>

<!-- форма добавления url изображения -->
<form id="addPic">
    <div class="input-group">

        <input type="text" name="picLink" class="form-control">
        <span class="input-group-btn" tabindex="-1">
            <button type="submit" class="file-upload-button btn btn-blue">Указать url изображения</button>
        </span>

    </div>
</form>
</template>
<!-- /форма добавления url изображения -->


Template.itemPage.events({
    'submit #addPic'(event) {
        // прерываем дефолтный обработчик
        event.preventDefault();
        const target = event.target;
        // получаем url
        const pic = target.picLink.value;
        // обновляем Item в базе данных
        Items.update({"_id" : this._id}, {$set: {"picLink" : pic}});
    }
});
4
  • Спасибо за ответ, но мне нужно чтобы можно было добавлять не сколько изображений к товару, вызвать input добавить 5 фоток, отобразить их, потом при публикации добавить фотки в хранилище и в базу записать путь к ним, получается массив ссылками на фотки, а потом циклом выводить путь к картинкам. Есть идеи? 14 ноя 2016 в 18:03
  • @ВасяСмит так принцип у тебя будет такой же, только нужен множественный выбор, для удобства можно использовать html5 и drag and drop, например немного модефицировать вот это дело: blogs.sitepointstatic.com/examples/tech/filedrag/1/index.html 16 ноя 2016 в 18:13
  • @ВасяСмит в предыдущем посту по ссылке там внизу ссылка на исходники. А так временное хранилище, до загрузки на сервер, можешь использовать Сессию, в ней храни массив с ссылками. Еще тут: html5demos.com/dnd-upload Или тут посмотри, что то подобное твоей задаче реализовано непосредственно на метеоре github.com/comerc/meteor-demo-cfs 16 ноя 2016 в 18:18
  • Спасибо за помощь) 17 ноя 2016 в 12:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.