Drag & Drop file Upload

Drag & Drop file Upload:

Download the JQuery plug in from the below link and add as static resource in your org.

http://js-tutorial.com/ezdz-turn-input-type-file-into-a-nice-drag-drop-zone-920

Visual force Page:

<apex:page docType="html-5.0" showHeader="false" controller="DragDropController">
<apex:includeScript value="https://code.jquery.com/jquery-1.10.1.min.js"/>
<apex:includeScript value="{!URLFOR($Resource.Ezdz,'EzdzPlugin/src/jquery.ezdz.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Ezdz,'EzdzPlugin/src/jquery.ezdz.css')}" />


<script>
    $(document).ready(function() {
        $('input[type="file"]').ezdz();
    });
</script>
<apex:sectionHeader title="Visualforce Example" subtitle="File Upload Example"/>

  <apex:form enctype="multipart/form-data">
    <apex:pageMessages />
    <apex:pageBlock title="Upload a File">

      <apex:pageBlockButtons >
        <apex:commandButton action="{!upload}" value="Save"/>
      </apex:pageBlockButtons>

      <apex:pageBlockSection showHeader="false" columns="2" id="block1">

        <apex:pageBlockSectionItem >
          <apex:outputLabel value="File Name" for="fileName"/>
          <apex:inputText value="{!document.name}" id="fileName"/>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Description" for="description"/>
          <apex:inputTextarea value="{!document.description}" id="description"/>
        </apex:pageBlockSectionItem>

        <apex:pageBlockSectionItem >
          <apex:outputLabel value="Keywords" for="keywords"/>
          <apex:inputText value="{!document.keywords}" id="keywords"/>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Select File" for="file"/> 
             <apex:inputfile id="dragdrop" value="{!document.body}" filename="{!document.name}"/>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>         
    </apex:pageBlock>
  </apex:form>
</apex:page>

Controller:

public with sharing class DragDropController {
 
  public Document document {
    get {
      if (document == null)
        document = new Document();
      return document;
    }
    set;
  }
  
  public List<SelectOption> getTypes() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('txt','txt'));
        options.add(new SelectOption('pdf','pdf'));
        options.add(new SelectOption('JPEG','JPEG'));
        options.add(new SelectOption('JPG','JPEG'));
        options.add(new SelectOption('PNG','PNG'));
        options.add(new SelectOption('docx','docx'));        
        return options;
    }
  
  public PageReference upload() {
     System.debug('Hi' +document);
    document.AuthorId = UserInfo.getUserId();
    document.FolderId = UserInfo.getUserId(); // put it in running user's folder
 
    try {
      insert document;
    } catch (DMLException e) {
      ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading file'));
      return null;
    } finally {
      document.body = null; // clears the viewstate
      document = new Document();
    }
 
    ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'File uploaded successfully'));
    return null;
  }
 
}

In the visual force page,

$('input[type="file"]').ezdz();

The above line of the code will make the file upload as drag & drop.