Updating the scope in Angular when changing the image source using ng-src is not working

A snippet inside my controller looks like this:

$scope.onFileSelect = function($files) {
    for(var i = 0; i < $files.length; i++) {
        var file = $files[i];

        $scope.upload = $upload.upload({
            url: '/smart2/api/files/profile',
            file: file
        }).success(function(data) {
            $scope.photo = data;
        });
    }
}

Upon loading the page, users can click a modal to upload a profile photo. The modal displays their current profile photo alongside an upload input field.

I have added ng-src to the image tag and everything is functioning properly. However, after a user uploads a new profile photo, setting $scope.photo in the success function of the upload call does not update the displayed photo.

I understand that I need to notify Angular about the change but I am unsure how to do so. The data returned from the HTTP call will always be the same as the data already in ng-src or $scope.photo, albeit with changes.

The profile photo's name corresponds to the user's name, meaning that even if they upload a new photo, the filename or source remains constant while the actual file content differs.

The issue lies in the fact that the photo does not update when I assign $scope.photo in the success function. What could be causing this problem?

Answer №1

Are you asking if the content pointed to by src changes without the URL changing, and you want to force it to refresh? If this is the case, you can append a timestamp to the URL and update the timestamp to trigger the change in the URL.

Another option is to set your src to the base64 encoded string of the image instead of using a URL.

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

Why does Googlebot need to retrieve HTML from JSON-exclusive URLs?

Link to a page like this: The following code is found: $.getJSON("/newsfeeds/61?order=activity&amp;type=discussion", function(response) { $(".discussion-post-stream").replaceWith($(response.newsfeed_html)); $(".stream-posts").before($("<div cl ...

Steps for finding a pattern in a list and creating a separate list

Looking to identify a specific pattern in a list retrieved from the service and create a new list with matching items. Below is my code snippet. itemList = itemService.getList(); The itemList comprises of JSON data as shown below. [ { "email ...

Encountering 401 unauthorized error in Laravel Passport, Vue.js, and Axios integration

I am fairly new to VueJS and I am trying to retrieve data from a Laravel (passport) API. To do this, I have used npm i axios for making API requests. Below is the script code from my App.vue file: import axios from 'axios'; export default { da ...

Upload a JSON file to a server using a JavaScript app

I am in the process of creating a basic JavaScript application that allows users to annotate images stored on their machine and save these annotations as a JSON file. This application is lightweight and straightforward, not requiring an app server. Howeve ...

Display the country code according to the option chosen by the user in the dropdown menu

To enhance user experience, I am implementing a feature where the user can select their country from a drop-down list and then have the corresponding country code displayed in a text field for easy entry of their phone number. Below is the list of countri ...

The Mongodb database is failing to recognize updates made to the Mongoose schema

I have already created my database with the following schema: const ProjectSchema = new mongoose.Schema({ name: { type: String }, description: { type: String }, client: { type: mongoose.Schema.Types.ObjectId, ref: 'client& ...

Using Ajax to insert data into WordPress

Looking to incorporate data into the WordPress database using Ajax integration. functions.php function addDataToDB(){ global $wpdb, $count; $count = 25; $wpdb->insert( 'custom_table', array( 'slid ...

Easily validating forms using javascript

I'm attempting to design a basic HTML form and would like to implement javascript for validating the input values. Below is the form tag: <form action="" onSubmit="return formValidation();" method="Post" name="form"> Here is a section of the ...

Discovering duplicate values in a JSON object using JavaScript (JQuery)

Below is a JSON object that contains information about various materials: [ { "idMaterial": "Alloy 450 (15Cr6Ni1.5Cu)_S45000", "tipoMaterial": "Alloy 450 (15Cr6Ni1.5Cu)", "uns": "S45000", "temperatura": "NL", "p ...

JavaScript enables users to store over 5 megabytes of data on their client devices

Is there a way to store more than 5mb in the client browser? I need this functionality across various browsers including Firefox, Chrome, Internet Explorer, Safari (iOS), and Windows Phone 8 Browser. Initially, localStorage seemed like a viable option as i ...

The function json.stringify fails to invoke the toJson method on every object nested within the main object

When using IE 11, I encountered an issue where calling Stringify on my objects did not recursively call toJson on all objects in the tree. I have implemented a custom toJson function. Object.prototype.toJSON = function() { if (!(this.constructor.name == ...

Improve the looping mechanism to efficiently extract key values from an object and store them in an array

I am working with an object that contains various questions, each with a different difficulty level indicated by the "difficulty" property. I have implemented a for loop to sort the questions into categories based on their relative difficulty, such as easy ...

Understanding JSON Parsing in Jade

I am facing a challenge with handling a large array of objects that I am passing through express into a Jade template. The structure of the data looks similar to this: [{ big object }, { big object }, { big object }, ...] To pass it into the Jade templat ...

jQuery - class remains unchanged on second click event

Operations: Upon clicking on an element with the class thumb_like or thumb_unlike, a like will be added or removed for the image using a POST request. The element with the class thumb_count will increase or decrease based on user actions. For example, lik ...

"How to change the hover background of a select element in Chrome from its default setting to something else

Is there a way to remove the background color on hover and replace it with a different color? .drp-policydetails { border: 1px solid #dddddd; background-color: #ffffff; } <div className="form-group"> <select className="form-control drp-po ...

Ways to receive a POST request from an external server on a GraphQL Server

Currently, I am working on a project that utilizes GraphQL. As part of the project, I need to integrate a payment processor. When a user makes a successful payment, the payment processor sends a POST request to a webhook URL that should point to my server. ...

Encountering the 401 (Unauthorized) error while attempting to delete data in loopback?

I have a model called companyUsers and when I send a GET request, I am able to retrieve all the data successfully. However, when I try to make a DELETE or PUT request, I encounter a 401 (Unauthorized) error. For example, I made a DELETE request using the ...

Manipulating DOM elements using JavaScript Vanilla with the Jquery <<S.fn.init [selector]>> framework

I have a project where I need to switch the logic written in jQuery to vanilla JavaScript. Here is an overview of my code: I am using the keydown event on an input element to trigger a function that searches an API based on the input value. var selectedU ...

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

Something is overriding the style created by makestyle material UI that I had implemented

How can I increase the importance of my makeStyles classes over default Material UI styles? Here is my code: import { createTheme, ThemeProvider } from '@mui/material/styles'; import { makeStyles, createStyles } from '@mui/styles'; co ...