javascript - Uploading Multiple Files in Salesforce through Visualforce -
i upload multiple files in salesforce using visualforce. can upload 1 file @ time.
but requirement is, want display 1 "add file" button in visualforce page, when clicked on button browse window should open , user selects particular file , adds it. after adding file, file path should displayed same "add file" button should displayed below allows add file. , after can save have added. same adding attachments in our email.
any regarding appreciated.
<!-- use uploadfile function attach multiple attachment.update hardcoded parent id.--> <apex:page> <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 type="text/javascript"> var __sfdcsessionid = '{!getsessionid()}'; var filestoupload = []; var uploadedfile = 0; </script> <style> .filebuttonstyle{ font-family:arial,'helvetica neue',helvetica,sans-serif; font-size:13px`enter code here`;color:#ffffff; background-color: #169fcc !important; text-decoration:none; text-align:center; border:1px solid #1691ba !important; line-height: 25px;!important; border-radius:4px; display:inline-block; cursor:pointer; width:85px; } td.filerow { overflow: hidden; font-family:arial,'helvetica neue',helvetica,sans-serif; font-size:13px;color:#ffffff; background-color: #8db728; text-decoration:none; text-align:center; border:1px solid #6c8049; line-height: 32px;!important; border-radius:4px; //padding-left:10px; //padding-right:10px; background-image:linear-gradient(top,#9dcc3d,#7da223); background-image:-o-linear-gradient(top,#9dcc3d,#7da223); background-image:-moz-linear-gradient(top,#9dcc3d,#7da223); background-image:-webkit-linear-gradient(top,#9dcc3d,#7da223); background-image:-ms-linear-gradient(top,#9dcc3d,#7da223); display:inline-block; cursor:pointer; width:120px; overflow: hidden; } td.filerow input { display: block !important; width: 157px !important; height: 57px !important; opacity: 0 !important; overflow: hidden !important; } .filecheckbox { width: 16px; height: 16px; display: inline-block; margin: 3px 5px 3px 3px; background-color: white; //box-shadow: 0px 0px 1px #b0b3ae; text-align: center; vertical-align: top; } .filebuttongroup{ float:right; padding-right: -70px!important; } </style> <script src="/soap/ajax/32.0/connection.js" type="text/javascript"></script> <script type="text/javascript"> function uploadfile(parentid) { // var input = $('.fileinput')[0]; //var input = document.getelementbyid("file-input"); // var filestoupload = input.files; $("input[type=file]").each(function(){ filestoupload.push($(this)[0].files[0]); }); //console.log(filestoupload); for(var = 0, f; f = filestoupload[i]; i++) { var reader = new filereader(); // keep reference file in filereader can accessed in callbacks reader.file = f; reader.onload = function(e) { var att = new sforce.sobject("attachment"); att.name = this.file.name; att.contenttype = this.file.type; att.parentid = parentid; var binary = ""; var bytes = new uint8array(e.target.result); var length = bytes.bytelength; (var = 0; < length; i++) { binary += string.fromcharcode(bytes[i]); } att.body = (new sforce.base64binary(binary)).tostring(); sforce.connection.create([att], { onsuccess : function(result, source) { if (result[0].getboolean("success")) { console.log("new attachment created id " + result[0].id); } else { console.log("failed create attachment " + result[0]); } }, onfailure : function(error, source) { console.log("an error has occurred " + error); } }); }; reader.readasarraybuffer(f); } } function addrow(tableid){ var row = '<tr><td><input type="checkbox" onclick="processcheckbox()" name="chk" class="filecheckbox"/</td><td class="filerows"><input type="file"/> </td></tr>'; $('#'+tableid).append(row); } function deleterow(tableid) { try { var table=document.getelementbyid(tableid); var rowcount=table.rows.length; for(var i=0;i<rowcount;i++) { var row=table.rows[i]; var chkbox=row.cells[0].childnodes[0]; if(null!=chkbox&&true==chkbox.checked) { table.deleterow(i); filestoupload.splice(i, 1); // console.log(filestoupload); rowcount--; i--; } } processcheckbox(); } catch(e) { alert(e); } } function processcheckbox(){ $("[id$='_remove']").hide(); var checkcount=0; $("#datatable input[type='checkbox']").each(function(){ if($(this).is(':checked')) { checkcount++; } }); if(checkcount >0){ $("[id$='_remove']").show(); } } </script> <div class="filebuttongroup"> <input type="button" value="delete row" id="_remove" onclick="deleterow('datatable')" class="filebuttonstyle" title="delete row"/> <input type="button" value="add row" onclick="addrow('datatable')" id="_add" class="filebuttonstyle" title="add row"/> </div> <table id="datatable" > <tbody> <tr> <td> </td> <td class="filerows"> <input type="file" class="fileinput"/> </td> <td></td> </tr> </tbody> </table> <!--correct attachment parentid --> <input type="button" value="upload" onclick="uploadfile('5009000000cjezn')" title="upload"/> <div id="statusid"></div> <script> $(document).ready(function(){ $("[id$='_remove']").hide(); $("[id$='attachmentblock']").find('.pbsubsection').attr({'style':'margin-right:-70px !important;'}); }); </script> </apex:page>
Comments
Post a Comment