質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

4299閲覧

ng-file-uploadを使用した画像のアップロードがループの中で動作せず困っています

退会済みユーザー

退会済みユーザー

総合スコア0

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2015/07/21 04:29

編集2015/07/23 05:46

JavaScriptベースのフロントエンドアプリケーションとして AnuglarJS を使用して
サーバ側のデータを操作する為にバックエンドAPIを Rails で構築しているのですが、
ng-file-uploadを採用した画像のアップロードが上手く出来なくて困っています。

Shop(1) <-> Item(n)

1件のShopに複数のItemが紐付いている状態で、Shopのedit画面で画像のアップロードを実装しています。
itemリストのループの中でそれぞれのitemに画像を登録させたいですが、ループの中では適切にアップロードができません。
(厳密にはcontrollerの $scope.upload = (files) -> が呼び出されません。。)

また、現状ではそれぞれのitemごとに画像を設定することができなくて詰まっています。。
APIを通してDBには正しく格納できているのでページをリロードすればきちんと表示されるのですが、
img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"
がすべてのinputに対して共通のために、関係のないitemのimgが上書きされていしまいます。

一度に複数の画像アップロードや画像以外のアップロードは求めていなく、
いたってシンプルなものをつくろうとしているのですがなかなか上手くいきません...
どうかご教授いただけますと嬉しいです。

application.js

//= require angular.min //= require angular-resource.min //= require ng-file-upload.min //= require ng-file-upload-shim.min //= require app //= require_tree .

controller.coffee

angular.module('app').controller "ArticleEditController", ($scope, Upload, Shop, Item) -> $scope.init = -> $scope.$watch 'files', -> $scope.upload $scope.files return $scope.upload = (files) -> if files and files.length alert "success" i = 0 while i < files.length file = files[i] $scope.upload = Upload.upload( url: '/api/shops/1/items' method: 'POST' # shop_idを動的に渡せていないので一時的にベタ書きしています fields: 'item[shop_id]':'1' file: file fileFormDataName: 'item[image]') i++ return

edit.html.slim

# ループの外では適切にアップロードされる section p select file: input type="submit" value="ファイルを選択" ngf-select="" ng-model="files" img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'" section p select file: input type="submit" value="ファイルを選択" ngf-select="" ng-model="files" img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'" section p select file: input type="submit" value="ファイルを選択" ngf-select="" ng-model="files" img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'" # ループの中では $scope.upload = (files) -> が呼ばれない... ul ng-repeat="item in shop.items" p select file: input type="submit" value="ファイルを選択" ngf-select="" ng-model="files" img ngf-src="files[0]" ngf-default-src="" ngf-accept="'image/*'"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

似たような事例がstacoverflowで回答されています。こちらで解決できないでしょうか?
http://stackoverflow.com/questions/31313845/angularjs-ng-file-upload-not-working-inside-ng-repeat

投稿2015/07/21 06:28

chiku_

総合スコア1464

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/07/22 04:32

回答ありがとうございます。こちらの事例で回答されているものでは解決できませんでした...
chiku_

2015/07/22 05:02

ng-model="files" を ng-model="item.files" にするだけでなく、 $scope.$watch 'item.files', -> を追加されていますか? またitem.filesはng-repeatされる前に定義済みの状態でしょうか?
退会済みユーザー

退会済みユーザー

2015/07/22 08:44

ご回答ありがとうございます。"item.filesがng-repeatされる前に定義済みの状態" というのがいまいち分かりませんがご回答いただいた点を受けて以下のようにしています。しかしながら Cannot read property 'files' of undefinedとなり $scope.upload = (item) -> が呼ばれない状態です(画像のプレビューまでは問題なく行えています)。 [edit.html.slim] section ng-repeat="item in shop.items" p select file: input type="submit" value="ファイルを選択" ngf-select="" ng-model="item.files" img ngf-src="item.files[0]" ngf-default-src="" ngf-accept="'image/*'" [controller.coffee] $scope.$watch 'item.files', -> $scope.upload $scope.item.files return $scope.upload = (item) -> if item.files and item.files.length alert "upload start" file = item.files[0] $scope.upload = Upload.upload( url: '/api/shops/1/items' method: 'POST' # shop_idを動的に渡せていないので一時的にベタ書きしています fields: 'item[shop_id]':'1' file: file fileFormDataName: 'item[image]') return
退会済みユーザー

退会済みユーザー

2015/07/23 04:26 編集

少し修正しました。エラーは吐かなくなりましたが、やはり $scope.upload = (files) -> が呼ばれない状態が直りません(ngf-src="item.files[0]"には適切に値が返され、画像は表示されるのですがDBには格納されない状態です)。おかしな点があればどうか指摘していただきたいです。よろしくお願いいたします。 [edit.html.slim] section ng-repeat="item in shop.items" p select file: input type="submit" value="ファイルを選択" ngf-select="" ng-model="item.files" img ngf-src="item.files[0]" ngf-default-src="" ngf-accept="'image/*'" [controller.coffee] # $scope.item.files = [] $scope.$watch 'item.files', -> $scope.upload $scope.files return $scope.upload = (files) -> if files and files.length alert "upload start" file = item.files[0] $scope.upload = Upload.upload( url: '/api/shops/1/items' method: 'POST' # shop_idを動的に渡せていないので一時的にベタ書きしています fields: 'item[shop_id]':'1' file: file fileFormDataName: 'item[image]') return
退会済みユーザー

退会済みユーザー

2015/07/24 04:25

コメントありがとうございます。onchangeも検討しましたが将来的にはドラッグ&ドロップでのアップロードに対応させたいと考えているのでできればmodelでファイルの変更を監視したいです。
chiku_

2015/07/24 05:03

> 似たような事例がstacoverflowで回答されています。こちらで解決できないでしょうか? 初期の回答を試してみましたが、ng-repeat内でもモデルの変更は取れました。 すみませんが、$scope.$watch 'item.files', ->ではいかないようなので、stacoverflowに書かれているようなコードで試してみてはいかがでしょうか?
退会済みユーザー

退会済みユーザー

2015/07/24 07:28

コメントありがとうございます。どこかで間違ったことをしているはずなのでもう少し試行錯誤してみます。。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問