display picture upon modification

Is there a way for me to display the image I choose in AngularJS, similar to uploading an image on StackOverflow where the selected picture appears before uploading?

I'm very new to this, so please be patient with me.

Controller

$scope.uploadFile = function(parameter){
    console.log(parameter[0]);
    $scope.profilePic = parameter[0];
};

HTML

<div class="row">
    <div class="col-md-12">
        <img src="{{profilePic}}" class="img-responsive img-thumbnail"/>
    </div>
</div>
<div class="row">
    <div class="col-md-12"> 
        <input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)"  />
    </div>
</div>

I've been experiencing issues using ng-change, as it gives me an "anonymous function error".

https://i.sstatic.net/TuTJQ.png

Answer №1

Opt for using ng-src over src within your code:

<img ng-src="{{profilePic}}" class="img-responsive img-thumbnail"/>

By using ng-src, the image source assignment will be suspended until the image is available.

Take a look at this example to see it in action, hopefully, it will be helpful.

I have included a new function called readURL(input) that utilizes FileReader to convert the uploaded image into a readable format.

Answer №2

There seems to be a missing implementation with the ng-change directive. Instead of using

<input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />
, consider replacing
onchange="angular.element(this).scope().uploadFile(this.files)"
with
ng-change="uploadFile(this.files)"

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

When integrating react-router 5 and redux 7, there is an issue where the state is not being reset when navigating to a new route using react-router's <Link

My current setup includes the following versions: `"react-router": "^5.2.0",` `"react-router-domreact-router": "^5.2.0",` I'm unsure if my setup is compatible with React-router 5 as I was using a version prior ...

Analyzing refined information using D3

After loading data, I implemented a filter feature using checkboxes. Every time the checkbox is updated, the date field in the data needs to be parsed. The script below achieves this successfully on the first click but encounters an error on subsequent c ...

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle! <script src="https://unpkg.com/vue"></script> <div id="app"> <label> <input type="checkbox" name="demo" :checked="isChecked" @input=" ...

Modify the font color within a JavaScript countdown

I'm trying to create a timer that changes the font color of a div with the ID "clear" at the one-minute and two-minute marks. However, I'm having trouble getting it to work properly. var ho1 = document.getElementsByTagName('ho1')[0], ...

Tips for adjusting image dimensions with url() method in css

I have successfully incorporated collapsible functionality on my page. I would like to display a down arrow image instead of the default '+' symbol on the right side of the collapsible section. To achieve this, I can use the following CSS code s ...

Tips for incorporating a clickable link or dialog box into a Backbone.js JST EJS file

I'm looking to integrate a modal dialog box (by simply clicking OK) within a Backbone.js template file. This specific scenario involves iterating through a loop structure, as shown in show_template.jst.ejs: <% for(var i = 0... all words %> < ...

What is the process of transferring information to a property in JSON within a Jade (Pug) file?

Initially, I transmit data to a Jade template using Node.js. app.get('/', function(req, res){ var arr = new Array( {firstname: 'Gil-dong', lastname: 'Hong'}, {firstname: 'Yeong-sil', lastname: &a ...

Issue with Google Charts - Chart is unable to render because data table has not been defined

Using Ajax, I attempted to set an Interval for my Google Chart, but unfortunately, the Chart is not being drawn. Instead, I repeatedly receive the error message: "Data table is not defined." every 5 seconds. If you want to see a screenshot of the error mes ...

What steps can I take to ensure the reset button in JavaScript functions properly?

Look at this code snippet: let animalSound = document.getElementById("animalSound"); Reset button functionality: let resetButton = document.querySelector("#reset"); When the reset button is clicked, my console displays null: resetButton.addEvent ...

The combination of sass-loader and Webpack fails to produce CSS output

Need help with setting up sass-loader to compile SCSS into CSS and include it in an HTML file using express.js, alongside react-hot-loader. Check out my configuration file below: var webpack = require('webpack'); var ExtractTextPlugin = require ...

Experiencing trouble with retrieving the selected image source and showing it in a text field

Looking for help with a javascript issue related to image selection. My goal is to store the selected image's src in a variable and display just the folder ID and image ID without the path and file extension. I want this process to happen in real time ...

Shifting Directive Logic to a Method within a Vue Component

I am currently working with a VueJS component that utilizes the style attribute in the following way: <section :style="{ backgroundImage: src && 'url(' + src + ')' }"> ... <script> export default { props: [& ...

JQuery Function for Repeatedly Looping through Div Elements

I've been experimenting with creating a loop that alternates the fade-in and fade-out effects for different elements. This is what I have so far: setInterval(function() { jQuery(".loop").each(function(index, k) { jQuery(this).delay(1200 ...

Retrieving Data using Map in ReactJS

I'm in the process of creating a web app and I have an array of data with URLs in each element. I'm struggling to figure out how to fetch data from these mapped URLs. useEffect(() => { axios .get(`someurl`) .then((response) =& ...

Unable to utilize Socket.io version 2.0.3

When it comes to developing a video chat app, I decided to utilize socket.io. In order to familiarize myself with this library, I followed various tutorials, but unfortunately, I always encountered the same issue. Every time I attempted to invoke the libr ...

Incorporating object data and a value into an Angular $http.post request and retrieving them in an ASP .NET Web API

I am seeking a way to send multiple objects and a value from an Angular application to an ASP .NET Web API. Below is the snippet of my JavaScript code: var productStockArray = $scope.ProductStockArray; var challan = 20; $http.post(dataUrl + "StockProduc ...

Documenting React Native Components: Best Practices and Tips

How can I add comments to a React Component? import React, { useState } from 'react'; import { Text, TextInput, View } from 'react-native'; import PropTypes from "prop-types"; const PizzaTranslator = ({ pizzaEmoji = ' ...

What could be the reason for the mismatch in size between the downloaded file in Express.js and the file size on the server?

My code using express.js is quite simple: app.get("/download", download); and export let download = async (req: Request, res: Response) => { const file = "/tmp/my-file.zip"; res.download(file); } The client-side code is also straightforward: im ...

I'm puzzled as to why my recursive function is repeatedly calling itself without meeting the necessary logical condition. Can anyone provide guidance on

As I delve into a basic recursion, I am observing an interesting phenomenon where the logic governing the recursion is activated even when a false parameter is present in the return statement for the ternary rule. This particular recursive function perfor ...