ajax Live uploaded image in MySql Database And Preview an image before it is uploaded

 

ajax Live uploaded image  in MySql Database And Preview an image before it is uploaded

ajax Live uploaded image  in MySql Database And Preview an image before it is uploaded

<input class="form-control" name="file" id="file" type="file" onchange="loadFile(event)" required=""  >

<img id="sitelogosrc" src="/siteicon/{{$SiteSettingsData->Side_Logo}}">

<script src="http://127.0.0.1:8000/js/axios.min.js"></script>

<script type="text/javascript">

$('#ChangeSitePicture').on('submit', function(event) {
    event.preventDefault();
    const formData = new FormData();
    const imagefile = document.querySelector('#file');
    formData.append("image", imagefile.files[0]);
    var config = { headers: {  'Content-Type': 'multipart/form-data'}};
    var SitelogoUpdateURL = "/SitelogoUpdate";
    axios.post(SitelogoUpdateURL, formData, config).then(function(response) {
        if (response.status !== 200  ||  response.data == 0) {
            document.getElementById("UpdateSitepicbt").innerHTML = loaderwer  ;
            setTimeout(function() {
                document.getElementById("UpdateSitepicbt").innerHTML = "Update Site Logo";
            }, 3000);
        }else if(response.status == 200  && response.data == 1) {
            document.getElementById("UpdateSitepicbt").innerHTML = "Update Successful";
            setTimeout(function() {
                document.getElementById("UpdateSitepicbt").innerHTML = "Update Site Logo";
            }, 3000);
        }
    }).catch(function(error) {
        document.getElementById("UpdateSitepicbt").innerHTML = loaderwer;
        setTimeout(function() {
            document.getElementById("UpdateSitepicbt").innerHTML = "Update Site Logo";
        }, 4000);
    })



})
</script>

<script>
var loadFile = function(event) {
    var output = document.getElementById('sitelogosrc');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
        URL.revokeObjectURL(output.src)
    }
};

</script>