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

Limiting the style of an input element

How can I mask the input field within an <input type="text" /> tag to restrict the user to a specific format of [].[], with any number of characters allowed between the brackets? For example: "[Analysis].[Analysis]" or another instance: "[Analysi ...

javascriptjqueryhtml

Angular 2 has upgraded its Controller functionality by replacing it with Component

I find it a bit challenging to distinguish between Component and Controller. How was the Controller replaced by component in Angular 2? I came across this description of a component: In Angular, a Component is a distinct type of directive that utilizes a s ...

angularjsangular

What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

I've recently started learning TypeScript and exploring its functionalities. I could use some assistance in deepening my understanding. Within our angular2 application, we have defined an enum for privileges as follows: export enum UserPrivileges{ ...

angulartypescriptecmascript-6

Is it necessary for a click handler to be triggered when clicking on a scrollbar?

Check out these HTML snippets: Jsfiddle <style> div { margin:20px; border: 30px red solid; padding: 20px; background-color:green; overflow-y:scroll; } </style> <div onclick="alert('div clicked');"> ...

javascripthtmlcssonclick

Implementing a modal component into a React JS page upon loading

I've been working on a webpage using React JS. The site's structure follows MainContent.js --> Main.js --> ReactDOM render. I recently tried to implement a modal popup that worked perfectly in its own project, but ran into issues when imported to ...

cssreactjsmodal-dialogbootstrap-modal

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button. The class 'btn' is defined below; .btn { backg ...

css

What is the best way to extract a variable from a URL and assign it to an Ionic variable

I am currently developing a project in Ionic 3 that utilizes the admob plugin. I have set up two variables (Mybanner and Myinterstital) to store the admob code, and I would like to retrieve the content of these variables from an external URL like this: ht ...

jsonangularionic-frameworkionic3

Inactive function

I have a function that inserts my articles and I call this function on my page. There are no errors, but the next function retrieveAllArticles() is not being executed. public saveAllArticles(article) { for(let data in article) { this.db.exec ...

angularsqlitetypescriptionic-framework

The optimal location to declare a constructor in Typescript

When it comes to adding properties in an Angular component, the placement of these properties in relation to the constructor function can be a topic of discussion. Is it best to declare them before or after the constructor? Which method is better - Method ...

angulartypescript

What is the method to turn off readonly property for input fields in Laravel?

I'm encountering an issue with my Laravel project. I have a form with an input field that has the readonly attribute set. <input type="text" name="anamFam" id="anamFam" value="{{$aFam->anam_cont}}" readonly> When I click the edit button, I ...

javascriptphpjqueryhtmllaravel

Sharing packages within nested scopes

Using @organization-scope/package/sub-package in npm is what I want to achieve. Here is my package.json configuration:- { "name": "@once/ui", ... ... } If I try the following:- { "name": "@once/ui/select-box", ... ... } An error pops up st ...

angularnpmangular5

Combining Angular and Material Design: matdrawer and mattoolbar creating an overlapping effect

I'm currently facing a challenge in trying to construct a drawer that includes a mattoolbar, intended to overlap the primary toolbar of my application. Despite my efforts, I have been unable to rearrange the drawer higher up in the component hierarch ...

angularangular-materialtoolbardrawer

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

cssbuttonnavigationrow

Stop the click event from firing on child elements of a parent element that is currently being dragged

Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...

javascriptjqueryhtmlcss

"Unlocking the Power of CK Editor for Maximizing Value and Effectively Managing

I have a form with a field titled Description. I am using CKEditor to pass the value entered into this field and store it in my database. Can someone assist me with this? Below is the code snippet: <div id="descriptionMore" style="margin-bottom:20px; ...

javajavascriptjqueryhtmlliferay

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

htmlcssdrop-down-menu

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml

Issue: Animation not triggered on exit by React-transition-group Transition

I am aiming to create a unique animation where an icon spins 90 degrees to become flat and then seamlessly transitions into another icon, simulating a coin-spin effect. The desired effect is for the icons to spin both on enter and exit, although there may ...

cssreactjsanimationreact-transition-group

Tips for utilizing jQuery or AJAX to automatically update a div every 10 seconds

Seeking assistance from fellow developers. Working on a PHP web app utilizing the Yii MVC framework and its array of tools. Specifically, I am looking to dynamically refresh a div every 10 seconds. Currently, my Ajax function looks like this: <script t ...

jqueryhtmlajaxrefresh