ImageUpload

import { ImageUpload } from "@arkyn/components";

<ImageUpload
  name="avatar"
  action="/api/upload/image"
  label="Selecione uma imagem"
/>

<ImageUpload
  name="profilePicture"
  action="/api/upload/avatar"
  label="Foto de Perfil"
  showAsterisk
  defaultValue={user.avatarUrl}
  selectImageButtonText="Escolher Foto"
  changeImageButtonText="Trocar Foto"
  dropImageText="Arraste sua foto aqui"
  onChange={(url) => updateUserAvatar(url)}
/>

{
  /* Upload de produto com formatos específicos */
}
<ImageUpload
  name="productImage"
  action="/api/upload/product"
  label="Imagem do Produto"
  acceptImage=".jpg,.jpeg,.png,.webp"
  selectImageButtonText="Selecionar Produto"
  dropImageText="Arraste imagem do produto aqui (JPG, PNG, WebP)"
  onChange={(url) => setProductImage(url)}
/>;

{
  /* Logo com formatos vetoriais */
}
<ImageUpload
  name="companyLogo"
  action="/api/upload/logo"
  label="Logo da Empresa"
  acceptImage=".png,.svg,.jpg"
  selectImageButtonText="Escolher Logo"
  dropImageText="Arraste logo aqui (PNG, SVG, JPG)"
/>;

{
  /* Avatar com alta qualidade */
}
<ImageUpload
  name="highResAvatar"
  action="/api/upload/avatar"
  label="Avatar Alta Resolução"
  acceptImage="image/jpeg,image/png"
  selectImageButtonText="Selecionar Avatar"
  dropImageText="Arraste avatar em alta resolução"
/>;

<ImageUpload
  name="galleryImage"
  action="/api/gallery/upload"
  method="PUT"
  fileName="galleryImage"
  fileResponseName="downloadUrl"
  label="Imagem da Galeria"
  selectImageButtonText="Adicionar à Galeria"
  changeImageButtonText="Trocar Imagem"
  dropImageText="Arraste imagem para galeria"
  onChange={(url) => {
    if (url) {
      addToGallery(url);
      console.log("Image added to gallery:", url);
    }
  }}
/>

<ImageUpload
  name="readonlyImage"
  action="/api/upload"
  label="Imagem do Sistema"
  defaultValue={systemImage.url}
  disabled
/>

function ImageUploadWithCallback() {
  const [uploadStatus, setUploadStatus] = useState({
    loading: false,
    error: "",
    imageUrl: "",
  });

  const handleImageUpload = (url?: string) => {
    if (url) {
      setUploadStatus({
        loading: false,
        error: "",
        imageUrl: url,
      });

      // Processar imagem uploaded
      processUploadedImage(url);

      // Atualizar estado da aplicação
      updateAppState({ profileImage: url });
    }
  };

  return (
    <ImageUpload
      name="profileImage"
      action="/api/upload/profile"
      label="Foto de Perfil"
      showAsterisk
      onChange={handleImageUpload}
      selectImageButtonText="Escolher Foto"
      dropImageText="Arraste sua foto de perfil aqui"
    />
  );
}

// Sucesso (configuração padrão)
{
  "url": "https://example.com/uploads/image123.jpg"
}

// Sucesso (configuração customizada)
{
  "imageUrl": "https://example.com/images/avatar.png",
  "thumbnailUrl": "https://example.com/images/avatar_thumb.png",
  "fileName": "avatar.png",
  "size": 1024000
}

// Erro
{
  "error": "Arquivo muito grande. Máximo permitido: 5MB para imagens"
}

// server.js
const multer = require("multer");
const sharp = require("sharp"); // Para processamento de imagem

const upload = multer({
  dest: "uploads/",
  fileFilter: (req, file, cb) => {
    // Validar tipos de imagem
    if (file.mimetype.startsWith("image/")) {
      cb(null, true);
    } else {
      cb(new Error("Apenas arquivos de imagem são permitidos"));
    }
  },
  limits: {
    fileSize: 10 * 1024 * 1024, // 10MB
  },
});

app.post("/api/upload/image", upload.single("file"), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({
        error: "Nenhuma imagem foi enviada",
      });
    }

    // Validações de imagem
    const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
    if (!allowedTypes.includes(req.file.mimetype)) {
      return res.status(400).json({
        error: "Formato não suportado. Use JPEG, PNG ou WebP",
      });
    }

    // Processamento da imagem (opcional)
    const processedImageBuffer = await sharp(req.file.path)
      .resize(800, 600, { fit: "inside", withoutEnlargement: true })
      .jpeg({ quality: 85 })
      .toBuffer();

    // Upload para storage (S3, CloudFront, etc.)
    const imageUrl = await uploadToStorage(processedImageBuffer, {
      filename: `image_${Date.now()}.jpg`,
      contentType: "image/jpeg",
    });

    res.json({
      url: imageUrl,
      originalName: req.file.originalname,
      size: processedImageBuffer.length,
    });
  } catch (error) {
    console.error("Upload error:", error);
    res.status(500).json({
      error: "Erro ao processar imagem",
    });
  }
});