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>
<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>