React & Axios FormData: Ejemplo de carga de archivos PHP con datos de múltiples formularios

 En este tutorial, aprenderá a manejar datos de formularios de varias partes en React mediante la implementación de un ejemplo simple de carga de archivos. Usaremos Axios y HTML5 FormData.

Para el backend, usaremos una aplicación PHP simple que expone un punto final único que acepta una solicitud POST que contiene el archivo / imagen para cargar.

Prerrequisitos

Deberá tener los siguientes requisitos previos para este tutorial:

• Conocimiento de JavaScript,
• Una experiencia laboral de React,
• Conocimiento de PHP,
• PHP instalado en su máquina,
• Node.js y NPM instalados en su máquina.

Creación de la aplicación de carga de archivos PHP

Abra una nueva terminal y cree una carpeta para nuestro proyecto:

$ mkdir react-php-file-upload

A continuación, navegue dentro de la carpeta de su proyecto y cree una backendcarpeta con un upload.phparchivo:

$ cd react-php-file-upload
$ mkdir backend && cd backend
$ touch upload.php

Abra el upload.phparchivo y agregue el siguiente código:

<?php 
header('Content-Type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");



$response = array();
$upload_dir = 'uploads/';
$server_url = 'http://127.0.0.1:8000';

if($_FILES['avatar'])
{
    $avatar_name = $_FILES["avatar"]["name"];
    $avatar_tmp_name = $_FILES["avatar"]["tmp_name"];
    $error = $_FILES["avatar"]["error"];

    if($error > 0){
        $response = array(
            "status" => "error",
            "error" => true,
            "message" => "Error uploading the file!"
        );
    }else 
    {
        $random_name = rand(1000,1000000)."-".$avatar_name;
        $upload_name = $upload_dir.strtolower($random_name);
        $upload_name = preg_replace('/\s+/', '-', $upload_name);

        if(move_uploaded_file($avatar_tmp_name , $upload_name)) {
            $response = array(
                "status" => "success",
                "error" => false,
                "message" => "File uploaded successfully",
                "url" => $server_url."/".$upload_name
              );
        }else
        {
            $response = array(
                "status" => "error",
                "error" => true,
                "message" => "Error uploading the file!"
            );
        }
    }    

}else{
    $response = array(
        "status" => "error",
        "error" => true,
        "message" => "No file was sent!"
    );
}

echo json_encode($response);
?>

A continuación, inicie el servidor PHP usando el siguiente comando desde la raíz de su proyecto:

$ php -S 127.0.0.1:8080

Ahora, tenemos un servidor PHP en ejecución que expone un /upload.phppunto final REST.

Instalando create-react-app

Instalemos la create-react-appherramienta. Abra una nueva terminal y ejecute el siguiente comando:

$ npm install -g create-react-app

Creando la aplicación React

Creemos ahora nuestro proyecto React. En su terminal, ejecute el siguiente comando:

$ cd react-php-file-upload
$ create-react-app frontend

Después de crear los archivos e instalar las dependencias, puede iniciar su aplicación React usando los siguientes comandos:

$ cd frontend
$ npm start

Su aplicación React se ejecutará desde la http://localhost:3000dirección. Esto también abrirá automáticamente su navegador web y navegará a esa dirección.

Crear un componente de formulario de carga de archivos de React

Ahora creemos un componente que contiene un formulario para cargar archivos. En la src/carpeta, cree un FileUploadForm.jsarchivo y comience agregando el siguiente código:

import React from 'react'
import axios from 'axios';

class FileUploadForm extends React.Component {}
export default FileUploadForm;

Importamos Reactyaxios creamos y exportamos el FileUploadFormcomponente.

A continuación, cree una filevariable de estado para mantener el archivo a cargar:

class FileUploadForm extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
          file:null
        }
    }
}

Crear un formulario para seleccionar el archivo

A continuación, defina el render()método del componente que genera un formulario HTML:

      render() {
        return (
          <form onSubmit={ this.onSubmit }>
            <h1> React File Upload Example</h1>
            <input type="file" onChange={ this.onChange } />
            <button type="submit">Upload File</button>
          </form>
       )
      }

Vinculamos el onSubmitevento del formulario al onSubmit()método y el onChangeevento de la <input>etiqueta al onChange()método que se llama al seleccionar un archivo.

A continuación, debemos definir los métodos onSubmit()y onChange()en el componente de la siguiente manera:

    async onSubmit(e){
        e.preventDefault() 
        let res = await this.uploadFile(this.state.file);
        console.log(res.data);
    }
    onChange(e) {
        this.setState({file:e.target.files[0]})
    }

El onChange()método llama al setState()método para establecer la filevariable de estado en el archivo seleccionado. Este método se llama cuando se selecciona un archivo en la <input>etiqueta de archivo .

El onSubmit()método llama al uploadFile()método para cargar el archivo seleccionado en el servidor PHP. El archivo se pasa como parámetro al método desde la filevariable de estado.

Carga de archivos con Axios y FormData

Definamos ahora el uploadFile()método de la siguiente manera:

    async uploadFile(file){


        const formData = new FormData();

        formData.append('avatar',file)

        return  await axios.post(this.UPLOAD_ENDPOINT, formData,{
            headers: {
                'content-type': 'multipart/form-data'
            }
        });
      }

Primero creamos una instancia de FormData, luego agregamos el archivo con la avatarclave, ya que nuestra aplicación de carga de archivos PHP espera que el archivo exista bajo una avatarclave en la $_FILESmatriz.

A continuación, llamamos al post()método de axiosy pasamos la formDatainstancia como el objeto de datos. También configuramos el content-typeencabezado de la solicitud en multipart/form-data.

Finalmente, abra el src/App.jsarchivo e importe el FileUploadFormcomponente y luego llámelo en el render()método:

import FileUploadForm  from "./FileUploadForm.js"

class App extends Component {
    render() {
        return (
            <FileUploadForm />
        );
    }
}
export default App;

Esta es una captura de pantalla de la interfaz de usuario del formulario de carga:

Esta es la esencia del ejemplo de carga de archivos PHP:

Esta es la esencia del componente de formulario de carga de archivos de React:

Conclusión

En este tutorial hemos utilizado React, Axios y HTML5 FormDatacon un servidor PHP para crear un ejemplo simple de carga de archivos con datos de formulario de varias partes.