Как загружать несколько файлов Carrierwave/angular +rails посредством json?

Question

[buurz]

Привет, всем. Проблема такая не могу понять как лучше подцепить несколько файлов/картинок .
Имеем, back-end = RubyOnRails (gem Carrierwave), front-end = angularJs.
Создал директиву в ангулар, с помощью которой отправляю посредством json данные на сервак.

app.directive 'uploadImage', ->
    return{
      restrict: 'A'
      link:(scope,elem)->
        reader = new FileReader()
        reader.onload =(e)->
          scope.iFile = btoa(e.target.result)
          scope.$apply()

        elem.on 'change', ->
          scope.iFile=''
          file = elem[0].files[0]
          scope.iFilesize = file.size
          scope.iFiletype = file.type
          scope.iFilename = file.name
          scope.$apply()
          reader.readAsBinaryString(file)
    }

При оформлении заказа можно приложить фото/изображение, изображение сначала кодируется с помощью base64, присоединяется к остальной data и отправляется на сервак, там декодируется и присоединяется опять в требуемом для carrierwave виде.
Action Create in TasksController:

def create
    params[:task][:pict] = parse_image_data(params[:iFile]) if params[:iFile]

    @task = Task.new(task_params)
    
    if @task.save
      clean_tempfile
      render_with_protection @task.to_json, {status: :created, location: @task }
    else
      render_with_protection @task.errors.to_json, {status: :unprocessable_entity }
    end
  end


private

def parse_image_data(image_data)
      Rails.logger.info 'decoding now'
      decoded_data = Base64.decode64(image_data) # json parameter set in directive scope
      # create 'file' understandable by Carrierwave
      @data = StringIO.new(decoded_data)
      @tempfile = Tempfile.new('task-image')
      @tempfile.binmode
      @tempfile.write decoded_data
      @tempfile.rewind
   
      ActionDispatch::Http::UploadedFile.new(
        :tempfile => @tempfile,
        :content_type => params[:itype],
        :filename => params[:iname]
      )
    end

Я хотел бы иметь возможность вкладывать несколько изображений, кто-либо знает как это сделать?

Comments

[buurz]

У меня есть примерное представление как должно это работать. Несколько изображений объединяются в массив или хеш, отправляются вместе с остальными данными на сервак, там преобразуются в виде, необходимом для CarrierWave и прикрепляются к модели.

Answer 1

[FanKiLL]

Отвечая на ваш второй вопрос. Создайте полиморфную модель Image
и крепите сколько захотите к Task через has_many. И не только к таскам - это же полиморфная модель.
Например

class Image < ActiveRecord::Base
  belongs_to :imageable, polymorphic: true

  mount_uploader :picture, ImageUploader #ваш аплоадер
end

class Task < ActiveRecord::Base
  has_many :images, as: :imageable, dependent: :destroy
end

миграция для Image

class CreateImages < ActiveRecord::Migration
  def change
    create_table :images do |t|
      t.string :picture
      t.integer :imageable_id
      t.string :imageable_type
      t.timestamps
    end

    add_index :images, [:imageable_id, :imageable_type]
  end
end

Теперь к таскам вы можете прикреплять сколько захотите картинок например

@task = Task.new
@task.images <<  Image.new
@task.images <<  Image.new

И так далее.

Насчёт первого вопроса посмотрите ответ тут - stackoverflow.com/questions/23899860/actiondispatc...

Answer 2

[buurz]

Благодарю за ответ. Но видимо я не правильно выразился.
У меня всего один вопрос. Как с помощью AngularJS прикрепить несколько изображений к модели . На данный момент у меня получилось прикрепить лишь одно изображение. Пробовал поменять директиву, но не помогло :

app.directive 'uploadImage', ->
    return{
      restrict: 'A'
      link:(scope,elem)->
        elem.on 'change', ->
          i = 0

          while i < elem.length

            x = 0

            while x < elem[i].files.length
              reader = new FileReader()
              reader.onload =(e)->
                scope.iFile = btoa(e.target.result)
                scope.$apply()
              file = elem[i].files[x]
              scope.iFile = ""
              scope.iFilesize = file.size
              scope.iFiletype = file.type
              scope.iFilename = file.name
              scope.$apply()
              reader.readAsBinaryString file
              x++
            i++
          return
    }