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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2215閲覧

firebaseにアップロードしたPDF、パワーポイントを複数のデバイスに表示させたい

goombeer

総合スコア16

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/05/27 05:35

###前提・実現したいこと
HTML上で選択したファイルをfirebaseにアップロードし、複数デバイスに表示させたい

###発生している問題・エラーメッセージ

ファイルをアップロードしようとすると、「Cannot read property '0' of undefined」という表示されます。

###該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>Chatアプリ</title> 6<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 7<link rel="stylesheet" href="style.css"> 8</head> 9<body> 10<!-- パワポ表示画面 --> 11<div id="pt"> 12 <label for="btnUpload">ファイルを選択する<input type="file" name="" value="アップロード" style="display:none" id="btnUpload"></label> 13</div> 14<div class="chat"> 15 <!--リスト表示--> 16 <ul id="output"></ul> 17 <div id="input"> 18 <div><input type="text" id="username" placeholder="ユーザー名を入力してください"></div> 19 <input type="text" name="" value="" id="text" placeholder="メッセージ内容を入力してください"> 20 </div> 21</div> 22 23<!-- 以下JavaScript領域 --> 24 25 26<!-- 以下Firebaseに必要 --> 27<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 28<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script> 29<script> 30 31// ------------ここからfirebase---------------------------- 32 // Initialize Firebase 33 var config = { 34 apiKey: "AIzaSyDkTSQSuzpvAgAkERXw8kxD8mN6NhkwAug", 35 authDomain: "chatapp-e8c70.firebaseapp.com", 36 databaseURL: "https://chatapp-e8c70.firebaseio.com", 37 projectId: "chatapp-e8c70", 38 storageBucket: "chatapp-e8c70.appspot.com", 39 messagingSenderId: "925224336157" 40 }; 41 firebase.initializeApp(config); 42 43</script> 44<script> 45//1.Authentication → ログイン方法 → 匿名を選択 46 47//2.MSG送受信準備 48var newPostRef = firebase.database().ref(); 49 50//3.Submit:MSG送信 51$("#text").keypress(function(e){ 52 if(e.which ==13){ 53 newPostRef.push({ 54 username: $("#username").val(), 55 text: $("#text").val(), 56 }); 57 // $("#username").val(""), 58 $("#text").val(""); 59 $('#username').val(""); 60} 61}); 62 63 64//4.MSGデータ受信 65//child_added:毎回1個//value:毎回全てのデータを取得 66newPostRef.on('child_added',function(data){ 67 var data = data.val(); 68 var username = data.username|| "anonymous"; 69 var message = data.text; 70 var val =$("#username").val(); 71 //timelineメッセージ作成 72 if ( username == val ) { 73 74 var str = $("<il><p class='sender_name me'>" + username + "</p><p class='right_balloon'>" + message + "</p><p class='clear_balloon'></p></il>"); 75 76 } else { 77 78 var str = $("<il><p class='sender_name'>" + username + "</p><p class='left_balloon'>" + message + "</p><p class='clear_balloon'></p></il>"); 79 80 } 81 $("#output").append(str); 82}); 83 84// ------------ここまでfirebase---------------------------- 85 86// ------------ここからdatabase---------------------------- 87 88 89//ストレージへアップロードする 90$('#btnUpload').click(function(){ 91var storage = firebase.storage(); 92var storageRef = storage.ref("folderName/file.png"); 93$("#btnUpload").on('change', function(evt) {console.log("S"); 94 var firstFile = evt.target.file[0]; // get the first file uploaded 95 var uploadTask = storageRef.put(firstFile); 96 uploadTask.on('state_changed', function progress(snapshot) { 97 console.log(snapshot.totalBytesTransferred); // progress of upload 98 }); 99}); 100}); 101</script> 102 103</body> 104</html> 105

###補足情報(言語/FW/ツール等のバージョンなど)
現在、学校の課題でfirebaseを用いた作品を作成中です。
PDF、パワーポイントをfirebaseのstorageにアップロードし、複数のデバイスでリアルタイムで表示させたいと考えています。
https://developers-jp.googleblog.com/2016/07/firebase-storage-5.html
上記のサイトを参考にコードを記述したのですが、エラーが出てしまいます。
$("#btnUpload").on('change'・・・の部分で処理がおこなしくなっているのかなと思うのですが、うまくいきません。
どなたかご教授のほどよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

色々と調べた結果、難しいと判明したので、仕様を変更しました。

投稿2017/05/27 16:28

goombeer

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問