Cómo subir archivos a Back4app

La gestión eficaz de archivos es crucial cuando se desarrollan aplicaciones web que implican la carga de archivos por parte de los usuarios.

Back4app proporciona un mecanismo fácil y eficiente de almacenamiento, gestión y recuperación de archivos basado en Parse.

En esta guía, aprenderás a almacenar tus archivos usando Back4app integrando sus capacidades de almacenamiento de archivos con una app React.

Cómo funciona el almacenamiento de archivos en Back4app

Back4app gestiona la carga y almacenamiento de archivos utilizando la clase Parse.File.

La clase Parse.File permite almacenar archivos que son demasiado grandes para almacenarlos en Parse.Object, como imágenes, vídeos, documentos y cualquier otro dato binario.

Para subir un archivo al almacenamiento en la nube de Back4app, tienes que crear una instancia de Parse. File con los datos del archivo y guardar la instancia. Una nueva instancia de Parse. File requiere un nombre de archivo, el archivo y el tipo de contenido/archivo (opcional).

Es importante asegurarse de que el nombre del archivo contiene una extensión para ayudar a Parse a manejarlo adecuadamente.

Sin embargo, los nombres no tienen por qué ser únicos, ya que cada carga recibe un identificador único, por lo que cargar varios archivos con el nombre example.jpeg no provocará colisiones de nombres.

Cuando carga un archivo, Parse.File detecta automáticamente su tipo basándose en la extensión del nombre del archivo. Sin embargo, puede anular la detección automática especificando el parámetro Content-Type.

Para acceder a los archivos cargados en Back4app, es necesario asociarlos a un objeto de datos después de cargarlos.

A continuación, puede consultar el objeto de datos asociado para recuperar los archivos. Los archivos cargados pero no asociados a un objeto de datos se convierten en “archivos huérfanos” y no podrá acceder a ellos.

Ahora que entiendes cómo funciona el almacenamiento de archivos en Back4app, crearás una aplicación de galería con React para demostrar cómo puedes almacenar y recuperar archivos de Back4app.

Creación de una aplicación React

Para implementar las capacidades de almacenamiento de archivos de Back4app con React, primero necesitas crear una aplicación React para integrarla con Back4app. Para ello, se utiliza Vite, una herramienta front-end para construir rápidamente aplicaciones web.

Puedes crear una aplicación React con Vite ejecutando el siguiente comando en tu terminal:

npm init vite

Una vez que ejecute el comando anterior, Vite le pedirá que proporcione un nombre para el proyecto antes de dar una lista de opciones para seleccionar el marco que desea utilizar para construir su aplicación web.

Como se ve en la imagen anterior, el nombre del proyecto es gallery-app. Tras seleccionar la opción React, elegiremos el lenguaje de programación para desarrollar la aplicación React.

Para este proyecto, seleccione la opción JavaScript. Ahora, su proyecto está listo.

A continuación, debe instalar algunas dependencias necesarias en su proyecto. Para instalar las dependencias, cambie al directorio de su proyecto y ejecute el siguiente comando:

# Switch to the project directory
cd gallery-app

# Install dependencies
npm install

Este comando instalará todas las dependencias necesarias en tu proyecto, y ahora puedes empezar a construir tu aplicación en tu IDE.

Creación de la aplicación React

Abre tu proyecto React con tu IDE y crea una carpeta components en el directorio src. Dentro de la carpeta components, añade un componente FileUpload.

En el componente FileUpload, añada las siguientes líneas de código:

//FileUpload.jsx
import React from "react";

function FileUpload({updateData}) {
  const [file, setFile] = React.useState("");

  const handleFIleUpload = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <form>
      <label htmlFor="file-upload" className="custom-file-upload">
        Choose File
      </label>
      <input
        id="file-upload"
        type="file"
        style={{ display: "none" }}
        onChange={handleFileUpload}
      />
    </form>
  );
}

export default FileUpload;

El bloque de código anterior representa un componente FileUpload que permite seleccionar un archivo local. Contiene un estado de archivo. Utiliza un elemento de entrada del tipo de archivo para acceder y seleccionar un archivo local de su dispositivo.

En el bloque de código, hay una función handleFileSelect. Esta función utiliza el método setFile para actualizar el estado del archivo con el primer archivo seleccionado por el usuario.

Ahora, modifica el código en el componente de tu aplicación añadiendo las líneas de código en el bloque de código de abajo:

//App.jsx
import FileUpload from "./components/FileUpload";

function App() {
  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>
      <>
        <FileUpload />
      </>
    </main>
  );
}

export default App;

Este bloque de código importa el componente FileUpload y lo muestra dentro de un elemento principal. El componente también contiene un elemento h1 que renderiza el texto “Mi Galería”.

Ya tienes tus componentes listos. A continuación, necesitas dar estilo a la aplicación. Para ello, reemplace el código en su archivo index.css y agregue este código en su lugar:

/*index.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #F2F2F2;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

.container{
  inline-size: 60%;
  margin: auto;
}

.title{
  text-align: center;
  margin-block-start: 1rem;
  margin-block-end: 6rem;
}

.custom-file-upload {
  display: inline-block;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
}

.custom-file-upload:hover {
  background-color: #333333;
  color: #FFFFFF;
}

Configuración de una aplicación Back4app

Para configurar una aplicación Back4app, necesitas estar conectado a tu cuenta Back4app. Si no tienes una cuenta, puedes crear una gratis.

Una vez conectado, usted utilizará el agente AI de Back4app para crear una nueva aplicación. El agente AI es un servicio de Back4app que le permite interactuar y administrar sus aplicaciones Back4app usando prompts.

Puede acceder a ella haciendo clic en el enlace Agente AI de la barra de navegación del panel de control de su cuenta, como se muestra en la imagen siguiente.

Para crear una aplicación Back4app con el agente de IA, escriba un mensaje pidiéndole a la IA que cree la aplicación, similar al mensaje que se muestra a continuación:

Create a new Back4app application named gallery-app

El mensaje anterior hará que la IA cree una nueva aplicación Back4app. Una vez que la IA cree la aplicación, enviará una respuesta confirmando su creación junto con las credenciales de la aplicación.

Así:

Ahora, su aplicación Back4app está lista. Copia las credenciales App ID y JavaScript key porque las necesitarás más adelante.

Para acceder a la aplicación, visite el panel de control de su aplicación haciendo clic en el enlace “Mis aplicaciones” de la barra de navegación.

Ahora que has creado con éxito un backend Back4app utilizando el agente AI, a continuación, tendrás que conectar tu aplicación React a tu backend.

Conectando tu aplicación React a Back4app

Para conectar tu aplicación React a Back4app, necesitarás instalar Parse SDK ejecutando el siguiente comando:

npm install parse

A continuación, importa una versión minificada de parse en tu componente de aplicación e iníciala con las credenciales que guardaste anteriormente en el artículo añadiendo el bloque de código siguiente a tu componente de aplicación:

//App.jsx

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = "<https://parseapi.back4app.com/>";

Sustituya 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' por las credenciales obtenidas de su Back4App. Asegúrese de guardar las credenciales de forma segura, por ejemplo, utilizando variables env.

Subir archivos a Back4app

Para almacenar un archivo en el almacenamiento en la nube de Back4app, primero necesita crear una instancia de Parse.File. Después, necesitas guardar la instancia Parse. File llamando al método save en ella.

A continuación, hay que asociar el fichero guardado a un objeto de datos, para poder recuperar el fichero.

Para ello, cree una nueva subclase de Parse.Object, añada el archivo a una propiedad de su nueva subclase y guárdelo en Back4app.

Para implementar la lógica anterior, modifique la función handleFileUpload en el componente FileUpload para que coincida con el bloque de código siguiente:

//FileUpload.jsx
const handleFileUpload = async (event) => {
    event.preventDefault();
    try {
      let name = "image.jpg";
      const File = new Parse.File(name, event.target.files[0]);
      const photo = await File.save();

      const Gallery = Parse.Object.extend("Gallery");
      const gallery = new Gallery();
      gallery.set("photo", photo);
      await gallery.save();

      console.log("File saved:", File);
      updateData();
    } catch (error) {
      console.error("Error saving file:", error);
    }
  };

La función handleFileUpload contiene la lógica responsable de subir una foto desde tu dispositivo local al servidor. Crea una nueva instancia de Parse.File.

El método Parse. File toma dos argumentos: la variable name que representa el nombre de la foto y el primer archivo que selecciona el usuario.

La función guarda el archivo en el servidor llamando al método save de la instancia File. A continuación, crea un nuevo objeto Parse para una clase Gallery.

Mediante el método set, establece el archivo de la foto como valor de la propiedad photo del objeto gallery. Por último, la función guarda el objeto galería en el servidor con la función gallery.save().

Obtención de archivos de Back4app

Para obtener un archivo del almacenamiento en la nube de Back4app, necesita recuperar el objeto Parse que contiene el archivo. Para ello, cree una nueva consulta dirigida a la clase con el objeto Parse.

Para implementar la lógica anterior, cree un componente Feed y añádale el siguiente bloque de código:

//Feed.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";

function Feed({data}) {
  const [gallery, setGallery] = React.useState([]);

  React.useEffect(() => {
    const fetchFiles = async () => {
      let query = new Parse.Query("Gallery");
      const results = await query.find();
      setGallery(results);
    };
    fetchFiles();
  }, [data]);

  return (
    <div className="photos">
      {gallery.map((item) => (
        <img src={item.get("photo").url()} key={item.id} />
      ))}
    </div>
  );
}

export default Feed;

El bloque de código anterior crea un estado de galería y le asigna un array vacío. Utiliza el hook useEffect para ejecutar la función fetchFiles.

El hook useEffect ejecutará la función después de la primera renderización del componente y siempre que cambie el data prop.

La función fetchFiles crea una nueva consulta dirigida a la clase “Gallery ” con el método Parse.Query.

Al llamar al método find sobre la consulta se devuelve un array que contiene los resultados de la consulta. Por último, la función fetchFiles asigna el array de los resultados al estado gallery mediante la función setGallery.

Por último, con el método map, se genera un elemento img para cada elemento de la galería. El código establece el valor del atributo src del elemento img en la URL de la propiedad photo de cada elemento.

Estiliza el elemento div con la clase fotos añadiendo el bloque de código siguiente a tu archivo index.css:

/*index.css*/
.photos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-block-start: 4rem;
}

Para mostrar el componente Feed en su aplicación, asegúrese de importar y llamar al componente Feed en su componente App. Después de realizar todas las modificaciones, su componente App debe tener este aspecto:

//App.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
import FileUpload from "./components/FileUpload";
import Feed from "./components/Feed";

Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";

function App() {
  const [data, setData] = React.useState(1);

  const updateData = (prevState) => {
    setData(() => prevState + 1);
  };

  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>

      <>
        <FileUpload updateData={updateData} />
        <Feed data={data} />
      </>
    </main>
  );
}

export default App;

Pruebe su aplicación

Inicie su aplicación ejecutando el siguiente bloque de código en el directorio de su aplicación:

npm run dev

Ejecutando el comando anterior arrancará tu aplicación en http://localhost:5173/.

Navegue a http://localhost:5173/, y debería ver una página similar a la imagen siguiente:

Haz clic en el botón “Elegir archivo” y selecciona una imagen de tu dispositivo local.

Usted puede verificar si la imagen fue cargada exitosamente visitando el tablero de su aplicación Back4app.

Una vez que la carga se haya realizado correctamente, Back4app agregará una fila a la tabla de clase "Galería", como se muestra en la siguiente imagen.

También puede comprobarlo viendo la imagen en su pantalla, como se muestra en la imagen siguiente.

Despliegue de su aplicación en Back4app Containers

En esta sección, desplegarás tu aplicación en Back4app Containers. Para ello, primero debes dockerizar tu aplicación y empujarla a un repositorio de GitHub.

Puede ejecutar el proceso de despliegue manualmente usando la interfaz de Back4app o automáticamente usando el agente Back4app AI. Para este tutorial, ejecutará el proceso de despliegue utilizando el agente AI.

Creación de un archivo Dockerfile

Cree un Dockerfile en el directorio raíz de su aplicación y añádale el bloque de código:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

A continuación, cree un archivo .dockerignore en el directorio raíz de su aplicación y añádale el siguiente bloque de código:

node_modules

Añadir los módulos node al archivo .dockerignore asegurará que Docker excluya la carpeta node_modules del contexto al construir la imagen.

Ten en cuenta que has creado la aplicación React con Vite, por lo que tendrás que configurar Vite para que soporte Docker. Para configurar Vite, sustituye el código del vite.config.js por el bloque de código siguiente:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

Este bloque de código asegura que Vite sólo inicia el servidor si el puerto especificado está disponible, y especifica el número de puerto que el servidor de desarrollo escuchará en el puerto 5173.

A continuación, construye la imagen docker de la aplicación para asegurarte de que todo funciona ejecutando el siguiente comando en tu terminal:

docker build -t gallery-app .

Aquí, usted ha dockerizado con éxito su aplicación, y lo siguiente será desplegarla.

Despliegue de la aplicación

Antes de desplegar tu aplicación, integra tu cuenta de GitHub con la aplicación Back4app Github y dale acceso al repositorio que quieres desplegar.

Navegue hasta el agente AI e introduzca el siguiente mensaje para desplegar su aplicación:

Deploy my repository <<repository-url>> on Back4app containers

Sustituye repository-url por la URL del repositorio GitHub de tu aplicación. El mensaje anterior inicia el proceso de despliegue.

Como se ve en la imagen superior, el agente de IA ha iniciado el proceso de despliegue. Mientras tanto, el estado de despliegue es “desplegando”.

Transcurridos unos minutos, puede preguntar al agente de AI sobre el estado de despliegue de la aplicación. Si la aplicación se ha desplegado correctamente, el estado de despliegue cambiará a listo.

Así:

En la imagen anterior, puede ver que el estado de despliegue ha cambiado de “desplegando” a “listo”, lo que indica que la aplicación se ha desplegado correctamente y ya está activa.

Puede acceder a la aplicación en su navegador utilizando la URL de la aplicación proporcionada.

Conclusión

En este artículo, aprendiste cómo subir y recuperar archivos usando Back4app construyendo una simple aplicación de galería con React.

Además, exploró cómo implementar una aplicación React en Back4app utilizando el agente Back4app AI.

Con Back4app, puedes almacenar y gestionar tus archivos de forma eficiente y segura. El código utilizado en este tutorial está disponible en este repositorio de GitHub.