Search⌘ K
Home
Courses
Building Full-Stack Web Applications With Node.js and React

Retrieve Files

Explore how to implement the retrieve operation in a full-stack app by fetching uploaded files from the server and displaying them in a grid. Understand using React components to represent files with content, names, and descriptions and set up client-side routing for file viewing.

We'll cover the following...

The second most important function from the CRUD operations is the retrieve operation, which allows the user to view and browse through their uploaded files. In this lesson, we’ll enable the retrieve operation feature in the application by creating a separate page to view the files in the form of a grid, and each file will be represented by a custom card component.

Retrieve service

We write the second service in the services/user.service.js file to retrieve all the files in the database that were uploaded by a certain user. We write the retrieve service as follows:

Javascript (babel-node)
// frontend/src/services/user.service.js
// ...rest of the code
const getFiles = () => {
  return axios.get(`/file`, {
    headers: { ...authHeader() },
  });
};
const UserService = {
  upload,
  getFiles,
};
export default UserService;
...