Skip to content

Instantly share code, notes, and snippets.

Created March 16, 2023 00:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
componente para subir imagenes a cloudinary con NextJS y Next-Cloudinary
import React, { useState } from 'react'
import { CldUploadWidget } from 'next-cloudinary';
const cloudinary = () => {
const [imagen, setImagen] = useState('')
//opciones de cloudinary widget
const cloudinaryOptions = {
sources: ['local'],
multiple: false,
folder: 'tarjetas',
resourceType: 'image',
language: 'es',
text: {
es: {
close: 'Cerrar',
search_placeholder: 'Buscar archivos',
about_uw: 'Acerca de Upload Widget',
menu: {
files: 'Mis archivos',
local: {
browse: 'Buscar imagen',
dd_title_single: 'Arrastra y suelta tu archivo aquí',
dd_title_multi: 'Arrastra y suelta archivos aquí',
drop_title_single: 'Arrastra y suelta un archivo para cargarlo',
drop_title_multiple: 'Arrastra y suelta archivos para cargarlos',
selection_counter: {
selected: 'Seleccionado',
queue: {
title: 'Archivo subido',
title_uploading_with_counter: 'Cargando {{num}} elementos',
title_uploading: 'Cargando elementos',
mini_title: 'Cargados',
mini_title_uploading: 'Cargado',
show_completed: 'Mostrar completado',
retry_failed: 'Reintento fallido',
abort_all: 'Cancelar todos',
upload_more: 'Cargar mas',
done: 'Listo',
mini_upload_count: '{{num}} cargados',
mini_failed: '{{num}} fallidos',
statuses: {
uploading: 'Cargando…',
error: 'Error',
uploaded: 'Listo',
aborted: 'Cancelado',
errors: {
'El tamaño del archivo ({{size}}) excede el máximo permitido ({{allowed}})',
allowed_formats: 'Formato de archivo no permitido',
max_file_size: 'El archivo es demasiado grande',
min_file_size: 'El archivo es muy pequeño',
return (
onUpload={function (result, widget) {
{({ open }) => {
function handleOnClick(e) {
return (
className="mt-3 h-10 px-5 m-2 text-white transition-colors duration-150 bg-blue-600 rounded-2xl focus:shadow-outline hover:bg-blue-400"
Subir imagen
export default cloudinary
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment