Cargue varios archivos en Spring Boot usando JPA, Thymeleaf, Multipart

Spring Boot está construido en la parte superior del resorte y contiene todas las características del resorte. Y se está convirtiendo en el favorito de los desarrolladores en estos días debido a su rápido entorno listo para producción que les permite concentrarse directamente en la lógica en lugar de luchar con la configuración y la instalación. Spring Boot es un marco basado en microservicios y crear una aplicación lista para producción lleva muy poco tiempo. En este artículo, aprenderemos cómo cargar varios archivos en el servidor con la ayuda de Spring Boot. Entonces, para que tenga éxito, usaremos MySQL como base de datos, Thymeleaf como motor de plantillas y JPA para guardar los datos en la base de datos.

Proceso paso a paso

Paso 1: Primero configuraremos el proyecto Spring en STS (Spring tool suite) IDE. Cuyas instrucciones se dan a continuación.

• Haga clic en Archivo -> Nuevo -> Proyecto -> Seleccione Proyecto Spring Starter  -> Haga clic en Siguiente.
• Se abrirá un nuevo cuadro de diálogo donde proporcionará la información relacionada con el proyecto, como el nombre del proyecto, la versión de Java, la versión de Maven, etc.
• Después de eso, seleccione las dependencias maven requeridas como MySQL Driver (para la base de datos), Spring Data JPA, Spring Web, Thymeleaf, Spring Boot DevTools para (Proporciona reinicios rápidos de aplicaciones, LiveReload y configuraciones para una experiencia de desarrollo mejorada).
• Haga clic en Finalizar .

Paso 2: después de la compilación, debemos crear una estructura de paquete para todos los archivos Java como este. Aquí nuestro nombre de proyecto es FileUpload .

Paso 3: Comencemos con la codificación

archivo application.properties:

# It means server will run on port 8080
server.port=8080    

# connection url
spring.datasource.url=jdbc:mysql://localhost:3306/filedb 
   
# DB user  
spring.datasource.username=root   

# DB password
spring.datasource.password=[Your Password]  
  
# update the schema
spring.jpa.hibernate.ddl-auto=update  

# translate its generic SQL statements into vendor specific DDL, DML
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLInnoDBDialect   
   
# off to show SQL query
spring.jpa.show-sql=false 

Nota: antes de configurar el archivo application.properties , asegúrese de haber creado el esquema en su base de datos.

A través del banco de trabajo MySql.

A través de la línea de comandos de MySql .

• Abra la línea de comandos de Mysql.
• Ejecute crear base de datos archivada ; y pulsa enter.

FileModal.java

Escribamos una clase POJO simple que sirva como entrada y salida para nuestros métodos de servicio web.

package com.example.user.modal;
 
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Lob;
import javax.persistence.Table;
 
// Entity annotation defines that a
// class can be mapped to a table
@Entity  
 
// @Table annotation defines name of the table
@Table(name = "filemodal")
public class FileModal {
    // @Id annotation specifies the
    // primary key of an entity
    @Id 
   
    // @GeneratedValue annotation Provides for the
    // specification of generation strategies
    // for the values of primary keys
    @GeneratedValue(strategy = GenerationType.IDENTITY)
  
    // @Column annotation specifies
    // the name of the column
    @Column(name = "id")
    long id;
    @Column(name = "name")
    String fileName;
    @Lob
    @Column(name = "content")
    String content;
    @Column(name = "filetype")
    private String fileType;
 
    public FileModal() {
        super();
    }
    public FileModal(String fileName, String content, String fileType) {
        super();
        this.fileName = fileName;
        this.content = content;
        this.fileType = fileType;
    }
    public String getFileName() {
        return fileName;
    }
    public void setFileName(String fileName) {
        this.fileName = fileName;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public String getFileType() {
        return fileType;
    }
    public void setFileType(String fileType) {
        this.fileType = fileType;
    }
}

FileRepository.java

FileRepository.java amplía la interfaz JpaRepository para operaciones de base de datos.

package com.example.user.repoasitory;
 
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.example.user.modal.FileModal;
 
// @Repository annotation is used to
// indicate that the class provides the mechanism
// for storage, retrieval, search,update and delete
// operation on objects.
@Repository
public interface FileRepository extends JpaRepository<FileModal, Long> {
 
}

FileService.java

Interfaz FileService.java que contiene dos métodos abstractos getAllFiles() y saveAllFilesList(List<FileModal> fileList).

package com.example.user.service;
 
import java.util.List;
import com.example.user.modal.FileModal;
 
public interface FileService {
    List<FileModal> getAllFiles();
    void saveAllFilesList(List<FileModal> fileList);
}

FileServiceImplementation.java

Clase FileServiceImplementation.java que implementa la interfaz FileService.java y proporciona la definición de los métodos abstractos. 

package com.example.user.service;
 
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.user.modal.FileModal;
import com.example.user.repoasitory.FileRepository;
 
// @Service annotation is used with classes
// that provide some business functionalities
@Service
public class FileServiceImplementation implements FileService {
 
    // @Autowired annotation used to inject
    // the object dependency of FileRepository
    @Autowired 
    FileRepository fileRepository;
   
    @Override
    public List<FileModal> getAllFiles() {
        // fetch all the files form database
        return fileRepository.findAll();
    }
    public void saveAllFilesList(List<FileModal> fileList) {
        // Save all the files into database
        for (FileModal fileModal : fileList)
            fileRepository.save(fileModal);
    }
}

FileController.java

Esta clase FileController.java recibe entradas de los usuarios a través de View, luego procesa los datos del usuario con la ayuda de Model y devuelve los resultados a View. Entonces, aquí el usuario cargará archivos desde la interfaz de usuario. Se recibirán como una array de varias partes en el método respectivo. 

package com.example.user.controller;
 
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.example.user.modal.FileModal;
import com.example.user.service.FileServiceImplementation;
 
// @Controller annotation is used to
// mark any java class as a controller class
@Controller 
public class FileController {
 
    @Autowired
    FileServiceImplementation fileServiceImplementation;
 
    // @GetMapping annotation for
    // mapping HTTP GET requests onto
    // specific handler methods. */
    @GetMapping("/")
    public String getData() {
        return "File";
    }
   
    // @PostMapping annotation maps HTTP POST
    // requests onto specific handler methods
    @PostMapping("/")
    public String uploadMultipartFile(@RequestParam("files") MultipartFile[] files, Model modal) {
    try {
        // Declare empty list for collect the files data
        // which will come from UI
        List<FileModal> fileList = new ArrayList<FileModal>();
        for (MultipartFile file : files) {
            String fileContentType = file.getContentType();
            String sourceFileContent = new String(file.getBytes(), StandardCharsets.UTF_8);
            String fileName = file.getOriginalFilename();
            FileModal fileModal = new FileModal(fileName, sourceFileContent, fileContentType);
             
            // Adding file into fileList
            fileList.add(fileModal);
            }
       
            // Saving all the list item into database
            fileServiceImplementation.saveAllFilesList(fileList);
 
        } catch (Exception e) {
            e.printStackTrace();
        }
       
        // Send file list to View using modal class   
        // fileServiceImplementation.getAllFiles() used to
        // fetch all file list from DB
        modal.addAttribute("allFiles", fileServiceImplementation.getAllFiles());
       
        return "FileList";
    }
}

FileApplication.java

Esta es la clase principal desde donde las aplicaciones Spring están listas para ejecutarse.

package com.example.user;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
// Spring Boot @SpringBootApplication annotation is used to mark a configuration
// class that declares one or more @Bean methods and also triggers auto-configuration
// and component scanning. It’s the same as declaring a class with @Configuration,
// @EnableAutoConfiguration and @ComponentScan annotations
@SpringBootApplication
public class FileApplication {
 
    public static void main(String[] args) {
        SpringApplication.run(FileApplication.class, args);
    }
 
}

Archivo.html

Así que aquí en este archivo HTML <input type=”file”> acepta un solo archivo. Puede permitir múltiples archivos a través de <input type=”file” multiple> y webkitdirectory cambia el selector de archivos del navegador para seleccionar un directorio. Todos los archivos dentro de ese directorio, y dentro de cualquier subdirectorio anidado, se seleccionarán para la entrada del archivo. y enctype=’multipart/form-data es un tipo de codificación que permite enviar archivos a través de un POST. Sencillamente, sin esta codificación, los archivos no se pueden enviar a través de POST. Si desea permitir que un usuario cargue un archivo a través de un formulario, debe usar este enctype .

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>File Upload</title>
</head>
 
<style>
input[type=file], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #1affff;
}
 
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 45%;   
    cursor: pointer;
}
 
.button4 {
    border-radius: 10px;
}
 
div {
    border-radius: 5px;
    background-color: #a6a6a6;
    padding: 10px;
    width: 50%;
    margin: auto;
}
</style>
<body>
    <form method="POST" enctype="multipart/form-data">
        <div><div>
            <input type="file" name="files"
             webkitdirectory multiple></div>
            <button class="button button4" type="submit">
             Upload</button> </div>
    </form>
</body>
</html>

ListaArchivos.html

Así que aquí, en este archivo HTML, simplemente imprimimos los datos relacionados con el archivo usando el ciclo thymeleaf.

<tr th:each="file: ${allFiles}">
       <td th:text="${file.fileName}"></td>
       <td th:text="${file.fileType}"></td>
</tr>

Este es el bucle thymeleaf para iterar todos los elementos de la lista allFiles que proviene del controlador Java a través de modal.addAttribute(“allFiles”, fileServiceImplementation.getAllFiles()); método en la forma del par clave-valor.

• th:each=”file: ${allFiles}” -> Asignar el FileModal a la variable de nombre de archivo uno por uno.
• th:text=”${file.fileName}” -> Aquí accede al campo fileName que ha escrito en FileModal Pojo.
• th:text=”${file.fileType}” -> Aquí accede al campo de tipo de archivo que ha escrito en FileModal Pojo.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>All files</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
      4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
        jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/
        umd/popper.min.js"></script>
<script    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/
        bootstrap.min.js"></script>
</head>
 
<body>
    <div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
    <div class="col-md-7 table-responsive">
    <h2>Uploaded Files</h2>
    <table id="customerTable" class="table">
    <thead>
            <tr>
                <th>File Name</th>
                <th>File Type</th>
            </tr>
    </thead>
    <tbody>
            <tr th:each="file: ${allFiles}">
                <td th:text="${file.fileName}"></td>
                <td th:text="${file.fileType}"></td>
            </tr>
    </tbody>
    </table>
    <hr>
    <div>
         <a href="/" class="btn btn-light btn-block"
           role="button">Back to Upload Form</a>
    </div>
    </div>
    </div>
    </div>
</body>
</html>

Entonces, cuando complete todos los pasos anteriores. luego simplemente ejecute su aplicación como Spring Boot.

• Haga clic derecho en su proyecto -> Ejecutar como -> Aplicación Spring boot
• Abra su navegador y escriba localhost:8080/ en URL y presione enter.

Producción: