<%@ Page Title="Bulk Image Post to  S3" Language="C#" MasterPageFile="~/SunMaster.Master" AutoEventWireup="true" CodeBehind="BulkImagePostToS3.aspx.cs" Inherits="SUNWEB.BulkImagePostToS3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%@ Register Assembly="AjaxControlToolkit" TagPrefix="asp" Namespace="AjaxControlToolkit" %>
   
   <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      
       $(function ()
       {
           $("body").on("click", "#uploadBTN", function ()
           //$('#uploadBTN').on('click', function ()
           {
               //  fd.append("", fileUpload.files[0]);     Diabled it now
               //  This is single image save to s3 Bucket
               //  document.getElementById("loading").style.display = 'block'; 
               
              // $('#loading').show();
              // $('#loading').show(); 
               
               var branchname = $('#<%=txtDatabase.ClientID %>').val();

               if ($('#fileUpload').val() == "")
               {
                   alert("No file selected!");
                   return false;
               }
               else if ( branchname== "")
               {
                   alert("You should select the branch !");
               }


              

              

               event.preventDefault();
             
               $('#loading')
                   .hide()
                   .ajaxStart(function () {
                       $(this).show();

                   })
                   .ajaxStop(function () {
                       $(this).hide();
                   });


               
                
                  

               var totalFiles = document.getElementById("fileUpload").files.length;
               console.log(totalFiles);
               for (var i = 0; i < totalFiles; i++)
                  {
                   var fd = new FormData();
                   var file = document.getElementById("fileUpload").files[i];
                   fd.append(" ", fileUpload.files[i]);
                   var arryVal = file.name.split(/\.(?=[^\.]+$)/);
                   arryVal[0];
                   
                 
                   // # ClentName is the  Company Name : Here we Use cm_id Eg. 49   
                   // # BranchName is the actual cloud database name Eg.da1 
                   var clientname = $('#<%=hidclientName.ClientID %>').val();
                   var branchname = $('#<%=txtDatabase.ClientID %>').val();

                   console.log(clientname);
                   console.log(branchname);

                   var file_size = document.getElementById("fileUpload").files[i].size;

                   // if condition added on 26-05-22 
                   // To check the Image before it uploaded to S3 Bucket (Should Bellow 200Kb )
                   if (file_size < 200000)
                   {

                       $.ajax({
                           xhr: function () {
                               var xhr = new window.XMLHttpRequest();
                               xhr.upload.addEventListener("progress", function (evt) {
                                   if (evt.lengthComputable) {
                                       var percentComplete = ((evt.loaded / evt.total) * 100);
                                       $(".progress-bar").width(percentComplete + '%');
                                       $(".progress-bar").html(percentComplete + '%');
                                   }
                               }, false);
                               return xhr;
                           },

                           url: 'https://www.suntoyo.online/api/FileService/Upload',
                           //url:'http://localhost:61760/api/FileService/Upload',

                           type: 'POST',
                           mimeType: "multipart/form-data",
                           data: fd,
                           async: false,
                           crossDomain: true,
                           success: function (data) {


                               $("#hdnPath").val(data);   // Assign the path in hidden variables
                               // $('#output').html(data);

                               S3_CallUpdateLogic(branchname, arryVal[0], data);

                           },


                           beforeSend: function (request) {
                               request.setRequestHeader("clientName", clientname);
                               request.setRequestHeader("fileName", arryVal[0]);
                               request.setRequestHeader("branchName", branchname);
                               $(".progress-bar").width('0%');
                               $('#uploadStatus').html('<img src="images/loading.gif"/>');
                              
                           },
                           /*
                            Bucket name should conform with DNS requirements:
                               - Should not contain uppercase characters
                               - Should not contain underscores (_)
                               - Should be between 3 and 63 characters long
                               - Should not end with a dash
                               - Cannot contain two, adjacent periods
                               - Cannot contain dashes next to periods (e.g., "my-.bucket.com" and "my.-bucket" are invalid)
                            */
                           cache: false,
                           contentType: false,
                           processData: false
                       });


                   }
                   else
                   {
                   }

                   
                  
               }

              
               
               alert("Image Uploaded Successfully")
              

               });
              
            
            });
       
      
      
                     
       function S3_CallUpdateLogic(_branch, _barcode,_data)
       {
           var ret;
           $.ajax({
               type: "POST",
               url: "BulkImagePostToS3.aspx/BulkImageSavingtoS3",
               async: false,
               data: "{'branchalias':'" + _branch + "','Barcode':'" + _barcode + "','data':'" + _data + "'}",
               contentType: 'application/json; charset=utf-8',
               dataType: 'json',
               error: function (XMLHttpRequest, textStatus, errorThrown) {
                   //alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown)
                   alert(_barcode);
               },
               success: function (result) {
                   var data = JSON.parse(result.d);
                   if (data) {
                       ret = data.toString();
                   } else {
                       ret = 0;
                   }
               }

           });
       }


   </script>



</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

  <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
  <ContentTemplate>
       <table style="margin-left: 1%; width: 98%;">
       <tr>
      <td style="font-size:large; width: 50%; font-family:'Open Sans', sans-serif; font-weight:bolder;">
       BULK IMAGE POST 
     </td>    
     
     </tr>
     </table>
    

      <div class="row">
                 
                          <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="card">
                                                    
                                <div class="card-body">
                                 
                                
                                 <div class="form-row">
                                       <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                        </div>
                                       <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                                <label for="validationCustom03">
                                                   <asp:Label ID="lblBranchAliasName"  ForeColor="Gray" runat="server" Text="Branch Name"></asp:Label></label>
                                              <asp:DropDownList ID="cmbBranches" CssClass="custom-select"  
                                                runat="server" AutoPostBack="true" 
                                            onselectedindexchanged="cmbBranches_SelectedIndexChanged"></asp:DropDownList>
                                            </div>


                                 </div>
                                    <div class="form-row">
                                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                        </div>

                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2" style="display:none;">
                                                <caption>
                                                    <label for="validationCustom03">
                                                      Database Name
                                                   </label>
                                                   <asp:TextBox ID="txtDatabase" class="form-control" Height="30px" runat="server" Enabled="false"></asp:TextBox>
                                                  
                                                     
                                                </caption>
 
                                                    
                                                
                                            </div>
                                        </div>

                                    <div class="form-row">
                                         <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                        </div>

                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                                <label for="validationCustom03"> Upload Image
                                                 </label>

                                                <input type="file"   id="fileUpload" style=" width:100%" accept=".png,.jpg"  multiple />
                                                
                                                
                                           

                                            </div>
                                        </div>
                                          
                                    <div class="form-row">
                                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">
                                        </div>
                                               <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 mb-2">

                                               <button id="uploadBTN" type="button"  class="btn btn-primary" value="Upload" onclick="return confirm('Are you sure You want to this Branch ?')">Upload</button>
                                               <div class="form-row">
                                               <div class="progress">
                                               <div class="progress-bar"></div>
                                               </div>

                                              <%-- 
                                                  <div id="loading">
                                                   <p id="myParagraph">  Please Wait....</p>   
                                                   </div>
                                             --%>
                                             </div>

                                           </div>
                                       </div>

                                      <div class="form-row">
                                      
                                      <asp:HiddenField ID="hidclientName" runat="server" />
                                      <asp:HiddenField ID="hdnPath" runat="server" />
                                      <asp:HiddenField ID="hdnurl" runat="server"  ClientIDMode="Static" />
                                      <asp:HiddenField ID="hdnfileid" runat="server"  ClientIDMode="Static"/>
                                    </div>

                                 
                                    </div>
                                
                                 </div>
                                 
                                
                                                         
                                </div>
                            </div>
    </div>
 
   
   <div>
       <h4>&nbsp;<asp:Label ID="lblGreeting" runat="server"></asp:Label></h4>
           <%--<asp:Button ID="btnPdf" runat="server" Text="PDF" 
            ToolTip="To Export  the Report Click Here"  CssClass="btn btn-secondary" 
            onclick="btnPdf_Click"/>--%>   
     </div>
     </ContentTemplate>
     </asp:UpdatePanel>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css?v=1.1" rel="stylesheet" />
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Optional Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />



</asp:Content>
