Задать вопрос
buurz
@buurz
angular.js

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

Привет, всем. Проблема такая не могу понять как лучше подцепить несколько файлов/картинок .
Имеем, 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


Я хотел бы иметь возможность вкладывать несколько изображений, кто-либо знает как это сделать?
  • Вопрос задан
  • 3952 просмотра
1 комментарий
Подписаться 3 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
FanKiLL
@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...
Ответ написан
Комментировать
Комментировать
buurz
@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
    }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Angular frontend developer middle+
IT Force • Краснодар
от 200 000 ₽
Разработчик мобильных приложений (Dart)
Инсис • Екатеринбург
от 80 000 до 120 000 ₽
Backend Developer (PHP)/Fullstack
Wiregate
от 1 800 до 2 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Django
26 апр. 2024, в 09:18
500 руб./в час
Devops для видео сервиса
26 апр. 2024, в 06:46
1500 руб./в час
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Ещё заказы