When clicking on the file input field in Angular.js, the image name mysteriously disappears

I am currently utilizing ng-file-upload to upload images with Angular.js. The issue I'm encountering is that when a user selects a file for the second time in the same field, the name of the previously chosen image doesn't display.

Below is my code:

<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">

For instance, if a user selects an image let's say abc.png for the first time and then clicks on the same input field again, the first image abc.png disappears before the user selects a new image. Additionally, if the user cancels the file dialog box, the previous image name also does not remain visible in the file field, which is not the desired behavior.

My goal here is to have the previous image name displayed in the file field until a second image is selected by the user in the same field.

javascriptangularjsng-file-upload

Answer №1

Give this a shot!

Have a go at this solution.

HTML

<div>
<label>profile picture</label>
<div class="upload" flex ng-show="!avatar" ngf-change="fileSelected(avatar, $files)" ngf-keep="false" ngf-select="true" ngf-drop="true" ng-model="avatar" ngf-capture="'camera'" ngf-drag-over-class="'highlight'" ngf-allow-dir="false"  ngf-min-size="10 " ngf-max-size="30000">
<span class="md-caption"><i class="fa fa-paperclip"></i> Drag-and-drop or click to attach a file</span>
</div>
<p ng-show="avatar && avatar.name" class="md-caption">Selected avatar: {{avatar.name|filename|truncate:false:35}} <i class="fa fa-times text-danger" ng-click="avatar = null"></i></p>
<p ng-show="avatar && !avatar.name" class="md-caption">Current avatar: {{avatar|filename|truncate:false:35}} <i class="fa fa-times text-danger" ng-click="avatar = null"></i></p>
</div>

CSS

.upload {
    width: 100%;
    min-height: 40px;
    padding: 20px 10px;
    text-align: center;
    transition: all 0.3s linear;
    border: 2px solid $color-lilac;

    &.highlight {
      border: 4px double $color-true-blue;
    }
  }

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

Fixing the error message stating 'Argument of type '{}' is not assignable to parameter of type 'any[]'. [ng] Property 'length' is missing in type '{}'. Here are steps to resolve this issue:

Currently, I am in the process of developing an Ionic Inventory Management application that incorporates a Barcode Scanner and SQLite database by following this tutorial: Upon adding the following code snippet: async createTables(){ try { awa ...

angularjstypescriptsqliteionic-frameworkerror-handling

Meteor.js in conjunction with ScrollMagic TweenMax.to

Having trouble getting Meteor template.rendered to work with ScrollMagic I am trying to make this code function properly. if (Meteor.isClient) { Meteor.startup(function () { scrollMagicController = new ScrollMagic(); Template.StartAnimatio ...

javascriptjquerymeteorscrollmagic

Load the page using AJAX and automatically scroll to the anchor within the loaded content

I want to achieve an automatic scroll to the beginning of a loaded page after using ajax to load it. Here is the code snippet I currently have: html <button class="btn btn-info btn-lg" type="button" id="photos"> <i class="fa fa-plus fa-5x">&l ...

javascriptajax

What is the best way to center align an element while having another element situated directly below it?

I want to create a grid of "clock" elements, with five clocks in each row. Below each clock, I'd like to display the DAY and DATE centered with the clock (day on top line, date below). Since I'm new to html/css, I appreciate your patience. Here&a ...

javascripthtmlcss

AngularJS and the JavaScript programming language

Struggling with opening an Excel sheet by clicking on a button? I've written the code, but encountering issues. function openFile(strFilePath) { var objExcel; //Create EXCEL object objExcel = new ActiveXObject("Excel.Applicati ...

javascriptangularjsexcel

Issue: The 'in' operator is not allowed for searching

Passing Data from Child Component to Parent Component in AngularJS In my AngularJS project, I have two components: search and form. The search component is a child of the form component. Within the search component, there is a text input field that contai ...

angularjscomponentsangularjs-components

Can a pledge be honored at a precise moment?

I have implemented transitions on my web page. When clicked, everything fades out to an opacity of 0 over a duration of 1 second. Then, a new page is swapped in and everything fades back in to an opacity of 1 over another 1-second duration. The issue aris ...

javascriptjquerycsspromise

The custom server was functioning properly, but as soon as I altered the file directory, an error occurred on Next.js

After creating "create-next-app," I successfully set up the folder structure as follows: +client2 --.next --node_modules --public --... --server.js However, when I move my "server.js" file to a different location: +client2 --.next --no ...

javascriptnode.jsreactjsexpressnext.js

Custom HTML binding in expanding rows of Angular 2 DataTables

I am currently working on implementing a data table feature that allows for an extended child row to be displayed when clicking the + icon. This row will show additional data along with some buttons that are bound via AJAX before transitioning to Angular 2 ...

javascriptangulartypescriptangular2-template

Customizing Magnific Popup: Changing showCloseBtn and closeOnBgClick settings during display

Is there a way to customize the behavior of an open instance of a magnific popup? I want to have different settings for when the popup is closable and when it should be prevented from closing. It appears that these options are only available during initial ...

javascriptjquerymagnific-popup

Obtaining Compiled HTML Output Using AngularJS

I'm running into an issue with obtaining the compiled html of a page in AngularJS. Below is the code snippet that demonstrates this problem: JavaScript: <script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script> &l ...

javascriptangularjs

A guide to implementing X-Frame-Options in an express.js web application using node.js

My dilemma involves serving static assets within iframes across various desktop and mobile web clients. Specifically, I am seeking guidance on how to whitelist a select group of origins for allowing the setting of X-Frame-Options headers. This will enable ...

javascriptnode.jsexpressiframeembed

Create a JSON object using AngularJS to perform a delete operation

Struggling to create a JSON object for deleting data via REST API. Encountering issues with the API call and suspect it's due to improper construction of the JSON object. Here is an excerpt from my AngularJS Controller Code: var data = ["ABC","DEF"] ...

angularjsjsonrestspring-mvccontroller

Issue with Facebook like button not consistently loading on the website

Getting ready to release my new iOS app that creates customized mp3s and distributes them through a CDN-hosted webpage. Check it out at . I've integrated the XFBML code from http://developers.facebook.com/docs/reference/plugins/like/ because it' ...

javascriptfacebookfacebook-like

Is NodeJS Asynchronous: Has the callback been called twice?

I'm currently working with the Async module in Node.JS to manage my asynchronous calls. However, I've encountered an issue stating "Callback already called." Could someone assist me with resolving this problem? async.each(data['results&apos ...

javascriptnode.jsasynchronous

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

I have a scenario on my website where I have two separate div elements: <div class="wg-block" data-reactid="10" <div class="wg-header" data-reactid="11"/div> .... <h4 class='condition'> "Text" </h4> <div cl ...

javascriptcssnightwatch.js

Find the elements of <a> tags specifically without the attribute href

Currently, I am extracting the class of all <a> elements in an HTML document of a webpage using VB.net from a WinForm: Dim htmlLinks As HtmlElementCollection = WebBrowser1.Document.GetElementsByTagName("a") For Each link As HtmlElement In htmlLi ...

javascriptjqueryhtmlcssvb.net

Dynamically populate select options using Spring Boot Ajax technology

Hey everyone, I need some help with populating a select tag with a list of objects in JavaScript. Here's an example of the code: @RequestMapping(value="/getAllIndustries") @ResponseBody public List<IndustryModel>getAllIndustries() { return ...

javascriptjqueryhtmlajaxspring

Encountering a TypeScript error when using Redux dispatch action, specifically stating `Property does not exist on type`

In my code, there is a redux-thunk action implemented as follows: import { Action } from "redux"; import { ThunkAction as ReduxThunkAction } from "redux-thunk"; import { IState } from "./store"; type TThunkAction = ReduxThunk ...

javascriptreactjstypescript

Error: The createContext function is designed for use only in Client Components. To enable it, include the "use client" directive at the beginning of the file

After creating a fresh Next.js application with the app folder, I proceeded to integrate Materiel UI following the example provided in the documentation. However, I encountered an error: TypeError: createContext only works in Client Components. Add the & ...

javascriptreactjsnext.jsmaterial-ui