Firebase tips(Storage:javascript)

#FIREBASE TIPS

## 1. Upload file

```html:upload.html
<script>
    firebase.initializeApp(config);
    firebase.auth().signInWithEmailAndPassword('xxx@xxx.com', 'xxx').catch((error) => {
        console.log('code:' + error.code + 'message' + error.message);
    });
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('login success');
        } else { }
    });

    var storage = firebase.storage();
    function upload() {
        var file = document.getElementById('loadFile').files[0];
        console.log('/images/' + file.name);
        var storageRef = storage.ref('/images/' + file.name);
        storageRef.put(file).then(function (snapshot) {
            console.log('Uploaded a blob or file!');
        });
    }

</script>
<body>
    <input type="file" id="loadFile" name="loadFile" />
    <input type="button" id="button" name="button" value="upload" onclick="upload()" />
</body>

```

```:storage.rule
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}
```

`result1`
![result.png](https://qiita-image-store.s3.amazonaws.com/0/199460/0ac162ce-f9ee-4124-e930-3fdeaf669e7c.png)

`result2`
![result2.png](https://qiita-image-store.s3.amazonaws.com/0/199460/c409ff43-a883-f4c5-716f-5e228e8ab305.png)

## 2. Download file

```html
<script>
    firebase.initializeApp(config);
    firebase.auth().signInWithEmailAndPassword('xxx@xxx.com', 'xxx').catch((error) => {
        console.log('code:' + error.code + 'message' + error.message);
    });
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('login success');
        } else { }
    });

    var storage = firebase.storage();
    storageRef = storage.ref('');
    storageRef.child('images/logo.png').getDownloadURL().then(function (url) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onload = function (event) {
            var blob = xhr.response;
        };
        xhr.open('GET', url);
        xhr.send();

        // Or inserted into an <img> element:
        var img = document.getElementById('photo1');
        img.src = url;
    }).catch(function (error) {
        // Handle any errors
    });

</script>
<body>
    <img id="photo1">
</body>
```

`result`
![result.png](https://qiita-image-store.s3.amazonaws.com/0/199460/e0b36dc8-0956-aeff-4b62-4deedd3bb5d1.png)

## 3. Delete file

```html
<script>
    firebase.initializeApp(config);
    firebase.auth().signInWithEmailAndPassword('coffeeandcode.tokyo@gmail.com', 'coffee').catch((error) => {
        console.log('code:' + error.code + 'message' + error.message);
    });
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log('login success');
        } else { }
    });

    var storage = firebase.storage();
    storageRef = storage.ref('');
    storageRef.child('images/logo.png').delete().then(() => {
        console.log('delete success');
    }).catch((error) => {
        console.log('delete error');
    });

</script>
```

`result`
![result.png](https://qiita-image-store.s3.amazonaws.com/0/199460/68c60738-4ac6-af77-92ea-8c51db49d3c4.png)