0

I have a problem with my Angular4 app, I've made the whole upload file system and it's working but when i do upload the image and refresh the page, the image doesn"t change.

Here's the img tag

<img  class="img-thumbnail img-responsive" src="../../../assets/img/profile/{{user.img}}" width="300px" height="300px">

user.img is a string from the database.

The component file

import { Component, OnInit } from '@angular/core';
import { FormControl,FormGroup,FormBuilder,Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { FileUploader ,FileSelectDirective} from 'ng2-file-upload';

@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.css']
})
export class EditProfileComponent implements OnInit {

	editForm;
  messageClass;
  message;
  user;
  birthday;
  bYear; // cut the date to fit the select tag
  bMonth;
  bDay;
  
  public uploader: FileUploader= new FileUploader({url:'http://localhost:8080/authentication/edit-photo',headers:[{name:'authorization',value:this.authService.authToken}]});

ngOnInit() {
    this.authService.getProfile().subscribe(data=>{
      this.user=data.user;
      this.birthday=new Date(this.user.birthday);
      this.bMonth=this.birthday.getUTCMonth() + 1;
      this.bYear=this.birthday.getUTCFullYear();
      this.bDay=this.birthday.getUTCDate();
      
    });

I've tried lot of ways, none of them has worked yet. What do you propose ?

EDIT

I've noticed that when i saved the file in the code editor, the image changes, but after refreshing the browser, it's not.

I also want to specify that all image uploaded are placed in the asset folder in the src folder of angular, because i could'nt access them when they were outside of the angular directory. Maybe that's why it doesn't change before i save the file ? because the ng serve reload ? Please i need help for this

Improve this question
10
  • does it change on the server? Commented Aug 27, 2017 at 21:31
  • Does user.img change with new upload? If not, you may be hitting browser cache = you need unique image url for each upload Commented Aug 27, 2017 at 21:31
  • assuming your server can deal with it, add a random query string to the image URL so the browser won't get the image from its cache Commented Aug 27, 2017 at 21:40
  • @JaromandaX It does. Commented Aug 27, 2017 at 21:41
  • @insider I just console.logged user.img and I have a blank page ! There's a new error i must found here .. Commented Aug 27, 2017 at 21:41

2 Answers 2

Reset to default
1

I met the same kind of issue and it was cache problem. I tested it in Ror&angular website. For default the image data cache exists 2 days.
Have you once changed the image in your File explorer(Finder)?.
I have deleted the cache and it worked well. If you don't want to delete cache, you can complete the code in Incognito window and test the final action after 2 days.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Sure but when in production, client is probably not going to be in incognito. I need a stable solution for this to move on, it's taking too much time now. About the cache, that's probably the problem however maybe it"s not. I was thinking about the fact that all angular files might be static before a ng serve, but probably related to the cache. I don't know how cache works with anglar2+, even the doc doesn"t talk about it.
@AzoulayJason the cache is handled by browser not by angular. If you want to get rid of it, you have few options: #1 set correct headers for image request (needs to be done on server). #2 set unique url for each upload so browser has still cache (= you save bandwidth for unchanged images)
I've followed your instruction. There was indeed a cookie at the name of the picture, so I removed cookie from the request headers, then i've set a unique id to each uploads. The result is that there's no picture displayed and I got an error 404 not finding the file. My guess is that angular doesn't even know the picture exist before I hit save button in my text editor.
I think I have to restart server everytime I upload a file, how can i do that ? Is this a good process ?
You don't need that, In my experience , if I don't change the static file content in file explorer, all things worked well, reading and writing then reading.
|
1

You don't want to use ng serve as a production build, it uses a webpack dev-server which is only meant for development. You want to use ng build and serve the index.html file through nginx, apache, or some other server software. Here is a short forum on this https://github.com/angular/angular-cli/issues/5274

The webpack dev-server creates the build in your local virtual memory. So when you update your assets folder you have to restart ng serve so the webpack dev-server has the updated assets.

This won't be a problem when using ng build since both the application & the assets folder will be served on the same server.

Improve this answer

2 Comments

Actually it's not a server compatibility problem, it's more like a compilation problem. Angular can't detect the file I've just uploaded since it's not in its "memory".It is embedded only after a ng serve, I've just tried a ng build and still has the same issue.
@AzoulayJason the more I think about it, I don't think assets is the best place for user images. Assets should contain files that are only added when you are releasing new versions. I would add the images outside of your angular directory and reference them with a full url

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.