ERR_NAME_NOT_RESOLVED - Firebase storage on upload error

Question

I'm having a bit of trouble uploading images using the Firebase storage. I tried implementing it on a Vue app but I'm having a net::ERR_NAME_NOT_RESOLVED error when uploading images to my bucket. I tried to follow the tutorial on the documentation. Set the storage rule of allow read, write to true. But still getting the same error. So what I did is try it bare minimum on a single HTML file like what they did on the video tutorial in the documentation.

This my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Firebase Upload</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">

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-storage.js"></script>

  <script>
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      apiKey: "APIKEY",
      authDomain: "AUTHDOMAIN",
      databaseURL: "DABASEURL",
      projectId: "PROJECTID",
      storageBucket: "STORAGEBUCKET",
      messagingSenderId: "MESSAGEID",
      appId: "APPID",
      measurementId: "MEASUREMENTID"
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    var uploader = document.getElementById('uploader');
    var fileButton = document.getElementById('fileButton');

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

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

      var task = storageRef.put(file);

      task.on('state-changed',
        function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          uploader.value = percentage;
        },

        function error(err) {
          console.log(err);
        },

        function complete() {
          console.log('complete');
        },
      );
    })
  </script>
</body>
</html>

Of course I replaced my Firebase config with fake config strings, but basically this is what I have. I use live server extension on vs code to launch the website, but still getting the same error POST https://firebasestorage.googleapis.com/v0/b/app.appspot.com/o?name=books%image.jpg net::ERR_NAME_NOT_RESOLVED.

please check if this will work for you. https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin I tried but it didn't work on my end. — user683742, Oct 29 '20 at 18:01
This also happened to me lately. Still finding a way to fix. Tried other accounts and firestore server but doesn't solve the problem. — valhalla ross ferrer, Nov 01 '20 at 10:54
This is no longer showing on my app. I did not do anything . — valhalla ross ferrer, Nov 05 '20 at 13:05

score 0 · Answer 1 · answered Nov 04 '20 at 07:16

0

ERR_NAME_NOT_RESOLVED is a DNS issue on your local computer. Perhaps try changing your DNS provider to Google's Public DNS?

https://developers.google.com/speed/public-dns/docs/using

answered Nov 04 '20 at 07:16

Albert

3,611
3
28
52

2

I can guarantee that this is not a DNS issue on my local. Because i tried different device and networks. And for update, right now i dont see this error anymore. – valhalla ross ferrer Nov 05 '20 at 13:05

ERR_NAME_NOT_RESOLVED - Firebase storage on upload error

1 Answers1