NodeJS | Enviando, Recebendo arquivos | #22

Working with Files in Node.js API

Introduction to File Handling

• The session introduces a new topic on how to work with files in a Node.js API, emphasizing the importance of data transfer within APIs.

• It highlights that files can be sent to an API, similar to uploading a profile picture on social media platforms.

Types of Files and Their Management

• The discussion focuses on handling various file types such as images, videos, and audio files, with the current example centered around image files.

• It stresses the necessity of both sending and retrieving images from the API for effective functionality.

Using Multer for File Uploading

• The tutorial introduces multer, a middleware package that simplifies file uploads in Node.js applications.

• Installation of multer is demonstrated using npm commands, preparing for its configuration in the application.

Setting Up Storage for Uploaded Files

• A storage directory named "Storage" is created where uploaded files will be stored. Subdirectories can also be established based on specific needs (e.g., profile pictures).

• A variable called uploadPerfil is defined using multer, specifying where incoming files should be saved.

Configuring Routes for File Upload

• The route setup involves defining an endpoint (/perfil) that utilizes uploadPerfil to handle file uploads seamlessly.

• The configuration specifies that only one image will be accepted at a time by using .single() method along with naming the parameter as 'imagem'.

Accessing Uploaded File Information

• After successfully uploading an image, information about the uploaded file can be accessed through properties like path and filename via req.file.

Image Upload and Handling in API

Understanding Image Metadata

• The speaker discusses the various metadata associated with images, such as format (JPEG), original name, and size. This information can be accessed programmatically.

• Emphasizes that while the original name may not serve a functional purpose, it is still useful to demonstrate what data can be retrieved from an uploaded image.

File Upload Process

• The process of sending image data through an API endpoint is outlined, specifically using a POST request to upload images.

• The speaker explains how to set up the request body for file uploads, noting that it should use form-data instead of JSON.

Selecting and Sending Images

• Instructions are given on how to select an image file for upload, highlighting the importance of naming conventions for parameters.

• A demonstration of saving an image locally is provided, ensuring compatibility by choosing common formats like .webp.

Response Handling

• After selecting an image and sending it via the API, the response includes details about where the image was stored and its MIME type.

• The speaker notes that Multer automatically generates unique identifiers for files to prevent naming conflicts during uploads.

Issues with File Extensions

• It’s mentioned that if a file lacks an extension upon saving, it may not open correctly; however, users can manually change extensions if needed.

• The discussion shifts towards understanding how different types of files (audio/video/images) can be handled similarly within APIs.

Future Integration with Databases

• The potential integration of uploaded images with databases is introduced. This would allow better management and retrieval of uploaded content in future applications.

Creating Routes for Image Access

• An explanation follows on setting up routes in the API to access stored images effectively.

• The speaker demonstrates how to create HTML elements dynamically to display images fetched from the API.

How to Manage API Access and Static Files

Understanding API Restrictions

• The speaker discusses an issue where an image is not found due to access restrictions on the storage folder in their API. This indicates that certain folders are not accessible by default.

• It is emphasized that only endpoints explicitly permitted in the code are available for external access, ensuring security by restricting access to source files.

Granting Access to Storage Folders

• The speaker explains how to grant access to a specific storage folder (profile storage) within the API, highlighting the importance of controlled access.

• To enable this, they introduce a method using Express.js, specifying the path (/Storage/profile) that needs permission for external access.

Using Express Static Middleware

• The use of express.static middleware is explained as a way to serve static files from the specified directory. This allows all files within /Storage/profile to be accessed externally.

• If desired, individual folders can also be granted access selectively, demonstrating flexibility in managing file permissions.

Testing and Implementation