alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-11-10 05:34:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #75 from cse110-fa22-group29/allow-for-user-uploaded-images

Browse Source 
implementation of basic image local storage
This commit is contained in:
Arthur Lu 2022-11-20 14:43:50 -08:00 committed by GitHub
commit 9c531771f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 102 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
source/CreatePage.html
View File

@ -40,9 +40,14 @@
<form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Choose Input type:
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
Source:
<input type="text" id="mealImg" name="mealImg">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:

9
source/ReviewDetails.html
View File

@ -26,9 +26,14 @@
<!----> <form id="update-food-entry" class="hidden">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Choose Input type:
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
Source:
<input type="text" id="mealImg" name="mealImg">
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:

42
source/assets/scripts/CreatePage.js
View File

@ -15,7 +15,44 @@ function initFormHandler() {
//accessing form components
let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector("form");
/*
* change the input source of the image between local file and URL
* depending on user's selection
*/
let select = document.getElementById("select");
select.addEventListener("change", function() {
const input = document.getElementById('source');
if (select.value == "file") {
input.innerHTML = `
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`
}
//TODO: change to photo taking for sprint 3
else {
input.innerHTML = `
Source:
<input type="text" id="mealImg" name="mealImg">
`
}
});
//addressing sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() {
const reader = new FileReader();
//store image data URL after successful image load
reader.addEventListener("load", ()=>{
imgDataURL = reader.result;
}, false);
//convert image file into data URL for local storage
reader.readAsDataURL(document.getElementById("mealImg").files[0]);
})
form.addEventListener("submit", function(e){
/*
* User submits the form for their review.
@ -30,6 +67,9 @@ function initFormHandler() {
if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`;
}
if (`${key}` === "mealImg" && select.value == "file") {
reviewObject["mealImg"] = imgDataURL;
}
}
reviewObject["tags"] = [];

47
source/assets/scripts/ReviewDetails.js
View File

@ -55,6 +55,46 @@ function setupUpdate(){
tagContainer.append(newTag);
}
}
/*
* change the input source of the image between local file and URL
* depending on user's selection
*/
let select = document.getElementById("select");
select.addEventListener("change", function() {
const input = document.getElementById('source');
if (select.value == "file") {
input.innerHTML = `
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`
}
//TODO: change to photo taking for sprint 3
else {
input.innerHTML = `
Source:
<input type="text" id="mealImg" name="mealImg">
`
}
});
//addressing sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() {
console.log("reading used");
const reader = new FileReader();
//store image data URL after successful image load
reader.addEventListener("load", ()=>{
imgDataURL = reader.result;
}, false);
//convert image file into data URL for local storage
reader.readAsDataURL(document.getElementById("mealImg").files[0]);
})
//Take formdata values as newData when submit
form.addEventListener("submit", function(){
/*
@ -69,6 +109,13 @@ function setupUpdate(){
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
}
//Account for the case where image is not updated
if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") {
newData["mealImg"] = currReview["mealImg"];
}
else if (`${key}` === "mealImg" && select.value == "file") {
newData["mealImg"] = imgDataURL;
}
}
newData["tags"] = [];

1
source/index.html
View File

@ -10,7 +10,6 @@
<!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->