Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

i need to complete the following, having issues Task 1 : when an image entry is added to the DOM, make an image item containing

i need to complete the following, having issues

  • Task 1: when an image entry is added to the DOM, make an image item containing the image data, and store it in local storage.
  • Task 2: when the file input element selection changes, use a FileReader object to convert the file to a data URL and add an image entry to the DOM using this data URL.

the code i have is as follows but only need to edit the part labeled TODO

/** * Add an image entry to the page * @param key Key of item in local storage * @param url Data URL of image data */ function addImageEntry(key, url) { // Create a image element var imgElement = new Image(); imgElement.alt = "Photo entry"; // Load the image imgElement.src = url; // Add a section to the page containing the image addSection(key, imgElement); } /** * Function to handle Add text button 'click' event */ function addEntryClick() { // Add an empty text entry, using the current timestamp to make a key var key = "diary" + Date.now(); var text = ""; var isNewEntry = true; addTextEntry(key, text, isNewEntry); } /** * Function to handle Add photo button 'click' event */ function addPhotoClick() { // Trigger the 'click' event of the hidden file input element // (as demonstrated in Block 3 Part 4) var inputElement = document.querySelector("#image input"); inputElement.click(); } /** * Function to handle file input 'change' event * @param event file input 'change' event data */ function processFile(event) { // Create an event listener to add an image entry function addImage(url) { // Add a new image entry, using the current timestamp to make a key var key = "diary" + Date.now(); addImageEntry(key, url); // TODO: Q1(c)(iv) Task 1 of 2 // Make an image item using the given url // (demonstrated elsewhere in this file) // Store the item in local storage using the given key // (demonstrated elsewhere in this file) var data = inputElement; var item = makeItem("image", data); localStorage.setItem("key", item); } // TODO: Q1(c)(iv) Task 2 of 2 // Complete this function to read a file when it is selected: // (reading files into a data URL using FileReader is demonstrated in Block 3 Part 4) // (imgElement and messageElement do not exist in this app so remove that code) // ...then call addImage using the data URL you obtain // ...and comment out line above using window.DUMMY_DATA_URL var inputElement = event.target; var fileObject = inputElement.files[0]; var data = event.target.result; var reader = new FileReader(); reader.addEventListener("load", addImage); reader.readAsDataURL(fileObject); // Clear the file selection (allows selecting the same file again) inputElement.value = ''; }

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Temporal Databases Research And Practice Lncs 1399

Authors: Opher Etzion ,Sushil Jajodia ,Suryanarayana Sripada

1st Edition

3540645195, 978-3540645191

More Books

Students also viewed these Databases questions

Question

14-18 Compare the two major types of planning and control tools.

Answered: 1 week ago