Material UI Image Upload Component

<!DOCTYPE html>
<html lang="en">

const { useState } = React;

function App() {

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

const theme = createTheme({
            palette: {
                primary: {
                    main: '#556cd6',
                },
                secondary: {
                    main: '#19857b',
                },
                error: {
                    main: colors.red.A400,
                },
            },
        });

const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <App />
            </ThemeProvider>
        );
    </script>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Page</title>
    <!-- Material-UI CSS -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <!-- React and Material-UI scripts -->
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
        crossorigin="anonymous"></script>
    <!-- Babel for JSX -->
    <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js" crossorigin="anonymous"></script>
</head>
​
<body>
    <div id="root"></div>
    <script type="text/babel">
​
        const { useState } = React;
​
        function App() {
​
            const [selectedImage, setSelectedImage] = useState(null);
​
            const handleImageChange = (e) => {
                const file = e.target.files[0];
                setSelectedImage(URL.createObjectURL(file));
            };
            return (
                <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}>
                    <Typography variant="h4" component="h1" gutterBottom>
                        Material UI Image Upload Component
                    </Typography>
                    <input
                        accept="image/*"
                        style={{ display: 'none' }}
                        id="image-upload"
                        type="file"
                        onChange={handleImageChange}
                    />
                    <label htmlFor="image-upload">
                        <Button
                            variant="contained"
                            color="primary"
                            component="span"
                            startIcon={<i className="material-icons">cloud_upload</i>}
                        >
                            Upload Image
                        </Button>
                    </label>
                    <p>{selectedImage && (
                        <img src={selectedImage} alt="Uploaded" width="200" height="200" />
                    )}</p>
                </Container>
            );
        }
    </script>
    <script type="text/babel">
        const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Button } = MaterialUI;
​
        const theme = createTheme({
            palette: {
                primary: {
                    main: '#556cd6',
                },
                secondary: {
                    main: '#19857b',
                },
                error: {
                    main: colors.red.A400,
                },
            },
        });
​
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <App />
            </ThemeProvider>
        );
    </script>
</body>
​
</html>