Activitats

Càrrega de fitxers

L’objectiu d’aquesta activitat és aprofundir en l’aprenentatge de la comunicació client-servidor utilitzant formularis i servlets per permetre a l’usuari pujar un fitxer al servidor d’aplicacions.

Implementeu una pàgina web que estigui associada a un servlet i que permeti a l’usuari pujar un fitxer al servidor.

La solució de l’exercici la podeu descarregar en aquest

enllaç ( 5.4 KB )

Començarem l’activitat creant un nou projecte Maven. Aneu a File / New Project / Maven / Web Application. No esborreu el fitxer index.html, ja que el necessitarem per implementar la vista amb el formulari web.

A continuació, creeu un servlet nou anomenat CarregaFitxerServlet.java i modifiqueu-lo perquè contingui el següent codi:

@WebServlet(name = "CarregaFitxerServlet", urlPatterns = {"/CarregaFitxerServlet"})
@MultipartConfig(location = "/tmp")
public class CarregaFitxerServlet extends HttpServlet {
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
 
        try (PrintWriter out = response.getWriter()) {
            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet CarregaFitxerServlet</title>");
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Càrrega de Fitxers</h1>");
            Part p = request.getPart("fitxer");
            p.write(p.getSubmittedFileName());
            out.println("<p>S'ha pujat el fitxer.</p>");
            out.println("</body>");
            out.println("</html>");
        }
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
 
    @Override
    public String getServletInfo() {
        return "Short description";
    }
}

Si utilitzeu Windows com a sistema operatiu canvieu la línia @MultipartConfig(location = ”/tmp”) per @MultipartConfig(location = “C:\Users\nomuser\tmp”).

Primer de tot, vegeu que s’ha introduït la notació @MultipartConfig després de la declaració del servlet. Aquesta notació indica que el servlet espera el tipus MIME multipart/form-data en la petició de l’usuari, és a dir, dintre de l’objecte request.

El tipus multipart/form-data indica que el client pot enviar un fitxer amb un input del tipus file. El formulari del client web també ha d’incloure aquests tipus MIME en la seva codificació en enviar el formulari.

Un paràmetre que admet aquesta notació és la ubicació del servidor, location, on es volen dipositar els fitxers pujats pel client web. En aquest cas hem escollit la carpeta temporal /tmp, on sabem que tothom té permisos per escriure. La ubicació subministrada ha de ser una ruta absoluta; no podem indicar la ruta utilitzant rutes relatives a la ubicació del servlet en el servidor.

Un altre paràmetre que podem afegir és el MaxFileSize, que indica la mida màxima del fitxer en el disc (en bytes). Si la mida del fitxer és superior a la indicada, el contenidor web llençarà una excepció (IllegalStateException). Per defecte, la mida del fitxer és il·limitada.

En comptes d’utilitzar aquesta notació també es pot introduir en el fitxer web.xml les etiquetes corresponents a aquesta funcionalitat. Aquestes etiquetes han d’estar dintre de les etiquetes del servlet al qual pertany la funcionalitat de rebre un fitxer des d’un client web.

<multipart-config>
    <location>/tmp</location>
    <max-file-size>20848820</max-file-size>
</multipart-config>

A continuació s’ha d’implementar la manera per recuperar el fitxer enviat per l’usuari. Vegeu el següent codi:

Part p = request.getPart("fitxer");
p.write(p.getSubmittedFileName());

El codi anterior utilitza el mètode getPart() de l’objecte request. Com que en un formulari web podem pujar més d’un fitxer, a aquests fitxers se’ls anomena parts. Podem accedir a les parts amb el nom que s’ha definit a l’input del formulari web. En aquest cas, el nom de l’input que rep un fitxer s’anomena fitxer.

Una vegada hem accedit al fitxer (Part9) s’escriu on toca dintre del servidor.

p.write(p.getSubmittedFileName());

El nom del fitxer s’obté amb el mètode getSubmittedFileName(), però podríem haver utilitzat un altre nom. Penseu que en escriure fitxers dels usuaris en un servidor web ens hem d’assegurar que no se sobreescriu un altre que té el mateix nom. Per evitar-ho és normal l’ús d’identificadors únics.

Només ens queda modificar el fitxer index.html creat amb el projecte Maven per afegir un formulari que contingui un input que permeti a l’usuari pujar un fitxer:

<!DOCTYPE html>
<html>
    <head>
        <title>Càrrega de fitxers</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>Pujar un fitxer</h1>
        <form action="CarregaFitxerServlet"
              enctype="multipart/form-data"
              method="POST">
            <input type="file" name="fitxer"><br>
            <input type="Submit" value="Pujar fitxer"><br>
        </form>
    </body>
</html>

Vegeu que s’ha afegit l’atribut enctype en formular. Aquest atribut indica al servidor web que s’envia un fitxer com a part de les dades del formulari. Per tant, el servlet CarregaFitxerServlet ha de contenir la notació @MultipartConfig associada.

L’únic que s’ha afegit al formulari és l’input per pujar fitxers. Fixeu-vos que el seu nom, fitxer, correspon al nom utilitzat en el servlet anterior per recuperar-lo.

//al formulari
<input type="file" name="fitxer"><br>
//i al servlet
Part p = request.getPart("fitxer");