What Is Material UI File Upload, And Why Does It Matter?

React.js is one of the most popular frameworks for building web applications. It helps developers construct components that are both SEO-compliant and extremely interactive. The capabilities of React.js also help with upkeep and productivity levels. The Material UI library’s integration into React.js projects makes them much easier to navigate and allows Material UI file upload.

What is Material-UI?

Material-UI is a package that allows us to import and use multiple components in our React apps to build a user interface. Overall, this saves programmers a lot of time because they do not have to rewrite everything from the beginning.

Google’s user interface design concepts highly influence Material-UI widgets. As a result, it is simple for developers to create visually appealing applications.

What is Drag-and-Drop in React?

The drag-and-drop API adds draggable components to HTML. This lets developers create apps with rich user interface elements that can be moved about.

Newer apps currently being developed incorporate the drag-and-drop upload function in their APIs. It adds to the UI’s richness without detracting from the user experience.

The following are some of the most popular drag-and-drop scenarios in React:

• File Uploading is standard functionality in products like Gmail, WordPress, and InVision.
• Adding and Removing Entries From Numerous Lists – Project management software like Trello and Asana.
• Image and Asset Reorganization –This is a capability that most video editors have. Solutions like InVision use it to relocate design objects between portions.

Goal

Our goal is to integrate the Material-UI library into a React.js application and utilize its components.

Prerequisites

Make sure you have npm installed and configured before starting this guide. We’ll utilize npm to obtain and install the essential dependencies in our application. A code editor is also required.

Let’s get down to business:

Step 1: Creating a React Folder

Firstly, type the following command in a cmd or terminal to create a React project in the appropriate folder.

npx create-react-app materialuiexample

Please keep in mind that the time to initiate this process may vary according to the network speed you are working with.  

Next, navigate to the folder in your source code once the setup is finished. Then, to start the development server, execute npm start. By going to http://localhost:3000/ in your browser, you can see the standard React application.

Step 2: Configuring the Material-UI Requirements 

To use the Material-many UI’s features or components, we must first install it. Start your terminal and make sure you’re in the master folder of your application.

Type npm install @material-ui/core in the terminal and click enter.

To use Material-UI icons in our project, run the following command below.

npm install @material-ui/icons

Then, we can ensure that the above prerequisites are now a part of your React.JS project by verifying the package: 

"dependencies": {

    "@material-ui/core": "^4.11.2", //material-ui

    "@material-ui/icons": "^4.11.2", //material-ui icons

    "@testing-library/jest-dom": "^5.11.9",

    "@testing-library/react": "^11.2.3",

    "@testing-library/user-event": "^12.6.0",

    "react": "^17.0.1",

    "react-dom": "^17.0.1",

    "react-scripts": "4.0.1",

    "web-vitals": "^0.2.4"

  }

Step 3: Making Changes to the Project

Every React application comes with a set of files and themes by default. For example, if you go to http://localhost:3000/, you’ll see a web page with a react logo. To minimize misunderstanding, let’s get rid of these elements. Delete all of the code in the div tag in your app.js file.

 

import './App.css';

function App() {

  return (

    <div className="App">

      {/* code goes here */}

    </div>

  );

}

export default App;

Step 4: Applying Material-UI Components

Before using the Material-UI components, we must first integrate them. You can see the code explained below. 

import './App.css';

import {Button} from '@material-ui/core'; //importing material UI component



function App() {

  return (

    <div className="App">

      <Button> Press me </Button> //using the material ui component in our project

    </div>

  );

}

export default App;

You’ll also notice a button with the phrase “Press me” when you reload your screen. This button, however, is not properly styled. You can use props and other elements to customize buttons. 

Using Props

Props are properties that pass down from one element to the next. 

As demonstrated below, we stylized the Material-UI button that we imported into the project.

<Button color="primary" variant="contained"> Press me </Button> 

In our project, we can also integrate and use a TextField widget, as shown below.

<TextField id="name" label="Name" variant="outlined" />

The variation variable in the preceding example aids us in defining how our TextField should appear.

We may also make a stand-alone component and import it into a different file. Let’s say you want to make a distinct NavBar component. To do this, make a new file called NavBar.js in the src folder. Then, to this file, add the following code:

import React from "react";

import {AppBar, Toolbar, Typography} from '@material-ui/core';




function Header(){

    return (

      <AppBar position='static'>

         <Toolbar>

             <Typography>React Navbar Example</Typography>

         </Toolbar>

      </AppBar>




    );

}

export default Header;

AppBar, Toolbar, and Typography are all Material-UI widgets that you should keep in mind. The Typography widget helps to draw attention to the items on the toolbar. In our scenario, the toolbar title will be React Navbar Example.

We must now import the component into the app.js file. Add the following line – among the import statements – at the start of the app.js file to accomplish this.

import Header from './NavBar.js';

We can use the widget by including a div tag with the tag Header/>.

Here’s the complete code:

import './App.css';

import {Button} from '@material-ui/core'; //importing material ui component

import {TextField} from '@material-ui/core';

import AccountCircle from '@material-ui/icons/AccountCircle';

import Header from './NavBar.js';

function App() {

  return (

    <div className="App">

    <br/>

       <Header/> //importing the navbar component

      <Button color="primary" variant="contained"> Press me </Button> 

      <br/><br/>

      <TextField id="outlined-basic" label="Name" variant="outlined" />

      <br/><br/>

      <AccountCircle/>

    </div>

  );

}

export default App;

Uploading Files On Material UI

The folder layout looks like this after the React project is completed:

• upload-files.service offers Axios-based methods for saving and retrieving files.
• The upload-files.component includes a Material UI upload form, a progress bar, and a list of files with download links.
• App.js is the container in which we place all React components.
• http-common

js sets up Axios with a base Url and headers for HTTP.

• In.env, we set the port for the app.  

Configure the Material UI File Upload Project

npx create-react-app material-ui-file-upload

After the procedure has been completed, we add more directories and files to the tree, as seen below:

Material UI to React App Import

First of all, use the following command to install

 @material-ui/core: npm install @material-ui/core

Alternatively, yarn add @material-ui/core

Set up Axios for the React HTTP Client

Use the command npm install axios to install axios.

Then, we create a file called http-common.js in the src folder with the following command:

import axios from "axios";

export default axios.create({

  baseURL: "http://localhost:8080",

  headers: {

    "Content-type": "application/json"

  }

});

Uploading Files With A Creation of a Material UI Component

Let’s make a File Upload user interface using the Material UI Progress Bar, Box, Button, Typography, and ListItem.

First, we integrate UploadFilesService into a React component framework:

components/upload-files.component.js

Then we define the selectFile() method. This allows us to retrieve the selected Files from the input type=”file” > element later. For retrieving the existing File as the first Item, we utilize selectedFiles. Then we use a callback to execute the UploadService.upload() function on the currentFile.

We determine performance on the basis of event.loaded and event.total.

We call UploadService once the transfer is complete.

To acquire the information about the files, use getFiles() and assign the result to the fileInfos state, which is a collection of name and URL objects.

The message style (color) displayed on the UI is controlled by the isError state.

To return BorderLinearProgress, we must also call withStyles() with styles (root, colorPrimary, bar) as an input variable (higher-order component).

We use the map() function to traverse over the fileInfos array to generate the list of uploaded files. We utilize file.url as the href element on each file item, and file.name for the text. Material UI ListItem will be used to present the results.

Are You Ready to Explore More on File Upload?

We learned what Material UI implies and how to include Material-UI functionalities into a React.js program. We also learned how to use components and icons from the Material-UI framework.

We’ve also seen how simple it is to use Material-UI in React applications to create visually stunning websites and to do Material UI file upload. You can now utilize this knowledge to create complicated applications that follow material design principles.

Let’s make your file upload seamless with Filestack.

Filestack is a powerful API that manages billions of uploads, conversions, and downloads each month, delivering exceptional speed to consumers worldwide.

Read More →