|
| 1 | +import React, { useState } from 'react'; |
| 2 | +import { collection, addDoc } from 'firebase/firestore'; |
| 3 | +import { db } from '../../../firebase.js'; |
| 4 | +import { bgColor, color, h4, h5, h5_, h6, h6_ } from '@/constants'; |
| 5 | +import axios from 'axios'; |
| 6 | +import { border, borderRadius } from '@mui/system'; |
| 7 | +import styles from "@/styles/admin.projects.module.css" |
| 8 | + |
| 9 | +export default function AddProject() { |
| 10 | + const [modelName, setModelName] = useState(''); |
| 11 | + const [file, setFile] = useState(null); |
| 12 | + const [modelDesc, setModelDesc] = useState(''); |
| 13 | + |
| 14 | + const handleSubmit = async () => { |
| 15 | + if (!file) { |
| 16 | + alert('Please select a file first!'); |
| 17 | + return; |
| 18 | + } |
| 19 | + |
| 20 | + const formData = new FormData(); |
| 21 | + formData.append('file', file); |
| 22 | + formData.append('upload_preset', 'model_image'); // Replace with your Cloudinary upload preset |
| 23 | + formData.append('cloud_name', 'dxxurstw7'); |
| 24 | + |
| 25 | + try { |
| 26 | + const response = await axios.post( |
| 27 | + 'https://api.cloudinary.com/v1_1/dxxurstw7/image/upload', // Replace with your Cloudinary endpoint |
| 28 | + formData |
| 29 | + ); |
| 30 | + // Add a new document to the 'users' collection |
| 31 | + await addDoc(collection(db, 'projects'), { |
| 32 | + modelName: modelName, |
| 33 | + modelImg: response.data.secure_url, |
| 34 | + modelDesc: modelDesc, |
| 35 | + }); |
| 36 | + console.log('Document written successfully'); |
| 37 | + } catch { |
| 38 | + console.log('Error adding document'); |
| 39 | + } |
| 40 | + setModelName(''); |
| 41 | + setFile(null); |
| 42 | + setModelDesc(''); |
| 43 | + }; |
| 44 | + |
| 45 | + return ( |
| 46 | + <div |
| 47 | + style={{ |
| 48 | + backgroundColor: bgColor, |
| 49 | + color: color, |
| 50 | + display: 'flex', |
| 51 | + flexDirection: 'column', |
| 52 | + alignItems: 'center', |
| 53 | + }} |
| 54 | + > |
| 55 | + <h1 |
| 56 | + style={{ |
| 57 | + display: 'block', |
| 58 | + fontSize: h4, |
| 59 | + marginBottom: '50px', |
| 60 | + }} |
| 61 | + > |
| 62 | + Add Projects |
| 63 | + </h1> |
| 64 | + <div |
| 65 | + style={{ |
| 66 | + width: '80%', |
| 67 | + marginBottom: '50px', |
| 68 | + }} |
| 69 | + > |
| 70 | + <label style={{ fontSize: h5_ }} htmlFor="modelName"> |
| 71 | + Project Name : |
| 72 | + </label> |
| 73 | + <input |
| 74 | + name="modelName" |
| 75 | + placeholder="Enter project name" |
| 76 | + type="text" |
| 77 | + onChange={(e) => setModelName(e.target.value)} |
| 78 | + value={modelName} |
| 79 | + style={{ |
| 80 | + backgroundColor: color, |
| 81 | + width: '100%', |
| 82 | + fontSize: h6, |
| 83 | + height: '40px', |
| 84 | + borderRadius: '1rem', |
| 85 | + marginTop: '20px', |
| 86 | + padding: '10px', |
| 87 | + }} |
| 88 | + /> |
| 89 | + </div> |
| 90 | + <div |
| 91 | + style={{ |
| 92 | + width: '80%', |
| 93 | + marginBottom: '50px', |
| 94 | + }} |
| 95 | + > |
| 96 | + <label style={{ fontSize: h5_ }} htmlFor="modelImg"> |
| 97 | + Project Image : |
| 98 | + </label> |
| 99 | + <br /> |
| 100 | + <div className={styles.fileInputWrapper}> |
| 101 | + <button className={styles.fileInputButton} |
| 102 | + style={{ |
| 103 | + fontSize: h6, |
| 104 | + borderRadius: '1rem', |
| 105 | + marginTop: '20px', |
| 106 | + marginRight: '10px', |
| 107 | + }}>Choose File</button> |
| 108 | + <input |
| 109 | + name="modelImg" |
| 110 | + type="file" |
| 111 | + accept="image/*" |
| 112 | + onChange={(e) => setFile(e.target.files[0])} |
| 113 | + className={styles.fileInput} |
| 114 | + style={{ |
| 115 | + fontSize: h6, |
| 116 | + borderRadius: '1rem', |
| 117 | + marginTop: '20px', |
| 118 | + }} |
| 119 | + /> |
| 120 | + </div> |
| 121 | + </div> |
| 122 | + <div |
| 123 | + style={{ |
| 124 | + width: '80%', |
| 125 | + marginBottom: '60px', |
| 126 | + }} |
| 127 | + > |
| 128 | + <label style={{ fontSize: h5_ }} htmlFor="modelDesc"> |
| 129 | + Project Description : |
| 130 | + </label> |
| 131 | + <textarea |
| 132 | + name="modelDesc" |
| 133 | + placeholder="Enter project description" |
| 134 | + onChange={(e) => setModelDesc(e.target.value)} |
| 135 | + style={{ |
| 136 | + backgroundColor: color, |
| 137 | + width: '100%', |
| 138 | + fontSize: h6, |
| 139 | + height: '100px', |
| 140 | + borderRadius: '1rem', |
| 141 | + marginTop: '20px', |
| 142 | + padding: '10px', |
| 143 | + }} |
| 144 | + value={modelDesc} |
| 145 | + ></textarea> |
| 146 | + </div> |
| 147 | + <button |
| 148 | + style={{ |
| 149 | + marginBottom: '30px', |
| 150 | + width: '8rem', |
| 151 | + height: '4rem', |
| 152 | + backgroundColor: '#50C878', |
| 153 | + borderRadius: '1rem', |
| 154 | + fontSize: h6_, |
| 155 | + }} |
| 156 | + id="add" |
| 157 | + onClick={() => handleSubmit()} |
| 158 | + value={modelDesc} |
| 159 | + > |
| 160 | + Add |
| 161 | + </button> |
| 162 | + </div> |
| 163 | + ); |
| 164 | +} |
0 commit comments