Tuesday, December 10, 2013

Drag and Drop functionality


<script>
            window.onload = function() {
            var A = AUI();
                var dropbox = document.getElementById("droppingArea"); // id of tag where you want drag and drop
                dropbox.addEventListener("dragenter", dragging, false); // calling dragging method when drag enter
                dropbox.addEventListener("dragexit", dragging, false);
                dropbox.addEventListener("dragover", dragging, false);
                dropbox.addEventListener("drop", dropping, false);      // calling dropping method when dropping a file
            }
         function dragging(event) {
                event.stopPropagation();
                event.preventDefault();
                dropping();
            }

      function dropping(event) {
               event.stopPropagation();
               event.preventDefault();
               var files = event.dataTransfer.files;

                for (var i = 0; i < files.length; i++) {
                    upload(files[i]);
                }
            }

    function upload(file) {
            var formData = new FormData();
                formData.append("fileToUpload", file);
                formData.append("cmd",'cmd'); // these are the parameters which we want in any type of method
          // call to ajax
                sendFileToServer(formData);
      }
           function sendFileToServer(formData){
            // here example of ajax to hit the URL
            $.ajax({
            url: '<%=url of method%>',
            dataType:'text' ,
                    type: "POST",
                    contentType:false,
                    processData: false,
                    cache: false,
                    data: formData,
                    success: function(data){
                    if(data!=""){
               
                    }else{
           
                    }
                    },
                    error: function(){
                    alert("error --- > ");
                    }
            });
           
            }

</script>


No comments:

Liferay DXP JNDI Data Source Cofiguration

 This Blog will help us to learn about the JNDI Data Source Configuration in Liferay DXP. We have tested this with Liferay 7.3 with Tomcat. ...