CODEWITHSUNDEEP
javascriptreactjsfile-uploadmaterial-uicard
bruno said
bruno said

Reputation: 1

I want to use a MUI Card to upload files in React

I'm using React and Material UI and i want to upload files using a Card as a 'button', but i can't get it to work. i need help!

hola a todos! estoy usando REACT y MATERIAL UI y quiero subir archivos usando una Card como "boton", pero no logro hacer que funcione, necesito ayuda!

import * as React from "react";
import { useState } from "react";
import { Card, CardActionArea } from "@mui/material";
import AddRounded from "@mui/icons-material/AddRounded";

export default function UploadFiles() {
  const VisuallyHiddenInput = styled("input")({
    clip: "rect(0 0 0 0)",
    clipPath: "inset(50%)",
    height: 1,
    overflow: "hidden",
    position: "absolute",
    bottom: 0,
    left: 0,
    whiteSpace: "nowrap",
    width: 1,
  });

  const [selectedImage, setSelectedImage] = useState(null);
  const [imageUploaded, setImageUploaded] = useState(false);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    setSelectedImage(file);
    setImageUploaded(true);
  };

  return (
    <Card component="label">
      <VisuallyHiddenInput type="file" />
      <CardActionArea>
        <AddRounded />
      </CardActionArea>
    </Card>
  );
}

Upvotes: 0

Views: 131

Answers (0)

Related Questions