reiyua
/
BraycedForUnbased
mirror of https://github.com/reiyua/BraycedForUnbased.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert to cold code, removing progress bar

This commit is contained in:
Ray 2024-01-14 05:30:01 +00:00 committed by GitHub
parent 8130a4d482
commit 372263e98f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/App.js
View File

@ -16,7 +16,6 @@ import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import Col from 'react-bootstrap/Col'; import Col from 'react-bootstrap/Col';
import ProgressBar from 'react-bootstrap/ProgressBar';
// Import DisplayEntries component which displays existing reviews // Import DisplayEntries component which displays existing reviews
import DisplayEntries from "./components/DisplayEntries.js"; import DisplayEntries from "./components/DisplayEntries.js";
@ -40,7 +39,6 @@ export function MyForm(props) {
const [unbasedTakes, setUnbasedTakes] = useState([]); const [unbasedTakes, setUnbasedTakes] = useState([]);
const storage = getStorage(); const storage = getStorage();
const storageRef = ref(storage, `media/${fileupload.name}`); const storageRef = ref(storage, `media/${fileupload.name}`);
const [progress, setProgress] = useState(0);
// Fetch incidents from Firestore when the component mounts // Fetch incidents from Firestore when the component mounts
if (!getApps().length) { if (!getApps().length) {
@ -69,37 +67,21 @@ export function MyForm(props) {
// Handle file uploading to Firebase Storage // Handle file uploading to Firebase Storage
if (fileupload) { if (fileupload) {
const uploadTask = uploadBytesResumable(storageRef, fileupload); const uploadTask = uploadBytesResumable(storageRef, fileupload);
// Track the progress of the upload task
uploadTask.on('state_changed',
(snapshot) => {
// Calculate the progress percentage
const progress = (snapshot.bytesTransferred / fileupload.size) * 100;
console.log('Upload is ' + progress + '% done');
// Update the progress state
setProgress(progress); // Wait for the upload to finish
}, await uploadTask.then(async () => {
(error) => { // Get the download URL after the upload is complete
// Handle errors const fileUrl = await getDownloadURL(uploadTask.snapshot.ref);
console.log(error);
}, // Add the file URL to the form submission in Firestore along with other variables under the collection "unbasedtakes" with variable named "fileURL"
() => { unbasedData.fileUrl = fileUrl;
// Wait for the upload to finish });
uploadTask.then(async () => { }
// Get the download URL after the upload is complete
const fileUrl = await getDownloadURL(uploadTask.snapshot.ref);
// Add the file URL to the form submission in Firestore along with other variables under the collection "unbasedtakes" with variable named "fileURL"
unbasedData.fileUrl = fileUrl;
});
}
);
}
const col = collection(db, `unbasedtakes`) const col = collection(db, `unbasedtakes`)
const ref = await addDoc(col, unbasedData) const ref = await addDoc(col, unbasedData)
console.log(ref); console.log(ref)
alert("Form submitted successfully!"); alert("Form submitted successfully!");
window.location.reload(); window.location.reload();
} }
@ -150,19 +132,17 @@ export function MyForm(props) {
setFileupload(e.target.files[0]); setFileupload(e.target.files[0]);
}} }}
/> />
{/* Display the progress bar */}
<ProgressBar now={progress} label={`${progress}%`} />
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</Col> </Col>
</Form.Group> </Form.Group>
</Form> </Form>
</div> </div>
<div> <div>
<h2>Existing Unbased Takes</h2> <h2>Existing Unbased Takes</h2>
<p>View existing entries in the card's below.</p> <p>View existing entries in the card's below.</p>
<DisplayEntries /> <DisplayEntries />
</div> </div>
</div> </div>
); );
} }