i can't upload images in my firebase storage via html JavaScript code

Viewed 26

enter image description here

          <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-app.js"></script>
          <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-auth.js"></script>
          <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-storage.js"></script>
          <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-database.js"></script>
        
        <script id="MainScript">
        
        // Variable Declaration Part
        var ImgName, ImgUrl;
        var files = [];
        var reader = new FileReader();
        
     
        
        // Configuration Part
        
        var firebaseConfig = {
    apiKey: "******************_qvCXXzuDpk_G2VabP9J4DHckdsEJA",
    authDomain: "***********-6efb7.firebaseapp.com",
    databaseURL: "https://************************************",
    projectId: "******************-6efb7",
    storageBucket: "*********-6efb7.appspot.com",
    messagingSenderId: "*******",
    appId: "1:82800552387:web:f5e4a0bd8377ee96fdf576",
    measurementId: "G-**********"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
        
        
        // Selection Process
        
        document.getElementById("select").onclick = function(e){
        
            var input = document.createElement("input");
            input.type='file';
            input.click();

            input.onchange = e =>{
                files = e.target.files;
                reader = new FileReader();
                reader.onload = function(){
                    document.getElementById("myimg").src = reader.result;
                }
                reader.readAsDataURL(files[0]);
            }
            input.click();
        }

//         var bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);
// ref.put(bytes).then((snapshot) => {
//   console.log('Uploaded an array!');
// });

        // Upload Process

        document.getElementById("upload").onclick = function(){
            ImgName = document.getElementById('namebox').value;

            var uploadTask = firebase.storage().ref('Slider/'+ImgName+'.png').put(files[0]);


            uploadTask.on('state_changed', function(snapshot){
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes)*100;
                
                document.getElementById('UpProgress').innerHTML = 'Upload: '+progress+'%';

            },

            // Error Handling for Firebase StorageBucket
            

            function(error){
                alert("error in saving the image");
            },


            // Submit the image link to the firebase database
           
            function(){
            uploadTask.snapshot.ref.getDownloadURL().then(function(url){
                ImgUrl = url;

                firebase.database().ref('Picture/'+ImgName).set({
                    Name: ImgName,
                    Link: ImgUrl,
                });
                alert("Image Added Sucessfully");
                }
            );   
           });
        }


        
        </script>
<div class="item-wrapper one">

        <div class="item">
            <div class="form-box">
                <div class="form-group ">
                    <label for="exampleFormControlInput1"> <span style="color:#DC3545;padding-top: 0px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 18px;">*</span> Image Name</label>
                    <input type="text" class="form-control" id="namebox" placeholder="Enter the Image Name">
        

<div>
                    <button type="button" id="select" class="btn btn-primary" > <i class="fa fa-tag"></i> Select</button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" id="upload" autocomplete="off"> <i class="fa fa-upload"></i> Upload</button>
                    <br>
                    <br>
                    <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" id="retrieve" autocomplete="off"> <i class="fa fa-download"></i> Retrieve Image</button>
                </div>
                  </div>


                  <br>

                  <img style="height:100%; width:100%" id="myimg">
                  <label id="UpProgress"></label>


                  </div>
        </div><!--item-->

    </div>
    

enter image description here

i have a error to upload an images in firebase storage connection.ts:75

javascript error

POST https://firebasestorage.googleapis.com/v0/b/

{ "error": { "code": 401, "message": "Firebase App Check token is invalid." } }q3carcare-6efb7.appspot.com/o?name=Slider%2Fimg1.png 401 (Unauthorized)

0 Answers
Related