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

Changes in a deep copy of an object in a child component are directly reflected in the parent object in VueJS

Let's begin by discussing the layout. I have a page dedicated to showcasing information about a specific company, with a component Classification.vue. This component displays categories of labels and the actual labels assigned to the current company. ...

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

Streamline the process of sorting through 2 arrays

Is there a more concise and elegant way to achieve the same functionality as my current method? I am looking for a shorter solution to create an array of items that haven't been used in the form previously, which are then used to populate a select dro ...

Troubleshooting Azure typescript function: Entry point for function cannot be determined

project structure: <root-directory> ├── README.md ├── dist ├── bin ├── dependencies ├── host.json ├── local.settings.json ├── node_modules ├── package-lock.json ├── package.json ├── sealwork ...

Is there a way to utilize classes in various elements when other jQuery selectors are not functioning properly?

Could someone please clarify or provide an alternative solution to the following situation: The class fruit is present in two different tag elements, and one of these elements has the add class used in a jQuery selector. However, the alert box is not disp ...

Allow access to the configuration file for a JavaScript file located in the public directory of an Express application

I have a specific question regarding the folder structure of my Express app. app │ │ └───config │ │ config.js │ │ └───public │ │ │ └───javascripts │ │ exportable.js │ ...

You are unable to move the image to the top of the screen after zooming it with CSS

I implemented an image viewer component with interactive buttons for rotating, zooming in, and zooming out. Upon clicking a button, CSS transform is applied to the image. However, I encountered an issue where, when zooming the image, it cannot be scrolled ...

Navigating with Next.js Router: Dynamic URLs and the power of the back button

Utilizing the Router from the package next/router allows for a dynamic URL and loading of different content on the page: Router.push('/contract', `/contract/${id}`); An issue arises where the back button does not function as expected after runni ...

Typescript on the client-side: what is the best way to eliminate circular dependencies when using the factory method design pattern?

In my code, I have implemented the factory method pattern. However, some instances using this pattern end up with circular dependencies. Removing these dependencies has proven to be a challenge for me. To illustrate, consider the following example: // fact ...

Having trouble resolving this technical problem in Express.js and JavaScript programming

try { console.log('11111') const { data: { tasks }, } = await axios.get('/api/v1/tasks') console.log('22222 ' + await axios.get('/api/v1/tasks') ) console.log('33333 ' + tasks) There seems to be an issue ...

Combining ASP.Net MVC with Angular and Kendo UI for powerful web development solutions

Being new to ASP, Kendo, and programming in general has left me feeling overwhelmed. I am attempting to utilize the Kendo Grid to interact with the database, but I find myself lost. With a simple Person class containing Name and Surname, the generated Con ...

Exploring the controller logic in Sails.js index.ejs

I'm struggling to understand how to integrate dynamic logic into the homepage of my Sails.js application. Currently, the homepage is static, but I want to display data on the index.ejs page. I have a MainController with an index function that retrieve ...

Error in JSON Format Detected in Google Chrome Extension

Struggling with formatting the manifest for a simple Chrome extension I'm developing. I've been bouncing back and forth between these two resources to try and nail down the correct syntax: https://www.sitepoint.com/create-chrome-extension-10-mi ...

Could someone assist me in identifying the error or mistake?

For my project, I have implemented client and server sign-in & sign-up functionalities. However, after fetching the register API from the frontend, it is displaying an error message "please fill all fields" even though I have provided validation for al ...

Securing multiple routes in AngularJS using resolve for authentication

How can I authenticate users for all routes in my application without having to specify it individually? Is there a global way to handle authentication for all routes, so that I don't have to include the following code on each $routeProvider.when() c ...

Loading state with suggestions from autocomplete feature on React

In my current project, I have a component that consists of input fields and a button. The button is set to be disabled until the correct values are entered in the input fields. Everything works as expected, but there's an issue with Chrome auto-fillin ...

"Slow loading times experienced with Nextjs Image component when integrated with a map

Why do the images load slowly on localhost when using map, but quickly when not using it? I've tried various props with the Image component, but none seem to solve this issue. However, if I refresh the page after all images have rendered once, they ...

Utilize the HTTP.get function to serve files in the img src attribute

I am facing an issue where my file can only be accessed if I include an x-authentication token in the header of the "GET" http request. Unfortunately, using a cookie is not an option in this case. This means I cannot simply call for the file by its URL in ...

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

Steps for converting JSON into a structured indexed array

My goal is to efficiently convert the data retrieved from my firebase database into a format suitable for use with a SectionList. I have successfully established a part of the data structure, but I am facing challenges in associating the data correctly. ...