Firebase Storage загружает CSV-файл - PullRequest
Новая
       8

Firebase Storage загружает CSV-файл

0 голосов
/ 03 мая 2018

Я создал WebApp через Firebase для загрузки файлов в облачное хранилище, однако, когда я выбираю файл для загрузки, никаких действий не происходит, действие выбора файла не загружает файл.

Я проверил следующее:

  • Правила хранения: они открыты
  • Настройки браузера: одинаковая проблема во всех браузерах.

ниже - мой файл index.html, и, надеюсь, кто-нибудь может пролить свет на эту странную проблему? 

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test Upload App</title>
  <style media="screen">
    body {
      display: flex;
      min-height: 100vh;
      width: 100%;
      padding: 0;
      margin: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    #uploader {
      -webkit-appearance: none;
      appearance: none;
      width: 50%;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>

  <progress value="0" max="100" id="uploader">0%</progress>
  <input type="file" value="upload" id="fileButton" />

  <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyCA7XWfS7deQaYGgaUaTWK-xxxxxxxxxxxx",
      authDomain: "testapp.firebaseapp.com",
      databaseURL: "https://test-project.firebaseio.com",
      projectId: "testproject",
      storageBucket: "testbucket_inbound/mydata/",
    };
    firebase.initializeApp(config);

    //Get Elements
    var uploader = document.getElementById('uploader');
    var fileButton = document.getElementById('fileButton');

    //Listen for file selection
    fileButton.addEventListener('change', function(e) {
      // Get file
      var file = e.target.files[0];

      // Create storage ref
      var storageRef = firebase.storage().ref('mydata/' + file.name);

      // upload file
      var task = storageRef.put(file);

      // update progress bar
      task.on('state_changed',

        function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred /
            snapshot.totalBytes) * 100;
          uploader.value = percentage;
        },

        function error(err) {

        },

        function complete() {

        }

      );
    });
  </script>
</body>

</html>

1 Ответ

0 голосов
/ 03 мая 2018

На странице, которую вы развернули, есть ошибка:

Вы заявляете свою кнопку как следуйте в вашем HTML 

<input type="file" value="upload" id="filebutton" />

но вы устанавливаете свой EventListener на кнопку с идентификатором в верхнем регистре B 

fileButton.addEventListener('change' , function(e) {

Изменить на 

filebutton.addEventListener('change' , function(e) {

и оно должно работать.

Вы можете увидеть ошибку из консоли браузера: ReferenceError: fileButton is not defined

Напоследок обратите внимание, что в коде вашего вопроса это правильно! Вы используете fileButton в двух местах.

...