{"id":4107,"date":"2014-12-19T06:00:48","date_gmt":"2014-12-19T06:00:48","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4107"},"modified":"2014-12-19T06:05:09","modified_gmt":"2014-12-19T06:05:09","slug":"salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based\/","title":{"rendered":"Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based"},"content":{"rendered":"
\"HTML5<\/a>
HTML5 based Drag And Drop File<\/figcaption><\/figure>\n

You may find many ways to upload attachments in Salesforce using\u00a0visualforce\u00a0however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought to create one simple Visualforce component which can show progress bar and have drag and drop capabilities.<\/p>\n

Initially i gave though to use visualforce remoting however challenge was how to show progress bar and same challenge was with custom controller or extension also. So, i decided to create one simple Apex REST API to upload attachment.<\/p>\n

<\/p>\n

\r\n@RestResource(urlMapping='\/DragAndDrop\/v1\/*')\r\nglobal with sharing class DragAndDropRESTAPI\r\n{\r\n    @HttpPost\r\n    global static String attachDoc(){\r\n        RestRequest req = RestContext.request;\r\n        RestResponse res = Restcontext.response;\r\n\r\n        String fName = req.params.get('FileName');\r\n        String parId = req.params.get('parId');\r\n        Blob postContent = req.requestBody; \r\n\r\n        Attachment a = new Attachment (ParentId = parId,\r\n                                       Body = postContent,\r\n                                       Name = fName);\r\n\r\n        insert a;\r\n        return a.Id;\r\n   }\r\n}\r\n<\/pre>\n
After this class, I created below Visualforce component which needs only two parameter – Parent record id where attachment needs to be loaded and height of component.<\/p>\n
\r\n<apex:component >\r\n         <apex:attribute name="parentId" type="String" description="Parent record where attachment would be attached"\/>\r\n         <apex:attribute name="DragDropHeight" type="String" description="Height in Pixel for Drag and Drop Section"\/>\r\n    <style>\r\n        #holder {\r\n            border: 2px dashed #ccc;\r\n            width: 98%;\r\n            height:95%;\r\n            background-color:#ccc;\r\n            -webkit-border-radius: 8px 8px 8px 8px;\r\n            border-radius: 8px 8px 8px 8px;\r\n            text-align: center;\r\n            }\r\n        #holder span, #uploadCompleted span {\r\n            position: relative;\r\n            top: 30%;\r\n            transform: translateY(-50%);\r\n            text-shadow: 2px 2px 2px #525252;\r\n            font-size:3em;\r\n            color:#A3A3A3;\r\n            }\r\n        #holder.hover { border: 2px dashed #636363; }\r\n\r\n        #uploadStatus span{\r\n            text-shadow: 2px 2px 2px #525252;\r\n            font-size:1em;\r\n             }\r\n\r\n        #holder p { margin: 10px; font-size: 14px; }\r\n        progress { width: 100%;  height:2em;  }\r\n        progress:after { content: '%'; }\r\n        .fail { background: #c00; padding: 2px; color: #fff; }\r\n        .hidden { display: none;}\r\n        .dragDropComponentSize{ height:{!DragDropHeight} ; overflow-y:auto; }\r\n        body{width:98%;font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;}\r\n    <\/style>\r\n\r\n<article class="dragDropComponentSize" id="dndContainer">\r\n    <div id="holder" >\r\n        <span id="holder_txt1"> Drag and Drop file here <\/span>\r\n         <span  id="holder_txt2" class="hidden"> Upload <\/span>\r\n    <\/div>\r\n    <p id="upload" class="hidden"><label>Drag &amp; drop not supported by your browser, but you can still upload via this input field:<br \/><input type="file" \/><\/label><\/p>\r\n    <p id="filereader">File API &amp; FileReader API not supported<\/p>\r\n    <p id="formdata">XHR2's FormData is not supported<\/p>\r\n    <p id="progress">XHR2's upload progress isn't supported<\/p>\r\n    <p id="uploadStatus" class="hidden"><span>Upload progress:<\/span> <progress id="uploadprogress" min="0" max="100" value="0">0<\/progress><\/p>\r\n<\/article>\r\n<script>\r\n    var holder = document.getElementById('holder');\r\n    var holder_txt1 = document.getElementById('holder_txt1');\r\n    var holder_txt2 = document.getElementById('holder_txt2');\r\n    var uploadStatus = document.getElementById('uploadStatus'); \r\n\r\n    var sfdcHostName =window.location.host.split('.')[1]; \r\n\r\n    tests = {\r\n      filereader: typeof FileReader != 'undefined',\r\n      dnd: 'draggable' in document.createElement('span'),\r\n      formdata: !!window.FormData,\r\n      progress: "upload" in new XMLHttpRequest\r\n    },\r\n    support = {\r\n      filereader: document.getElementById('filereader'),\r\n      formdata: document.getElementById('formdata'),\r\n      progress: document.getElementById('progress')\r\n    },\r\n    progress = document.getElementById('uploadprogress'),\r\n    fileupload = document.getElementById('upload');\r\n\r\n"filereader formdata progress".split(' ').forEach(function (api) {\r\n  if (tests[api] === false) {\r\n    support[api].className = 'fail';\r\n  } else {\r\n    support[api].className = 'hidden';\r\n  }\r\n});\r\n\r\nfunction textBeforeDrag(flag){\r\n    if(flag)\r\n    {\r\n        holder_txt1.className = '';\r\n        holder_txt2.className = 'hidden';\r\n    }else{\r\n        holder_txt1.className = 'hidden';\r\n        holder_txt2.className = '';\r\n    }\r\n}\r\n\r\nfunction resetAll()\r\n{\r\n    holder.className = holder_txt1.className = '';\r\n    holder_txt2.className = uploadStatus.className = 'hidden';\r\n}\r\n\r\nfunction readfiles(files) { \r\n\r\n    var formData = tests.formdata ? new FormData() : null;\r\n\r\n      \/\/Not sure why multiple files dropping, so for time being disable multi file functionality\r\n      if(files.length > 1)\r\n      {\r\n          alert('Multi Upload is not supported, please try to upload single file');\r\n          return;\r\n      }\r\n\r\n    for (var i = 0; i < files.length; i++) {\r\n        uploadStatus.className = '';\r\n        holder.className = 'hidden';\r\n        \/\/ now post a new XHR request\r\n        if (tests.formdata) {\r\n          var xhr = new XMLHttpRequest();\r\n\r\n          var sfdcurl = 'https:\/\/'+sfdcHostName+'.salesforce.com\/services\/apexrest\/DragAndDrop\/ v1?FileName='+encodeURIComponent(files[i].name)+'&cType= '+encodeURIComponent(files[i].type)+ '&parId={!parentId}' ;\r\n\r\n          xhr.open('POST','\/services\/proxy' );\r\n\r\n          \/\/xhr.setRequestHeader("Content-type",'multipart\/form-data');\r\n          \/\/xhr.setRequestHeader("Content-type",'');\r\n          xhr.setRequestHeader("Authorization","Bearer {!$Api.Session_ID}");\r\n          xhr.setRequestHeader('SalesforceProxy-Endpoint', sfdcurl);\r\n          xhr.setRequestHeader('X-User-Agent', 'DragAndDropAPI v1.0');\r\n\r\n          xhr.onload = function() {\r\n            progress.value = progress.innerHTML = 100;\r\n            \/\/resetAll();\r\n          };\r\n\r\n          if (tests.progress) {\r\n            xhr.upload.onprogress = function (event) {\r\n              if (event.lengthComputable) {\r\n                var complete = (event.loaded \/ event.total * 100 | 0);\r\n                progress.value = progress.innerHTML = complete;\r\n              }\r\n            }\r\n          }\r\n\r\n          xhr.onreadystatechange=function()\r\n            {\r\n                if (xhr.readyState==4 && xhr.status != 200)\r\n                {\r\n                    if(xhr.responseText)\r\n                        alert(xhr.responseText);\r\n                    else\r\n                        alert('Some error occurred while uploading file');\r\n\r\n                     console.log(xhr);\r\n                }\r\n            }\r\n\r\n          xhr.send(files[i]);\r\n        }\r\n    } \r\n\r\n    \/*\r\n    if("{!isRefresh}".toUpperCase()  == "TRUE")\r\n    {\r\n        location.reload();\r\n    }\r\n    *\/\r\n}\r\n\r\nif (tests.dnd) {\r\n  holder.ondragover = function () {\r\n        this.className = 'hover';\r\n        textBeforeDrag(false);\r\n        return false;\r\n      };\r\n  holder.ondragend = function () {\r\n        this.className = '';\r\n        textBeforeDrag(true);\r\n        return false;\r\n      };\r\n  holder.ondrop = function (e) {\r\n        textBeforeDrag(true);\r\n        this.className = '';\r\n\r\n        e.preventDefault();\r\n        readfiles(e.dataTransfer.files);\r\n  }\r\n} else {\r\n        fileupload.className = 'hidden';\r\n        fileupload.querySelector('input').onchange = function () {\r\n        readfiles(this.files);\r\n  };\r\n}\r\n\r\n<\/script>\r\n<\/apex:component>\r\n<\/pre>\n
And we are now good to use above component anywhere in our salesforce application. For example, I used this component in one Visualforce page and added it as inline Visualforce in my Account Page layout.<\/p>\n
\r\n<apex:page standardController="Account" docType="html-5.0" >\r\n    <c:DragDrop parentId="{!$CurrentPage.parameters.id}" DragDropHeight="100px" \/>\r\n<\/apex:page>\r\n<\/pre>\n
Demo is shown in below youtube video.<\/p>\n