Использование ng-file-upload с Rails carrierwave gem для загрузки нескольких файлов
я пытаюсь объединить ng-file-загрузить и carrierwave для загрузки нескольких файлов, но контроллер на стороне сервера получает только один файл (последний элемент выбранных файлов).
на стороне клиента (ссылка)
HTML-код
<button type="file" ng-model="files" ngf-select ngf-multiple="true">Upload</button>
js
var upload = function (files, content) {
return Upload.upload({
url: 'MY_CONTROLLER_URL',
file: files, // files is an array of multiple files
fields: { 'MY_KEY': 'MY_CONTENT' }
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('files ' + config.file.name + ' uploaded. Response: ' + data);
}).error(function (data, status, headers, config) {
console.log('error status: ' + status);
});
};
console.log(files)
печать Массив[Файл, Файл, ...] (Браузер: FireFox). Так на клиенте сторона получает выбранные файлы. На GitHub страница ng-file-загрузить говорит, что он поддерживает такие файлы html5
.
сервер (ссылка)
posts_controller.rb
def create
@post = Post.new(post_params)
@post.attaches = params[:file]
@post.save
render json: @post
end
private
def post_params
params.require(:post).permit(:content, :file)
end
здесь @post.attaches
это вложения поста и params[:file]
отправляется со стороны клиента на Upload.upload
.
я хочу сохранить массив данных в @post.attaches
, но params[:file]
содержит только один файл из выбранных файлов.
puts params[:file]
принты:
#<ActionDispatch::Http::UploadedFile:0x007fddd1550300 @tempfile=#<Tempfile:/tmp/RackMultipart20150812-2754-vchvln.jpg>, @original_filename="Black-Metal-Gear-Rising-Wallpaper.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name="file"; filename="Black-Metal-Gear-Rising-Wallpaper.jpg"rnContent-Type: image/jpegrn">
это показывает, что есть только один файл в params[:file]
. Я не уверен, что что-то не так с использованием этого параметра.
как я могу решить эту проблему?
Вот мой post.rb
модель attach_uploader.rb
(созданные carrierwave) для справки, если нужны:
пост.rb
class Post < ActiveRecord::Base
mount_uploaders :attaches, AttachUploader
end
attach_uploader.rb
class AttachUploader < CarrierWave::Uploader::Base
storage :file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
end
и @post.attaches
столбец в базе данных posts
добавляется
rails g migration add_attaches_to_posts attaches:json
1 ответов
я, наконец, нашел способ решить мою проблему. Спасибо carrierwave и danialfarid ' s удивительный ng-file-загрузить.
моя проблема заключалась в том, что я не мог отправить все выбранные файлы. Мое решение было
var upload = function (files) {
var names = [];
for (var i = 0; i < files.length; ++i)
names.push(files[i].name);
return Upload.upload({
url: '/api/v1/posts',
file: files,
fileFormDataName: names
});
}
тогда в моем рейлинги controller.rb
file_arr = params.values.find_all { |value| value.class == ActionDispatch::Http::UploadedFile }
if @post.save
unless file_arr.empty?
file_arr.each { |attach|
@attach = Attach.new
@attach.filename = attach
@attach.attachable = @post
@attach.save
}
end
render json: @post
end
я создал массив для хранения всех моих файлов из params
.
я попытался использовать столбец с mount_uploaders
of carrierwave для хранения массива файлов, но это не сработало. Поэтому я создаю таблицу файлов под названием attaches
сохранить мои файлы
class CreateAttaches < ActiveRecord::Migration
def change
create_table :attaches do |t|
t.string :filename
t.references :attachable, polymorphic: true
t.timestamps null: false
end
end
end
здесь attachable
используется для хранения идентификатора и типа. (Здесь мои вложения принадлежат к некоторому сообщению на моем форуме.)
Вот некоторые подробности о настройке при необходимости
attach.rb
(модель)
class Attach < ActiveRecord::Base
mount_uploader :filename, AttachUploader
belongs_to :attachable, :polymorphic => true
end
post.rb
(модель)
class Post < ActiveRecord::Base
has_many :attaches, as: :attachable, dependent: :destroy
end
post_serializer.rb
class PostSerializer < ActiveModel::Serializer
has_many :attaches
end
attach_serializer.rb
class AttachSerializer < ActiveModel::Serializer
attributes :url, :name
def url
object.filename.url
end
def name
object.filename_identifier
end
end
затем в html
файл может иметь код строки
<div ng-repeat="attach in post.attaches">
<img ng-src="{{attach.url}}" type="file" height="180" width="320" accept="image/*"/>
<a target="_self" ng-show="attach.url" href="{{attach.url}}" download="{{attach.name}}">{{attach.name}}<p></p></a>
</div>
где мои вложения по умолчанию используются для изображений.