I have online shopping project in Spring Boot. There is a user profile page in which user is able to update his/her profile picture. As for now, profile pic is uploaded successfully but when I refresh or reload the page, new uploaded image is not showing. Each time I need to logout and re-login then I am able to see my updated image.

Below is the script to upload image to server. Here I have created REST API to convert file into URL and then saving that URL into my database.

  $("#file").change(function(){
        var formData = new FormData();
          var fileSelect = document.getElementById("file");
          if(fileSelect.files && fileSelect.files.length == 1) {
              var file = fileSelect.files[0];
              formData.set("file",file,file.name);
              }else{
                  $("#file").focus();
                  return false;
              }
          var request = new XMLHttpRequest();
          try {
                request.onreadystatechange=function() {
                    if(request.readyState==4) {
                        var v = JSON.parse(request.responseText);
                        if(v.status==="OK") {
                            document.getElementById('imagepath').value = v.response; // Fetched image url from DB and set into a hidden input field.
                            userprofilepic();
                        }
                    }
                }
                request.open('POST',"<%=AkApiUrl.uploadfile%>");
                request.send(formData);
              } catch(e) {
                  swal("Unable to connect to server","","error");
              }
    })

This is the function where user profile pic is uploaded and can be seen.

    function userprofilepic(){
        var img = document.getElementById('imagepath').value;
        var url = "api/updateprofilepic";
        $.post(url, {
            userid : '<%=loginuserid%>',
            img : img,
        }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    swal({title: "Yippee! Image Uploaded!", text: "User Image Uploaded Successfully", type: "success"},
                        function(){
                            location.reload();
                    })
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
    }

Please help me by suggesting possible solution to upload profile image and it should be visible when user reload the page or when uploaded.

Screenshot to display user profile image field