0

How can i upload multiple images into custom object or attachments from visualforce page. I see the previous posts, but those are upload the single image, can anyone help me

I wrote visualforce page upload images into visualforce and i wrote extension using remote action,but i have confusion about upload multiple images into custom object or attachments

Visualforce:

<apex:page sidebar="false" docType="html-5.0" standardController="Account" extensions="UploadImg">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src='js/jquery-sortable.js'></script>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    </head>
    <apex:define name="header_on">
        <style>
            body {
                font-family: 'Segoe UI';
                font-size: 12pt;
            }

            article {
                width: 80%;
                margin: auto;
                margin-top: 10px;
            }

            .ui-state-default {
                height: 100px;
                margin: 10px;
                float: left;
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
                font-size: 14px;
                transition: opacity 0.3s ease-in-out;
            }

            #clear {
                display: none;
            }

            #sortable {
                display: inline;
            }
        </style>
    </apex:define>
    <script type="text/javascript">
        var doneUploading;
        window.onload = function() {

            //Check File API support
            if (window.File && window.FileList && window.FileReader) {

                $('#files').live("change", function(event) {
                    var files = event.target.files; //FileList object
                    var output = document.getElementById("result");
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        if (file.type.match('image.*')) {
                            if (this.files[0].size < 2097152) {
                                // continue;
                                var picReader = new FileReader();

                                picReader.addEventListener("load", function(event) {
                                    var picFile = event.target;
                                    $('#sortable').append('<div class="ui-state-default"><img height="100" width="100" src="' + picFile.result + '" /></div>');
                                    uploadAttachment(null);
                                    output.insertBefore(div, null);
                                });
                                //Read the image
                                $('#clear, #result').show();
                                picReader.readAsDataURL(file);
                            } else {
                                alert("Image Size is too big. Minimum size is 2MB.");
                                $(this).val("");
                            }
                        } else {
                            alert("You can only upload image file.");
                            $(this).val("");
                        }
                    }

                });
            } else {
                console.log("Your browser does not support File API");
            }
        }
        $('#files').live("click", function() {
            $('.ui-state-default').parent().remove();
            $('result').hide();
            $(this).val("");
        });

        $('#clear').live("click", function() {
            $('.ui-state-default').parent().remove();
            $('#result').hide();
            $('#files').val("");
            $(this).hide();
        });

        $(function() {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
            $('#sortable').sortable({
                cancel: '.note'
            });
        });

        function uploadAttachment(fileId) {
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.UploadImg.doUploadAttachment}',
                '{!Account.Id}', strRentTo, attachmentBody, attachmentName, attachmentId,
                function(result, event) {
                    console.log(result);
                    if (event.status) {
                        if (result.substring(0, 3) == '00P') {
                            if (doneUploading == true) {
                                window.open("/{!Account.Id}", "_blank");
                                window.location.reload();
                            } else {
                                positionIndex += chunkSize;
                                uploadAttachment(result);
                            }
                        }
                    }
                }, {
                    escape: true
                }
            );
        }
    </script>
    <apex:define name="body_on">
        <apex:form>

            <body>
                <article>
                    <label for="files">Select multiple files: </label>
                    <input id="files" type="file" multiple="multiple" />
                    <button type="button" id="clear">Clear</button>
                    <div id="sortable">
                        <output id="result" />
                    </div>

                    <button onclick="uploadAttachment()" rendered="Text">Upload File</button>
                </article>
            </body>
        </apex:form>
    </apex:define>
</apex:page>

Extension:

global class UploadImg {
    public UploadImg(ApexPages.StandardController c) {}
    @RemoteAction
    public static String doUploadAttachment(String acctId, String attachmentBody, String attachmentName, String attachmentId) {
        if (acctId != null) {
            Account acct = getAccount(acctId);
            if (acct != null) {
                if (attachmentBody != null) {
                    Attachment att = getAttachment(attachmentId);
                    String newBody = '';
                    if (att.Body != null) {
                        newBody = EncodingUtil.base64Encode(att.Body);
                    }
                    newBody += attachmentBody;
                    att.Body = EncodingUtil.base64Decode(newBody);
                    if (attachmentId == null) {
                        att.Name = attachmentName;
                        att.parentId = acct.Id;
                    }
                    upsert att;
                    return att.Id;
                } else {
                    return 'Attachment Body was null';
                }
            } else {
                return 'Account could not be found';
            }
        } else {
            return 'Account Id was null';
        }
    }

    @RemoteAction
    public static String doSubmitForm(String acctId, String description, String website, String phone) {
        if (acctId != null) {
            Account acct = getAccount(acctId);
            if (acct != null) {
                acct.Description = description;
                acct.Website = website;
                acct.Phone = phone;
                update acct;
                return 'Success';
            } else {
                return 'Account could not be found';
            }
        } else {
            return 'Account Id was null';
        }
    }

    private static Account getAccount(String acctId) {
        list < Account > accounts = [SELECT Id, Name
            FROM Account
            WHERE Id =: acctId
        ];
        if (accounts.isEmpty()) {
            return null;
        } else {
            return accounts[0];
        }
    }

    private static Attachment getAttachment(String attId) {
        list < Attachment > attachments = [SELECT Id, Body
            FROM Attachment
            WHERE Id =: attId
        ];
        if (attachments.isEmpty()) {
            Attachment a = new Attachment();
            return a;
        } else {
            return attachments[0];
        }
    }
}
0

Please go through the below blog as it uploads multiple attachments using visualforce.

http://forceguru.blogspot.ch/2012/12/uploading-multiple-attachments-into.html

  • Hi Devendra, thanks for your reply. I already did that one, but my requirement is, i need select the multiple images at a time and display the all images in visualforce page. When i click on upload button, all images insert into the custom object or attachement. – Mahitha Jun 16 '16 at 12:24
0

Please check below blog to upload multiple files at one click using salesforce mvp.

https://www.sundoginteractive.com/blog/salesforce-mvp-brings-multi-file-uploading-to-salesforce

Use below URL to get src code for pages, components and apex controller to upload multiple files.

https://github.com/TehNrd/Multi-File-Uploader-Force.com/tree/master/src

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.