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

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

ただいまの
回答率

88.93%

Firebase Strageに画像データをupしたいができない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 305

Moai

score 7

タイトルの通り画像ファイルをFirebase Strageにupしようとすると、uploadボタンが反応せずに(index):50 Uncaught TypeError: firebase.storage is not a function
at uploadimage ((index):50)
at HTMLButtonElement.onclick ((index):30)
というエラーが出て困っています。
私としてはボタンが反応していないという問題なのでjs側の問題だと考えています。
原因または解決策をご存知の方はいらっしゃいませんか?

以下がコードです。

create.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign</title>
<style>
        div{
        position : absolute;
        right : 10px;
        top : 5px
        }
    </style>
</head>
<body>
<div>

<button type="button" onclick="location.href='{% url 'logout' %}'">Logout</button>
    </div>
<H2>Create Reading Report</H2>
<form action="/post_create/" method="post">
    {% csrf_token %}
    Title :
    <input type="text" name="work" required><br><br>
    Predicting:
    <textarea rows="5" cols="40" name="progress" required></textarea>
    <br><br>
    Vizualizing:
    <input type="file" name="files[]" id="files" required>
    <input type="hidden" name="url" id="url">
    <button type="button" onclick="uploadimage()">Upload</button><br><br>
    <input type="submit" value="Submit">



</form>
</body>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script>
    var config = {
   apiKey: ,
    authDomain: ,
    databaseURL: ,
    projectId:,
    storageBucket:,
    messagingSenderId:,
    appId: 
  };
  firebase.initializeApp(config);
  function uploadimage(){
  var storage = firebase.storage();
  var file = document.getElementById("files").files[0];
  var storageRef = storage.ref();
  var thisref = storageRef.child(file.name).put(file);
  thisref.on('state_changed',function(snapshot){
  console.log("file uplaoded succesfully");
  },
  function(error) {
  alert("error");
  },
  function() {
  var downloadURL = thisref.snapshot.downloadURL;
  console.log("got url");
  document.getElementById("url").value = downloadURL;
  alert("file uploaded successfully");
});
    }
</script>
</html>


view.py

from django.shortcuts import render
import pyrebase
from django.contrib import auth

config = {
  "apiKey": ,
  "authDomain": ,
  "databaseURL":,
  "projectId":,
  "storageBucket":,
  "messagingSenderId": ,
  "appId": 
}

firebase = pyrebase.initialize_app(config)

authe = firebase.auth()
database=firebase.database()
def signIn(request):

    return render(request, "signIn.html")

def postsign(request):
    email=request.POST.get('email')
    password = request.POST.get("password")
    try:
        user = authe.sign_in_with_email_and_password(email,password)
    except:
        message="invalid credentials"
        return render(request,"signIn.html",{"errorMessg":errorMessage})
    print(user['idToken'])
    session_id=user['idToken']
    request.session['uid']=str(session_id)
    return render(request, "welcome.html",{"e":email})
def logout(request):
    auth.logout(request)
    return render(request,'signIn.html')


def signUp(request):

    return render(request,"signup.html")
def postsignup(request):

    name=request.POST.get('name')
    email=request.POST.get('email')
    password=request.POST.get('password')
    try:
        user=authe.create_user_with_email_and_password(email,password)
    except:
        errorMessage="Unable to create account try again"
        return render(request,"signup.html",{"errorMessg":errorMessage})
        uid = user['localId']

    data={"name":name,"status":"1"}

    database.child("users").child(uid).child("details").set(data)
    return render(request,"signIn.html")

def create(request):

    return render(request,'create.html')


def post_create(request):

    import time
    from datetime import datetime, timezone
    import pytz

    tz= pytz.timezone('Asia/Tokyo')
    time_now= datetime.now(timezone.utc).astimezone(tz)
    millis = int(time.mktime(time_now.timetuple()))
    print("mili"+str(millis))
    work = request.POST.get('work')
    progress =request.POST.get('progress')
    url = request.POST.get('url')
    idtoken= request.session['uid']
    a = authe.get_account_info(idtoken)
    a = a['users']
    a = a[0]
    a = a['localId']
    print("info"+str(a))
    data = {
        "work":work,
        'progress':progress,
        'url':url
    }
    database.child('users').child(a).child('reports').child(millis).set(data)
    name = database.child('users').child(a).child('details').child('name').get().val()
    return render(request,'welcome.html', {'e':name})

def check(request):
    import datetime
    idtoken = request.session['uid']
    a = authe.get_account_info(idtoken)
    a = a['users']
    a = a[0]
    a = a['localId']

    timestamps = database.child('users').child(a).child('reports').shallow().get().val()
    lis_time=[]
    for i in timestamps:

        lis_time.append(i)

    lis_time.sort(reverse=True)

    print(lis_time)
    work = []

    for i in lis_time:

        wor=database.child('users').child(a).child('reports').child(i).child('work').get().val()
        work.append(wor)
    print(work)

    date=[]
    for i in lis_time:
        i = float(i)
        dat = datetime.datetime.fromtimestamp(i).strftime('%H:%M %d-%m-%Y')
        date.append(dat)

    print(date)

    comb_lis = zip(lis_time,date,work)
    name = database.child('users').child(a).child('details').child('name').get().val()

    return render(request,'check.html',{'comb_lis':comb_lis,'e':name})

def post_check(request):

    import datetime

    time = request.GET.get('z')

    idtoken = request.session['uid']
    a = authe.get_account_info(idtoken)
    a = a['users']
    a = a[0]
    a = a['localId']

    work =database.child('users').child(a).child('reports').child(time).child('work').get().val()
    progress =database.child('users').child(a).child('reports').child(time).child('progress').get().val()
    img_url = database.child('users').child(a).child('reports').child(time).child('url').get().val()
    print(img_url)
    i = float(time)
    dat = datetime.datetime.fromtimestamp(i).strftime('%H:%M %d-%m-%Y')
    name = database.child('users').child(a).child('details').child('name').get().val()

    return render(request,'post_check.html',{'w':work,'p':progress,'d':dat,'e':name,'i':img_url})
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yasutomi

    2019/08/19 21:01

    エラーなら何のエラーが出ているのか確認ですね。
    というかalert("error"); と書かれていますが
    引数でerrorを受け取っているわけだから
    console.log(error); と書くのが正しいです。
    まずは何のエラーなのかを確認しないと話が進まないです。

    キャンセル

  • Moai

    2019/08/19 21:31

    ご指摘ありがとうございます

    キャンセル

回答 1

check解決した方法

0

create.htmlに以下を追加すると問題が解決しました
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-storage.js"></script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る