若干窮地に陥っています。Rails 4.2.3 を AngularJS と共に使用しています。関連するデータ モデルのネストされた属性をアップロードし、画像もアップロードする必要があるフォームがあります。私が見つけたように、AJAX リクエストを使用してファイルをアップロードするのは簡単な作業ではありません。これに対処するために ng-file-upload を使用していますが、基本的な使用上の問題がいくつかあります。
私のレールモデル:
class Job < ActiveRecord::Base
has_many :references, dependent: :destroy
accepts_nested_attributes_for :references, limit: 5
end
class Reference < ActiveRecord::Base
belongs_to :job
end
Rails は、フォームを送信するときに次の形式を想定しています。
Parameters: {"job"=>{"title"=>"Example Title", "company"=>"Example Company", "description"=>"Example Description", "references_attributes"=>{"0"=>{"reference"=>"Example Reference", "id"=>"1"}}, "image"=> #plus the image data here}
ng-file-upload では、ネストされた属性を含めることはほとんど不可能に思えます (または、何かが欠けている可能性があります。これについて何かを見つけようとしてドキュメントを何度も読みました)。私は、Rails が理解できる方法でネストされた属性を含めるというややハックな手段に頼ってきました。以下のフォーム:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form ng-submit="save(job)" accept-charset="UTF-8" enctype="multipart/form-data">
<label for="job_title">Title</label>
<input ng-model="job.title"
class="form-control"
id="job_title"
name="job[title]"
type="text"
required />
<div ng-repeat="error in errors.title" class="alert alert-danger">Title {{error}}</div>
<label for="job_company">Company</label>
<input ng-model="job.company"
class="form-control"
id="job_company"
name="job[company]"
type="text"
required />
<div ng-repeat="error in errors.company" class="alert alert-danger">Company {{error}}</div>
<label for="job_years">Years</label>
<input ng-model="job.years"
class="form-control"
id="job_years"
name="job[years]"
type="text" />
<div ng-repeat="error in errors.years" class="alert alert-danger">Years {{error}}</div>
<label for="job_manager">Manager</label>
<input ng-model="job.manager"
class="form-control"
id="job_manager"
name="job[manager]"
type="text" />
<div ng-repeat="error in errors.manager" class="alert alert-danger">Manager {{error}}</div>
<label for="job_contact">Contact</label>
<input ng-model="job.contact"
class="form-control"
id="job_contact"
name="job[contact]"
type="text" />
<div ng-repeat="error in errors.contact" class="alert alert-danger">Contact {{error}}</div>
<label for="job_address">Address</label>
<input ng-model="job.address"
class="form-control"
id="job_address"
name="job[address]"
type="text" />
<div ng-repeat="error in errors.address" class="alert alert-danger">Address {{error}}</div>
<label for="job_description">Description</label>
<textarea ng-model="job.description"
class="form-control"
id="job_description"
name="job[description]"
required>
</textarea>
<div ng-repeat="error in errors.description" class="alert alert-danger">Description {{error}}</div>
<label for="job_skills">Skills</label>
<input ng-model="job.skills"
class="form-control"
id="job_skills"
name="job[skills]"
type="text" />
<div ng-repeat="error in errors.skills" class="alert alert-danger">Skills {{error}}</div>
<label for="job_references">References</label>
<input ng-model="job.references[0]"
class="form-control"
id="job_references_attributes_0_reference"
name="job[references_attributes][0][reference]"
type="text" />
<input ng-model="job.references[1]"
class="form-control"
id="job_references_attributes_1_reference"
name="job[references_attributes][1][reference]"
type="text" />
<input ng-model="job.references[2]"
class="form-control"
id="job_references_attributes_2_reference"
name="job[references_attributes][2][reference]"
type="text" />
<input ng-model="job.references[3]"
class="form-control"
id="job_references_attributes_3_reference"
name="job[references_attributes][3][reference]"
type="text" />
<input ng-model="job.references[4]"
class="form-control"
id="job_references_attributes_4_reference"
name="job[references_attributes][4][reference]"
type="text" />
<label for="job_image">Image</label>
<input ng-model="job.image"
class="width-100"
id="job_image"
name="job[image]"
type="file"
ngf-select
accept="image/*"
ngf-max-size="5MB" />
<div ng-repeat="error in errors.image" class="alert alert-danger">Image {{error}}</div>
<div class="center">
<div class="btn-group">
<input class="btn btn-large btn-primary"
name="commit"
type="submit"
value="Submit" />
</div>
<div class="btn-group">
<a ng-click="back()" href class="btn btn-large btn-default">← Cancel</a>
</div>
</div>
</form>
</div>
</div>
私が言及している「ハッキー」ビットは、「job.references[0]」が進行中の場所です。ネストされた属性を含めるために ng-file-upload を使用する方法は次のとおりです。
$scope.save = function(job) {
var file = job.image;
Upload.upload({
url: '/api/jobs/' + job.id,
method: 'PUT',
fields: {
'job[title]': job.title,
'job[company]': job.company,
'job[description]': job.description,
'job[years]': job.years,
'job[manager]': job.manager,
'job[contact]': job.contact,
'job[skills]': job.skills,
'job[address]': job.address,
'job[references_attributes][0][reference]': job.references[0],
'job[references_attributes][1][reference]': job.references[1],
'job[references_attributes][2][reference]': job.references[2],
'job[references_attributes][3][reference]': job.references[3],
'job[references_attributes][4][reference]': job.references[4] },
file: file,
fileFormDataName: 'job[image]'
}).progress(function (evt) {
$scope.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
console.log('Progress: ' + $scope.progress + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('File ' + config.file.name + 'uploaded. Response: ' + data);
$scope.jobs.push(data);
$state.go('jobs.show', {id: $stateParams.id})
}).error(function (data, status, headers, config) {
console.log('Error status: ' + status);
$scope.errors = data;
});
}
これは新しいモデルのエントリではうまく機能しますが、ここで既存のエントリを編集すると問題が発生します... これは、この設定で Rails に送信される JSON データです。
Parameters: {"job"=>{"title"=>"Example Title", "company"=>"Example Company", "description"=>"Example Description", "references_attributes"=>{"0"=>{"reference"=>"Example Reference"}}, "image"=> #plus the image data here}
お気づきかもしれませんが、「id」属性はネストされた属性に含まれなくなりました。これにより、編集を送信すると、Rails で既存のネストされた属性が複製されます。ネストされた属性を ng-file-upload に含める方法を知っている人はいますか? それとも、ng-file-upload のないソリューションでさえありますか?
前もって感謝します！