When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

When I click on the image icon, it should be clickable and a popup dialogue box will open to upload a new image. Check out this sample image for reference. Any help on this would be greatly appreciated. Thanks in advance.

<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">

                <img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
                    class="mr-3 d-none d-sm-block" alt="...">
                <i *ngIf="isEditItems"  style="color : white;left: 52px;
                    position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); border-radius: 50%;font-size: 12px;"
                    class="fa fa-pencil fa-lg" aria-hidden="true" ></i>

                <div>

                    <div class="summary-details">This is a sample text. You can upload your profile picture here. This
                        will be visible to all clients in your contact information. You can change it again if you
                        want.

                    </div>
                </div>
            </div>

htmlcssangular

Answer №1

Utilizing bootstrap's features, you can create a popup using the bootstrap modal component.

To implement this in your HTML code, simply add the following:

Insert 

data-toggle="modal" data-target="#myModal"

<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." data-toggle="modal" data-target="#myModal">

Next, include the following structure:

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Profile information</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>

Check out a demonstration of this functionality here: https://www.bootply.com/fzlrwIyyXK

Answer №2

Here is a sample of simple html code. The file-hidden class sets the element to have a display:none property.

<div class="some-class">
  <img src="app/img/your-image.png" (click)="uploader.click()"/>
  <input #uploader class="file-hidden" type="file" accept="image/*" value=""  (change)="getDataFromImageSelection($event)">
</div>

Now, moving on to the TypeScript part:

getDataFromImageSelection(fileInput: any, guid, index){
    if(fileInput.target.files.length > 0){
      let file = fileInput.target.files[0];
      var reader = new FileReader();
      reader.onload = this._handleReaderLoaded.bind(this); // <-- async operation
      reader.readAsBinaryString(file);
    }
}

_handleReaderLoaded(readerEvt) {
    var binaryString = readerEvt.target.result;
    this.base64textString= btoa(binaryString);
    if(!!this.base64textString){
      // Perform actions with base64 data 
    }
}

I have personally implemented this code in my own app and it's functioning perfectly. Unfortunately, I am unable to share more details beyond the if(!!this.base64textString) segment as it involves a service call to store the image in a database.

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

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

cssbootstrap-5

When attempting to transfer data from an Ajax HTML form to a Flask template in Python upon clicking a button, encountered difficulties

I am a beginner with Flask and HTML. I need some help as I am struggling to retrieve parameter values from the HTML form (index1.html). Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

pythonhtmlajaxapiflask

Incorporate Data-table functionality into an Ionic 3 application

After building a website with Ionic 3, I am interested in incorporating a data table similar to the one showcased here. What steps should I take to integrate this library into my website? Are there any particular considerations for the Ionic/Angular env ...

angularionic2ionic3angular-ui-bootstrapbootstrap-4

Generating a fresh instance of input value in Angular2

In the hierarchy of components, I have a grand parent component where I am passing the "selectedValue" to the parent component like so: @Component({ selector: 'grand-parent', template: '<parent [details]="selectedValue" ></par ...

angulartypescript

Resolving an inevitable circular dependency in Angular 9 that cannot be avoided

Implementing session timeout on the UI side involves a series of steps that need to be followed. Upon successful login, initiate a timeout mechanism to display a popup message. setTimeout(()=>{this.openTimeOutDialog();},expTime); After an hour, ...

angularangular9circular-dependency

Enhance webpage speed by enabling browser caching for embedded iframe CSS and Javascript files

Imagine having a file named main.html. Inside this file, there's an iframe that points to another file called sub.html. Additionally, there's a button on main.html that, when clicked, refreshes the content of sub.html. This sub.html file relies o ...

jqueryhtmlcachingiframe

Instead of returning an Observable<HttpResponse> for HttpClient.post, consider returning an Observable<boolean> instead

Is there a way for me to have my method return an Observable<boolean> instead of the Observable<HttpClient<AuthResponse>>? This is the current code I'm working with: login(username: string, password: string): Observable<boolea ...

angular

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap

Search for text within the nearest <p> tag using HTML and jQuery

My table contains different td elements with the same ID, as shown in this foreach loop: <td class="AMLLeft" style="display:inline-block; !important">ID: <p class="important">${item.id}</p> </td> <td align="right" nowrap="tr ...

javascriptjqueryhtml

Exploring methods for testing an HTML page that utilizes jQuery for DOM manipulations

Recently, I was tasked with creating an HTML page that utilized jQuery DOM manipulations. For instance, upon clicking the submit button, a success or error message should be displayed. Testing these functionalities is something I'm familiar with in An ...

javascriptjqueryhtmlnpm

Deploying a nodejs application with angular as the user interface framework using Firebase

Is there a way to set up an express.js application with angular as the front-end framework, multiple route files, and communication between the server and angular via service level API calls, in order to deploy it on firebase using Firebase Hosting? Curre ...

node.jsangularfirebaseexpressfirebase-hosting

Guide to Aligning Divs at the Center in Bootstrap 4

I've been attempting to center the div on the page using Bootstrap 4, however, it's not cooperating. I've tried using the margin:0 auto; float:none property as well as the d-block mx-auto class, but neither are working. Below is my HTML code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to submit form with Jquery

Having some trouble with my form submission using Jquery. The submit part of my code seems to be malfunctioning, and I can't pinpoint the issue. <?php if(!isset($_SESSION["useridentity"])){ die(header("Location:index.php")); } ...

javascriptphpjqueryhtml

Unlock the mat-sidenav from mat-dialog or @component in Angular Material

I have been exploring various options for a while now in search of a solution, so any assistance would be greatly appreciated. Currently, I am utilizing Angular Material 2 and I am looking to utilize the .open() method for a mat-sidenav by either pressing ...

angularangular-material2sidenav

Divide the inner HTML content to extract text for translation purposes using JavaScript

I am currently developing an application that requires extracting the innerHTML of Body, then extracting the text in a JSON format. This JSON will be used for translation, and the translated JSON will be used as input to recreate the HTML markup with trans ...

javascripthtmljsonregexparsing

Repetitive use of multiple submit buttons in AngularJS

i'm currently working with AngularJS Currently facing this issue: view screenshot I have utilized the following HTML code to display submit button for two different types of forms. One for TEXT Form and one for ENUM Form: <div ng-controller="g ...

javascriptjqueryhtmlangularjsforms

Options in Joomla Back-end Plugin

Just started diving into Joomla programming and I managed to create a plugin that functions perfectly. However, there's one small issue that's been bothering me all day. The configuration options in the back-end are shifted by a 180px left margin ...

htmlcssjoomla

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

The click function operates only once

Here are two simple JavaScript functions: CTCC.Transactions.PieceRecuClick = function (source) { $(".chk input[type='checkbox']").attr('checked', true); } CTCC.Transactions.PieceNonRecuClick = function (source) { $(".chk input ...

javascriptjqueryhtmlasp.net

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs