CODEWITHSUNDEEP
reactjsbrowser-cache
GregarityNow
GregarityNow

Reputation: 738

Reactjs data changes, filename stays the same

I have a picture, profile.jpg on my server. When I upload a new picture, replacing picture.jpg in data but not in name (in other words, the old profile.jpg gets replaced by the new profile.jpg, but the new one is also called profile.jpg). After my promise is returned, I call forceUpdate, but this doesn't do anything unless I change the actual url (src) of the image. See my code, in which I attempted to concatenate promises in order that react would recognize that the url is changing (from the correct url, to "empty", to the correct url again): 

fetch('http://localhost:3000/change_pet_pic/?petID='+this.props.pet.id+'&userID='+this.props.pet.ownerID, { method: 'POST', body: form })
        .then(function(res) {
            return res.json();
        }).then(function(json) {
            var pet = $this.props.pet;
            pet.petPicture = "empty";
            $this.props.pet=pet;
            $this.forceUpdate();

            return json.picture_url;

        }).then(function(url){
            var pet = $this.props.pet;
            pet.petPicture = url;
            $this.props.pet=pet;

            $this.forceUpdate();
        })

Thanks for your tips!

Upvotes: 1

Views: 77

Answers (1)

Aruna
Aruna

Reputation: 12022

It seems nothing wrong with your ReactJS code instead it should be a browser cache which is causing issue by returning the old image all the time as the image url looks same.

What you can do to get rid of this is, you can access the image with different query string whenever the image is getting changed.

So the first time, you can access this with profile.jpg?v=1 and the second time, you can access it with profile.jpg?v=2 something like that.

Upvotes: 1

Related Questions