Hello everyone, In this post i am providing a code example of jquery that helps you to save file in content document object through visualforce page.
Upload file in content document using jquery in visualforce page
1. Navigate to Developer Console | File | New | Visualforce Page and create a new visualforce page called UploadFileUsingJquery and replace the following markup.
UploadFileUsingJquery.vfp
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<apex:slds />
<apex:includeScript value="https://code.jquery.com/jquery-2.2.4.js"/>
<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> 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"/>
</div>
<div id="uploadedrec" style="padding:10px;">
<span id="records" style=" color:green; ">
</span>
</div>
</div>
</apex:form>
<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('File successfully uploaded');
//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 conVerObject = {
ContentLocation : 'S',
VersionData : content,
PathOnClient : file.name,
Title : file.name
};
$.ajax({
url: '/services/data/v39.0/sobjects/ContentVersion',
data: JSON.stringify(conVerObject),
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>
</body>
</html>
</apex:page>
2. Preview UploadFileUsingJquery visualforce page to see the output.
Output:
Thank you.
0 Comments
Post a Comment