arun12209/UploadFiles

## UploadFiles
 <apex:page>
   <html>
     <head>
       <apex:slds />
       <apex:includeScript value="https://code.jquery.com/jquery-2.2.4.js"/>
       <script>
       //function starts
       $(function(){
         var fileLenght=0;
         $('#uploadBtn').click(function() {
           var v=document.getElementById('addr');
           console.log(v.files.length);
           fileLenght = v.files.length;
           for (var i = 0; i < v.files.length; i++) {
             uploadSelectedFile(v.files[i], function(err, res){
               FileUploading += 1;
               if (FileUploading === FileUploaded){
                 alert('upload completed');
                 //blank input file value
                 document.getElementById("addr").value = "";
               }
             })
           }
         });
         var FileUploading = 0;
         var FileUploaded = 0;
         var ids = new Array();
         var uploadSelectedFile = function(file, callback) {
           filetoBase64(file, function(err, content){
             var conVer_object = {
               ContentLocation : 'S',
               VersionData : content,
               PathOnClient : file.name,
               Title : file.name
             };
             $.ajax({
               url: '/services/data/v39.0/sobjects/ContentVersion',
               data: JSON.stringify(conVer_object ),
               type: 'POST',
               processData: false,
               contentType: false,
               headers: {'Authorization': 'Bearer {!$Api.Session_ID}', 'Content-Type': 'application/json'},
               xhr: function(){
                 var xhr = new window.XMLHttpRequest();
                 //Upload progress
                 xhr.upload.addEventListener("progress", function(evt){
                   if (evt.lengthComputable) {
                     $('#progress_bar_container').css('display', 'block');
                     var percentComplete = evt.loaded / evt.total;
                     console.log('percentComplete '+percentComplete );
                     var percentCompletex= percentComplete*100;
                     $('#percentText').html("Uploading. Please wait... "+Math.round(percentCompletex)+"%");
                     $('.progress').css('width', percentCompletex+ "%");
                     if(percentCompletex == 100){
                       $('#progress_bar_container').css('display', 'none');
                     }
                   }
                 }, false);
                 return xhr;
               },
               success: function(response) {
                 FileUploaded += 1;
                 console.log(response.id); // the id of the attachment
                 ids.push(response.id);
                 console.log('Ids: ' +ids);
                 $('#records').html('File has been uploeded. Uploaded File ids: ' +ids);
                 if(fileLenght == FileUploaded ){
                   //calculateLocation(ids.toString());
                 }
                 callback(null, true)
               },
             });
           });
         }
         //Read file
         var filetoBase64 = function(file, callback){
           var reader = new FileReader();
           reader.onload = function() {
             var myFileContents = reader.result;
             var base64Mark = 'base64,';
             var dataStart = myFileContents.indexOf(base64Mark) + base64Mark.length;
             myFileContents = myFileContents.substring(dataStart);
             callback(null, myFileContents);
           }
           reader.readAsDataURL(file);
         }
         });
       </script>
       <style>
         .slds-scope .slds-page-header{
         border-radius: 0px;
         box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
         }
         .bodyPart{
         padding:10px;
         }
       </style>
     </head>
     <body>
       <apex:form >
         <div class="slds" style="border:1px solid #D9D9D9;">
           <div class="slds-page-header">
             <span style=""> Upload Files</span>
           </div>
           <div id="progress_bar_container" style="display:none; padding:10px;">
             <span id="percentText"></span>
             <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
               <span class="slds-progress-bar__value progress" style=" width: 0%;">
                 <span class="slds-assistive-text">Progress: 25%</span>
               </span>
             </div>
           </div><br/>
           <div class="bodyPart">
             Select file: <input type="file" name="files[]" multiple="multiple" id="addr"/>
             <input type="button" id="uploadBtn" name="Address" value="Upload" class="slds-button slds-button--brand"></input>
         </div>
         <div id="uploadedrec" style="padding:10px;">
           <span id="records" style=" color:green; ">
           </span>
         </div>
       </div>
     </apex:form>
   </body>
 </html>
 </apex:page>
	<apex:page>
	<html>
	<head>
	<apex:slds />
	<apex:includeScript value="https://code.jquery.com/jquery-2.2.4.js"/>
	<script>
	//function starts
	$(function(){
	var fileLenght=0;
	$('#uploadBtn').click(function() {
	var v=document.getElementById('addr');
	console.log(v.files.length);
	fileLenght = v.files.length;
	for (var i = 0; i < v.files.length; i++) {
	uploadSelectedFile(v.files[i], function(err, res){
	FileUploading += 1;
	if (FileUploading === FileUploaded){
	alert('upload completed');
	//blank input file value
	document.getElementById("addr").value = "";
	}
	})
	}
	});
	var FileUploading = 0;
	var FileUploaded = 0;
	var ids = new Array();
	var uploadSelectedFile = function(file, callback) {
	filetoBase64(file, function(err, content){
	var conVer_object = {
	ContentLocation : 'S',
	VersionData : content,
	PathOnClient : file.name,
	Title : file.name
	};
	$.ajax({
	url: '/services/data/v39.0/sobjects/ContentVersion',
	data: JSON.stringify(conVer_object ),
	type: 'POST',
	processData: false,
	contentType: false,
	headers: {'Authorization': 'Bearer {!$Api.Session_ID}', 'Content-Type': 'application/json'},
	xhr: function(){
	var xhr = new window.XMLHttpRequest();
	//Upload progress
	xhr.upload.addEventListener("progress", function(evt){
	if (evt.lengthComputable) {
	$('#progress_bar_container').css('display', 'block');
	var percentComplete = evt.loaded / evt.total;
	console.log('percentComplete '+percentComplete );
	var percentCompletex= percentComplete*100;
	$('#percentText').html("Uploading. Please wait... "+Math.round(percentCompletex)+"%");
	$('.progress').css('width', percentCompletex+ "%");
	if(percentCompletex == 100){
	$('#progress_bar_container').css('display', 'none');
	}
	}
	}, false);
	return xhr;
	},
	success: function(response) {
	FileUploaded += 1;
	console.log(response.id); // the id of the attachment
	ids.push(response.id);
	console.log('Ids: ' +ids);
	$('#records').html('File has been uploeded. Uploaded File ids: ' +ids);
	if(fileLenght == FileUploaded ){
	//calculateLocation(ids.toString());
	}
	callback(null, true)
	},
	});
	});
	}
	//Read file
	var filetoBase64 = function(file, callback){
	var reader = new FileReader();
	reader.onload = function() {
	var myFileContents = reader.result;
	var base64Mark = 'base64,';
	var dataStart = myFileContents.indexOf(base64Mark) + base64Mark.length;
	myFileContents = myFileContents.substring(dataStart);
	callback(null, myFileContents);
	}
	reader.readAsDataURL(file);
	}
	});
	</script>
	<style>
	.slds-scope .slds-page-header{
	border-radius: 0px;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
	}
	.bodyPart{
	padding:10px;
	}
	</style>
	</head>
	<body>
	<apex:form >
	<div class="slds" style="border:1px solid #D9D9D9;">
	<div class="slds-page-header">
	<span style=""> Upload Files</span>
	</div>
	<div id="progress_bar_container" style="display:none; padding:10px;">
	<span id="percentText"></span>
	<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
	<span class="slds-progress-bar__value progress" style=" width: 0%;">
	<span class="slds-assistive-text">Progress: 25%</span>
	</span>
	</div>
	</div><br/>
	<div class="bodyPart">
	Select file: <input type="file" name="files[]" multiple="multiple" id="addr"/>
	<input type="button" id="uploadBtn" name="Address" value="Upload" class="slds-button slds-button--brand"></input>
	</div>
	<div id="uploadedrec" style="padding:10px;">
	<span id="records" style=" color:green; ">
	</span>
	</div>
	</div>
	</apex:form>
	</body>
	</html>
	</apex:page>