implementation of basic image local storage

source/assets/scripts/main.js

@@ -43,6 +43,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" id="mealImg" name="mealImg">
+		  `
+		}
+		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(){
 	/*
@@ -51,12 +89,16 @@ function initFormHandler() {
     */
 		let formData = new FormData(form);
 		let reviewObject = {};
+
 		for (let [key, value] of formData) {
 			console.log(`${key}`);
 			console.log(`${value}`);
 			if (`${key}` !== "tag-form") {
 				reviewObject[`${key}`] = `${value}`;
 			}
+			if (`${key}` === "mealImg" && select.value == "file") {
+				reviewObject["mealImg"] = imgDataURL;
+			}
 		}
 		reviewObject["tags"] = [];