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
kiran2000kiran2000 

drag and drop files in visualforce page

HI,

 

How to acheive drag and drop files in visualforce page

 

Thanks

sambasamba

I did it before. Here is a JavaScript code.

 

<script type="text/javascript">
function showPop()
{
document.getElementById("inlineEditDialog").style.visibility = "visible";
}
function closePop()
{
document.getElementById("inlineEditDialog").style.visibility = "hidden";
window.location.href = window.location.href;
}
function updateFileValue(obj) {
jQuery('.fileProxy').val(jQuery(obj).val());
}
function focusInput(focusClass, normalClass) {
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
elements[i].onfocus = function() { this.className = focusClass; };
elements[i].onblur = function() { this.className = normalClass||''; };
}
}
}
(function() {

function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
document.getElementById("filearea").className = (e.type == "dragover" ? "areahover" : "");
}

function FileSelectHandler(e) {
FileDragHover(e);
var files = e.target.files || e.dataTransfer.files;
var f = files[0];
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById("page:form:block:csvBody").value = evt.target.result;
calculateResult();
}
reader.readAsText(f);
document.getElementById("page:form:block:csvName").value = f.name;
}

function Init() {
var filedrag = document.getElementById("filedrag");
var xhr = new XMLHttpRequest();
if (xhr.upload) {
filedrag.addEventListener("dragover", FileDragHover, false);
filedrag.addEventListener("dragleave", FileDragHover, false);
filedrag.addEventListener("drop", FileSelectHandler, false);
filedrag.style.display = "block";
}
}
if (window.File && window.FileList && window.FileReader) {
Init();
}
})();
</script>

 

Hope this helps.

 

Thanks,

Samba

kiran2000kiran2000

can u post the vf page as well.

 

 

Kumbresh KKumbresh K
How to achieve this in lightning component ?