You need to sign in to do that
Don't have an account?

Multiple image previewing and Uploading using <input type="file">
Hi All,
My scenario is here. Please help me to achieve this.
I have HTML file uploader on the Visualforce page, on click on the page I will be able to select multiple files. But My main issue was I couldn't able to insert the attachment due to issue in body blob converting. Attachment record is sucessfully
<script type="text/javascript">
var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
<input type="file" multiple="multiple" id="gallery-photo-add" accept="image/x-png,image/gif,image/jpeg" style="visibility:hidden;" />
<script>
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.file =input.files[i];
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
var att = new sforce.SObject("Attachment");
att.Name = this.file.name;
att.ContentType = this.file.type;
att.ParentId = '5006A000006ZCAXQA4'; // Just hard-coded for testing
att.Body = (new sforce.Base64Binary(event.target.result)).toString(); // Here is the issue I guess
//att.body=input.files[i];
// var result = sforce.connection.create([att]);
if (result[0].getBoolean("success")) {
alert("New Account is created with id " + result[0].id);
}
else {
alert("failed to create new Account " + result[0]);
}
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
</script>
My scenario is here. Please help me to achieve this.
I have HTML file uploader on the Visualforce page, on click on the page I will be able to select multiple files. But My main issue was I couldn't able to insert the attachment due to issue in body blob converting. Attachment record is sucessfully
<script type="text/javascript">
var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/20.0/connection.js" type="text/javascript"></script>
<input type="file" multiple="multiple" id="gallery-photo-add" accept="image/x-png,image/gif,image/jpeg" style="visibility:hidden;" />
<script>
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.file =input.files[i];
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
var att = new sforce.SObject("Attachment");
att.Name = this.file.name;
att.ContentType = this.file.type;
att.ParentId = '5006A000006ZCAXQA4'; // Just hard-coded for testing
att.Body = (new sforce.Base64Binary(event.target.result)).toString(); // Here is the issue I guess
//att.body=input.files[i];
// var result = sforce.connection.create([att]);
if (result[0].getBoolean("success")) {
alert("New Account is created with id " + result[0].id);
}
else {
alert("failed to create new Account " + result[0]);
}
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
</script>