Upload Image by using File Control with JS or Update Panel or C# DNN Partial Post back

 In this article i will show how you can upload image with partial post back and as well as using views 

We need to create multi view and views and under view we have a form where the file upload control is present we need to place this script under this view otherwise partical post back in DNN stuck because controller will not found 

                

     <script id="rendered-js" >

   /* I use this code to get the image in base 64 and add in to the textbox to get the value in particle post back in next tab */

              // Display image is preview function

         function displayImage() {

             document.querySelector("#demoImage").src = document.querySelector("#<%=txt_imgValue.ClientID%>").value;

         }

          // Get the file upload control image read it in to base 64 value the plus point for it either you can store the whole image in db as a text or save it as file after rendering it. 

           function ReceiveImageInto_Base64() {

              const image_input = document.querySelector("#<%=fp_productImage.ClientID%>");

            image_input.addEventListener("change", function () {

              const reader = new FileReader();

              reader.addEventListener("load", () => {

                const uploaded_image = reader.result;

                  

                  document.querySelector("#<%=txt_imgValue.ClientID%>").value = `${uploaded_image}`;

                  displayImage();

              });

                reader.readAsDataURL(this.files[0]);

            });

          }

/*

fp_productImage.ClientID is the file upload control at ASCX page 

txt_imgValue.ClientID is a text field that keep the value of the image 

*/       

          $(document).ready(function () {

              ReceiveImageInto_Base64();

              displayImage();

          });

          

          //Re-bind for callbacks (This is a key to work on Partical postback )

          var prm = Sys.WebForms.PageRequestManager.getInstance();

          prm.add_endRequest(function () {

              $(document).ready(function () {

                  ReceiveImageInto_Base64();

                  displayImage();

              });

          });

     </script>