¿Cómo usar imgur para alojar imágenes en ReactsJS? || ebooksonline.es

ReaccionarJS es una biblioteca JavaScript de código abierto de front-end para crear interfaces de usuario o componentes de interfaz de usuario. Es la biblioteca de caras más popular del mercado y la mantiene Facebook Corporation. Alan Schaaf fundó Imgur en 2009 como una plataforma de alojamiento de imágenes. Al igual que Reddit, otros usuarios pueden votar o rechazar las imágenes cargadas.

Imgur se utiliza principalmente como un servicio para compartir imágenes, donde los usuarios publican contenido a través de una interfaz proporcionada por la empresa, al igual que Facebook o Instagram. Pero también podemos publicar imágenes en Imgur accediendo a sus API. Entonces, en este artículo, discutiremos cómo cargar imágenes en Imgur en React sin depender de ninguna otra biblioteca de terceros como Axios.

Requisito previo:

Introducción a React.js
Obtenga una API
Reaccionar UseState

Creación de una aplicación React:

Paso 1: Cree una nueva aplicación React usando el siguiente comando.

npx create-react-app react-imgur

Estructura del proyecto: Se verá como lo siguiente.

Paso 2: Ahora vaya a la carpeta del proyecto e inicie la aplicación de reacción.

cd react-imgur
npm start

Paso 3: Ahora, veamos cómo registrar una aplicación Imgur. Visite https://imgur.com/register para crear una nueva cuenta de usuario.

Paso 4: Después de verificar su cuenta, visite https://api.imgur.com/oauth2/addclient para registrarse y recibir una nueva solicitud.

Paso 5: Vaya al submenú de la aplicación a la Identificación del cliente

Paso 6: Retire todo de la aplicación componente i carpeta_proyecto/src/App.js.

Paso 7: Declarando un nuevo estado expediente usando un enlace useState para almacenar nuestro archivo antes de enviar una solicitud POST.

const [file, setFile] = useState();

Paso 8: Cree un campo de entrada que acepte el archivo de imagen como entrada.

<input type="file" onChange={onFileChange} />

Paso 9: Cree una función onFileChange que actuará como un controlador de eventos para detectar cualquier cambio realizado en el archivo.

  const onFileChange = event => {
   // Updating the state
   setFile({ file: event.target.files[0] });
 };

Paso 10: Crea una función onFileUpload que subirá nuestra imagen al servidor imgur. Este proceso se puede dividir en cuatro etapas:

Crear nuevos datos de formulario.
Prepare una nueva solicitud con ID de cliente y detalles del formulario.
Enviar la solicitud de empleo.
Manejar la respuesta.

const onFileUpload = async () => {
  // Client ID
  const clientId = "fd2e1e3d3d12ce1",
    auth = "Client-ID " + clientId;

  // Creating an object of formData
  const formData = new FormData();

  // Adding our image to formData
  formData.append("file", file);

  // Making the post request
  await fetch("https://api.imgur.com/3/image/", {
    // API Endpoint
    method: "POST", // HTTP Method
    body: formData, // Data to be sent
    headers: {
      // Setting header
      Authorization: auth,
      Accept: "application/json",
    },
  })
    .then((res) => alert("image uploaded") && console.log(res)) // Handling success
    .catch((err) => alert("Failed") && console.log(err)); // Handling error
};

Paso 11: Agregue un botón que active la función onFileUpload.

<button onClick={onFileUpload}>Upload</button>

Paso 12: En este punto por Aplicación.js debería verse bien.

Código completo:

JavaScript

import { useState } from "react";
 
function App() {
  const [file, setFile] = useState();
  const onFileChange = (event) => {
    // Updating the state
    setFile({ file: event.target.files[0] });
  };
  const onFileUpload = async () => {
    // Client ID
    const clientId = "fd2e1e3d3d12ce1",
      auth = "Client-ID " + clientId;
 
    // Creating an object of formData
    const formData = new FormData();
 
    // Adding our image to formData
    formData.append("file", file);
 
    // Making the post request
    await fetch("https://api.imgur.com/3/image/", {
      // API Endpoint
      method: "POST", // HTTP Method
      body: formData, // Data to be sent
      headers: {
        // Setting header
        Authorization: auth,
        Accept: "application/json",
      },
    })
      // Handling success
      .then((res) => alert("image uploaded") && console.log(res)) 
      .catch((err) => alert("Failed") && console.log(err)); 
  };
  return (
    <>
      <input name="file" type="file" onChange={onFileChange} />
      <button onClick={onFileUpload}>Upload</button>
    </>
  );
}
 
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

producción: Ejecute la aplicación y navegue hasta http://localhost:3000/

Mis notas personales

JavaScript

Seguro que también te interesa

Deja un comentario Cancelar respuesta