DEV Community: Krishna Sharma

Create a File Uploader with Progress Bar in React.js

Krishna Sharma — Fri, 08 Sep 2023 16:37:49 +0000

Uploading Files in any web application is very common these days, so providing a good user experience to the users during large file uploads is nice to have. So in this post, we will learn how to create a simple React.js component in which you can upload a file and show how much it is uploaded in percentage (%) so the user can patiently wait for it to complete and doesn't worry about how much he's to wait.

So here I'm assuming that you're using axios library for making API calls, as this is the most popular library making api calls with lot of features. Within this library, when we hit an api endpoint, we may provide addition parameters by using them we can show users the upload progress bar. Let me create an example component:

import React, { useState } from "react"
import axios from "axios"

const UploadFile = () => {
    const [state, setState] = useState({ percentage: 0, isUploading: false }) // can have more properties like fileName, size etc.

    const onChange = async ({ target: { files } }) => {
        const file = files[0]

        if (!file) return

        const formData = new FormData()

        formData.append('file', file)

        setState(prevState => ({...prevState, isUploading: true }))

        await axios.post('http://any-url-to.upload', formData, {
            onUploadProgress({ loaded, total }) {
                if (!total) return

                const percentage = Math.floor((loaded / total) * 100)

                setState((prevState) => ({
                    ...prevState,
                    percentage: percentage,
                    isUploading: percentage !== 100,
                }))
            },
        })
    }

    return (
        <div>
            <input type="file" onChange={onChange} />
            {state.isUploading ? (
                <div style={{ background: "orange" }}>
                    <div>
                        <h2>{`Uploading File: ${state.percentage} %`}</h2>
                    </div>
                    <div className="progress-bar" style={{ background: "white", height: 30 }}>
                        <div style={{ width: `${state.percentage}%`, background: "green" }} />
                    </div>
                </div>
            ) : (
                <div>
                    {state.percentage === 100 ? <h1>
                        Your file is uploaded!
                    </h1> : <h1>Please select a File to upload</h1>}
                </div>
            )}
        </div>
    )
}

export default UploadFile;

As we can see, showing the Upload progress in React is pretty simple, all we need to do is manage state for the File or Files and when we got to upload, we may provide a custom callback function to the axios config's onUploadProgress method, and then update the state accordingly to show the user the expected behavior for the File being uploaded with progress bar, which can be customized with CSS.

Svelte vs React, Comparison & Analysis.

Krishna Sharma — Wed, 26 Jul 2023 16:44:36 +0000

As we know that React is the most popular choice among the Frontend Developers, as the JavaScript programming language is growing, a number of new Frameworks and Libraries have been introduced in recent years to grab attention of the frontend developers and one of them is Svelte.
Svelte is a frontend development framework which has a number of features for web development similar to React and here we're going to compare it with React to know the differences and what are the Pros and Cons of using it over React.

Learning Curve:

Learning React can be challenging for the developers who are new to the component based architecture using JSX as it has its own concepts of state management, props and lifecycle methods within the component. Svelte on the other hand has a straightforward learning curve as its syntax is very similar to HTML, CSS & JavaScript.

REACT:-

import React, { useState, useEffect } from 'react';

import SomeComponent from 'some/where/else';

const MyComponent = (props) => {

  const [state, setState] = useState({

        /* ...some state */

  })

  useEffect(() => {

      // Handle some side effect or lifecycle.

  }, [])

  return <SomeComponent {...props}>Hello World</SomeComponent>;

}

export default MyComponent

Svelte:-

<script>

   let count = 0;

    const increment = () => {

        count += 1;

    }

</script>

<div>

    <h1>Count is {count}</h1>

    <button on:click={increment}>Increment</button>

</div>

Performance:

React has virtual DOM that allows it to efficiently update and render the Ui components by calculating minimum changes needed to the real DOM. Although the virtual DOM is fast and suitable for most of the applications, the virtual DOM has its own performance drawbacks on very large sized applications to compare the real DOM with the virtual DOM.
Svelte's compilation process generates highly optimised JavaScript code during the build time which results in faster initial load times and better performance.

Bundle Size:

As the React relies on virtual DOM, the final bundle size can be larger compared to Svelte as Svelte delivers JavaScript code inside the bundle files without any unnecessary code whereas React delivers state management, routing and other functionalities code with the bundle. Svelte does not require any additional libraries for state management as it natively supports it through its reactive assignments to the variables.

Code Readability:

React's JSX syntax is good for experienced developers but sometimes it leads to a cluttered appearance within the code especially for large and complex components. This makes the component logic hard to understand for developers when they first go through the codebase. Svelte's syntax has similar overview to regular HTML, CSS and JavaScript, which makes it more readable and easy to understand even for those developers who are not familiar with this Framework.

Third-party Support:

As React was introduced over a decade ago, it has become very mature and adopted by most of the developers around the world so now you may find support for almost any issue, feature or library to be implemented within your app. Svelte was introduced recently, although its still improving but you may have to struggle if you are stuck at some issue or want to implement some feature or a library in your app.

Conclusion:

Both React and Svelte have their own strengths and weaknesses and choosing between them depends on your project requirements, developer team's expertise and performance considerations. React is still a solid choice for complex and large applications but on the other hand, Svelte's simplicity, smaller bundle size and better performance make it an appealing option for smaller projects which are focused on speed and efficiency.

My Template for Node.js Server with Express.js using TypeScript.

Krishna Sharma — Fri, 16 Jul 2021 19:42:29 +0000

Hello everyone, I just created a template for Node.js server side code with Express.js framework using TypeScript, I really found it so good, but if any of you are a Senior Developer, please review my code to suggest some improvements.
And also, please comment how good or bad the code is and Guess my experience with the code quality.
And if you are a Junior Developer, you may download the repository to start your project as it has common features built already like handling Routes with Controllers and Database interaction using a popular ORM 'Sequelize' for MySQL, PostgreSQL or any of some other Relational Databases mentioned the its Docs.
Thanks for reading it, and please don't forget to comment your opinions.

URL:- https://github.com/KrishnaSharmaRS/ExpressJS-Template
GitHub Username: KrishnaSharmaRS