App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import React, { useState } from 'react'; import { Container, Row, Col, Button, Form } from 'react-bootstrap'; import "bootstrap/dist/css/bootstrap.min.css" const App = () => { const [base64, setBase64] = useState(''); const [imageFile, setImageFile] = useState(null); // Function to handle image file selection and conversion to Base64 const handleImageChange = (event) => { const file = event.target.files[0]; if (file) { setImageFile(file); const reader = new FileReader(); reader.onloadend = () => { setBase64(reader.result); }; reader.readAsDataURL(file); // Converts image to Base64 } }; return ( <Container className="mt-5"> <Row className="justify-content-center"> <Col md={6} className="text-center"> <h1 className="mb-4">Image to Base64 Converter</h1> {/* File input to select image */} <Form.Group> <Form.Label>Select an image to convert to Base64</Form.Label> <Form.Control type="file" accept="image/*" onChange={handleImageChange} /> </Form.Group> {/* Display the Base64 code in a TextArea */} {base64 && ( <Form.Group className="mt-3"> <Form.Label>Base64 Encoded Image</Form.Label> <Form.Control as="textarea" rows={6} value={base64} readOnly /> </Form.Group> )} {/* Optionally, a button to clear the content */} <Button variant="danger" onClick={() => { setBase64(''); setImageFile(null); }} className="mt-3"> Clear </Button> </Col> </Row> </Container> ); }; export default App; |
