How to upload an image into firebase storage

Rahat Faruk — Thu, 11 Jul 2024 15:06:35 +0000

We will learn how to upload an image file into firebase using firebase storage like imageBB or postimages. We are gonna use firebase web sdk in our react-js project.

Steps:

Create a new firebase project.
setup firebase storage. Choose test mode option to get started. In notes section, I have shown how to use it longer.
Setup your local project folder in your computer. Setup firebase config file to link up with your firebase-project.

Initialize firebase-storage service:

// >> inside firebase config file
import { getStorage } from 'firebase/storage';

// init storage service
const fbStorage = getStorage(app)
export {fbStorage}

Now we can create a form with an input (type- file) element and a submit button so that we can upload image from our computer. Add submit event handler to the form (handleUploadImage).
```

<form onSubmit={handleUploadImage}>
  <input type="file" name="imageInput" />
  <button>Upload</button>
</form>
```

The form looks like this (apply your own styles):

We can choose an image from our computer by clicking "choose file" btn; after choosing image, we should click "upload" button. Then the form fires "onSubmit" event and invoke "handleUploadImage" function. Define "handleUploadImage" function:

    import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
    import { fbStorage } from "../../firebase.config"; // NB: define your own path

    const handleUploadImage = async e => {
      // prevent deafult form submit
      e.preventDefault()

      // get imageInput element inside form
      const imageInput = e.target.imageInput
      // imageInput is an array of files. we choose the fist file (which is image file)
      const imageFile = imageInput.files[0]

      // validate: show alert if no image is selected
      if (!imageFile) {
        alert('please, select a image!')
        return
      }

      // create file path ref for firebase storage. 
      // if image filename is "eagle.jpg"; then the path would be "images/eagle.jpg"
      const filePathRef = ref(fbStorage, `images/${imageFile.name}`)

      // upload the image file into firebse storage 
      const uploadResult = await uploadBytes(filePathRef, imageFile)

      // finally get image url which can be used to access image from your website
      const imageUrl = await getDownloadURL(filePathRef)

      // [ TODO: put your code here whatever you want to do with the "imageUrl" ]

      // reset form (optional)
      e.target.reset()
    }

Now, you have successfully uploaded the image into firebase storage.

If you want to find the image in firebase website: open your firebase project (from firebase website) > firebase storage > Files (tab) > images > your images lives here. From here you can manage (delete, upload) your images manually.

Notes:

Use storage for longer period:

test mode only keeps your storage active for 1 month. You must setup storage rules to use longer period. The easiest way is: go to firebase storage > select "Rules" tab > reset your date as new future date to use it longer. You have to learn security rules to use it more effectively. If you don't update security rules, anyone who has your firebase credentials can modify your data!

Follow me (Rahat Faruk) to learn more about webdev content. If you want to learn new content, comment here. Thank you.

Connect with me: in/rahatfaruk

RF Word Counter

Rahat Faruk — Sun, 07 Jul 2024 02:45:02 +0000

RF Word Counter

Simple word counter web app for beginners. I will share how I developed this project step by step.

When the user types or pastes any text, the app counts the number of words and characters in the textarea. Words exclude spaces and line breaks, while characters include everything.

Tech: html, css and javascript

live link: rf-word-counter.netlify.app
github repo: https://github.com/rahatfaruk/rf-word-counter

html

In html, I have created a container textarea-and-result that contains textarea (for user's text) and results (how many words and characters - initially 0).

  <div class="textarea-and-result">
    <!-- results -->
    <div class="result-container">
      <p><span id="words">0</span> Words</p>
      <p><span id="chars">0</span> Characters</p>
    </div>
    <!-- textarea -->
    <textarea name="textarea"></textarea>
  </div>

Rest codes inside html is for styling and page structure purpose.

css

I have tried to keep the design as simple as possible. I have tried to explain styles through comment. Paste the following code inside style.css file.

  /* ## resets and base styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }

  body { padding: 1rem; }

  h1 {
    margin: 1rem 0 1.5rem;
    text-align: center;
  }

  textarea {
    display: block;
    height: 100px;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    background: #dfdfdf;
    font-size: 1rem;
    resize: vertical;
  }

  /* ## app styles */
  .app {
    max-width: 600px;
    margin: 0 auto;
  }

  .textarea-and-result {
    padding: 2rem 1rem;
    border: 2px solid #ccc;
    box-shadow: 3px 3px 8px #ccc;
    border-radius: .25rem;
  }

  .result-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
  }
  .result-container p {
    padding: 1rem;
    border-radius: .5rem;
    background: #dfdfdf;
    text-align: center;
  }
  .result-container p span {
    display: block;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: .5rem;
  }

  .attribution {
    margin-top: 1.5rem;
    color: #999;
    font-size: .9rem;
    text-align: center;
  }

Javascript (Steps):

  // 1.
  const textarea = document.querySelector('textarea')
  const wordsEl = document.getElementById('words')
  const charsEl = document.getElementById('chars')
  const spacesEl = document.getElementById('spaces')

  // 2.  
  textarea.addEventListener('input', e => { 
    // 3.
    const text = e.target.value

    // 4. & 5.
    const words = text.match( /\S+/gm )
    const spaces = text.match( /\s/gm )

    // 6. & 7.
    wordsEl.textContent = words ? words.length : 0
    charsEl.textContent = text ? text.length : 0
    spacesEl.textContent = spaces ? spaces.length : 0
  })

Expanation:

Get all important elements.
Add the input event to the textarea to count words immediately after typing or pasting text.
Get the text inside the textarea.
Get an array of all words (excluding spaces and line breaks) and store it in the words variable. Use text.match( /\S+/gm ). Explanation of the regex:
- g flag means global match.
- m flag means multi-line.
- \S matches any non-whitespace character.
- + matches the previous token one or more times.
Get an array of all spaces. Use text.match( /\s/gm ). Spaces includes line breaks.
Calculate the results. If the textarea is empty, words is null; otherwise, it's an array. Return 0 for null, otherwise count the words.
- Use words.length to count words.
- Use text.length to get the total number of characters.
Update the UI with the results.

Forem: Rahat Faruk

How to upload an image into firebase storage

Notes:

Use storage for longer period:

RF Word Counter

RF Word Counter

html

css

Javascript (Steps):