function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rakshana Cube84Rakshana Cube84 

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 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;" />

$(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) {
               var att = new sforce.SObject("Attachment");
           att.Name =;
            att.ContentType = this.file.type;
            att.ParentId = '5006A000006ZCAXQA4'; // Just hard-coded for testing


           att.Body = (new sforce.Base64Binary(;  // Here is the issue I guess

          // 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]);



    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, '');