Creating a thumbnail with a close button using an image

My code is available at the following link: https://codepen.io/manuchadha/pen/PBKYBJ

In this form I have created, I am trying to implement an image upload feature using a file input. The goal is to display a thumbnail of the selected image below the file selector along with a close (x) sign on the top-right corner for deleting the image. However, I seem to be encountering challenges in achieving this functionality. Can anyone assist me in identifying what may be going wrong?

Below is the HTML snippet:

<!DOCTYPE html>
<html lang="en">
...

CSS:

body{
  margin:0px;
}
...

JS:

function handleFileSelect(){
    console.log("got file upload event:");
    ...
}

function _handleReaderLoaded(readerEvt) {
    var binaryString = readerEvt.target.result;
    var base64textString= btoa(binaryString);
    ...
}

Answer №1

The appendChild method should be used instead of treating it as a property.

For instance, rather than node.appendChild = newImage;, it should be node.appendChild(newImage);

Additionally, ensure to include the "X" in the anchor tag. I have demonstrated this in the code snippet below.

Furthermore, there has been a minor enhancement in performance by storing the reference to the query in a variable to avoid querying the DOM twice.

var closeButtonLink = document.createElement('a');
closeButtonLink.textContent = "X";
closeButtonLink.setAttribute('href', "#");
closeButtonLink.classList.add("close");

// utilize a variable to store reference to imageContainer and avoid redundant querying
var imgc = document.querySelector('#imageContainer');
imgc.appendChild(newImage);
imgc.appendChild(closeButtonLink);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript's connection to the CSS property visibility seems to be causing some issues

The Javascript code seems to be ignoring the CSS display property, even though it's set in the style sheet. I added a debugger statement and noticed that the display value was empty. I've been staring at this for some time now, so I must be overl ...

In order to ensure proper coverage for phones, tablets, and standard screens across various widths, it is essential to implement the

As I delve into my project focused on responsive design and media queries, I have been studying resources like Aaron Gustavson's book, Adaptive Web Design, and Ben Frain's Responsive Web Design with HTML5 and CSS3, along with various online sourc ...

The file reader feature is currently experiencing issues on both Chrome and Internet Explorer browsers

After uploading an image file from my PC, I convert it to a data URL and then use the img element to preview it. Surprisingly, this process works perfectly fine in Firefox. However, when I try to do the same in Chrome or IE, the src attribute of the img el ...

Having trouble retrieving a base64 encoded image from a MySQL database using PHP

Within my MySQL database, there is a longblob field that stores a binary value representing an image uploaded through my website. I am currently attempting to retrieve the image using: <?php while($record = mysqli_fetch_assoc($result)): ?> <div&g ...

How do I show a panel within another panel in ExtJS without it showing a blank screen?

Ext.define('something', { extend: 'Ext.panel.Panel', layout: 'border', constructor: function(config){ let me = this; me.callParent(arguments); me.initConfig(config); } }); If I define a cl ...

"Exploring the possibilities of integrating the Twitter API with

Currently, I am attempting to access my most recent tweet from Twitter using https://github.com/jdub/node-twitter I am interested in setting a variable, modifying that variable within a function, and then utilizing it again outside of said function. Is th ...

Tips for customizing WTForm fields with unique CSS classes

I've recently put together a basic form snippet: class PostForm(FlaskForm): # for publishing a new blog post title = StringField("Title", validators=[DataRequired()]) submit = SubmitField('Post') The structure of my HT ...

ngClass with multiple conditions

I am currently working on implementing the following functionality - I have two pre-set classes that are combined with some component variables successfully. However, I now need to include an additional conditional class. Although the first part is functi ...

Passing data to server-side PHP script using AJAX technology

Currently, I'm facing an issue with passing variables to a PHP script using onclick. It seems that I am making a mistake somewhere. To demonstrate the problem, let's say I have the following code snippet in my main page: <img src="myImage.jp ...

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

Using JavaScript to invoke Applescript commands

Is it feasible to execute Applescript from JavaScript? I would be grateful if someone could offer a sample code or useful reference link. ...

Utilizing Firebase objects across multiple files: A comprehensive guide

I apologize for my ignorance, but as I am teaching myself, I have not been able to find the answer in the available documentation. My current project involves developing a Vue application with Firebase as the backend. To utilize Firebase services, you mus ...

Creating a Discord Bot: Building an Embed Table/List with Segmented Sections

Currently in the process of learning Javascript and venturing into discord.js, I'm fully aware that the code I am working with is not up to par and requires some serious refinements. The main objective here is to split up the arguments of a command a ...

Why isn't this working? I'm attempting to trigger a sound when I hover with my cursor, but it only plays when I click instead

When I click on it, it works fine. But I can't seem to get it to work on hover. Can someone help me out? This is the HTML code: <body> <audio autoplay id="HAT2" > <source src="OOOOO_1_HAT.mp3" > Your browser doesn't support t ...

Encountering difficulties with "removeChild" in React when attempting to dynamically update an array

In my React component's state, I have an array called "personArray." The component includes a search bar that triggers an API request and updates the "personArray" based on user input. In the render method, I map through this "personArray" to display ...

What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

I've been facing an issue with a Bootstrap Accordion. Everything works fine, except when I try to insert an image <img src="https://placehold.co/600x400" class="img-fluid" /> into an accordion-item <div class="accord ...

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

Manipulating values in JavaScript using an onclick event in PHP

I am looking to remove the "http" from the URL part of an input link before sending the data. This is my input code that looks like this when clicked: <input style="outline: none;" type="button" onclick="formatText ('link:url');" class="btn ...

The following item in the .each() sequence

How can I move on to the next element within a jQuery .each() loop? $(".row").each( function() { if ( ... ) //move to the next iteration in the .each() loop }); Appreciate any assistance. Thank you. ...

I'm looking to design a navbar similar to the one in the provided link, and I'd like it to appear when scrolling

I'm struggling to figure out how this particular navbar was created. How can I add a navlist for Videos and make the navbar visible upon scrolling? Are there any resources, articles, or hints to help me get started with this? LINK - ...