Drag and Drop automatic file upload in Liferay CMS and ForgeCart, a complete eCommerce solution

There are a lot of demos and tutorials that show you how to drag-and-drop a file into the browser and then render it on the page. This article is going to address how to bring the feature (Drag and Drop automatic file upload) into Liferay CMS and ForgeCart, a complete eCommerce solution.

Introduction

Drag-and-drop and upload include following specific tasks (refer to blogs Drag and Drop and Automatically Send to the Server):
  • Capture the drop event and read its data.
  • Post that binary data to the server.
  • Provide feedback on the progress of the upload.
  • Optionally render a preview of what's being uploaded and its status.
To achieve all of these, the following HTML5 and non-HTML5 APIs are required:
  • Drag and drop (DnD), a first class citizen in HTML5 - The specification defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page. 
  • FormData object represents an ordered collection of entries. Each entry has a name and value.
  • XMLHttpRequest (XHR) is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script.
  • FileReader interface provides methods to read File objects or Blob objects into memory, and to access the data from those Files or Blobs using progress events and event handler attributes; it inherits from EventTarget. It is desirable to read data from file systems asynchronously in the main thread of user agents. 

In CMS

JavaScript code snippet

function DnDUpload (d, u, m, t) {
 
    var dropZone = d,
        url = u,
        max = m,
        ms = t;
        fileQueue = new Array();
...
var showFileInList = function (ev) { 
  var file = ev.target.file;
 ... 
}
var uploadFile = function (file, li) { 
  var xhr = new XMLHttpRequest();
  ...
}
}
 

Drag and drop, automatic file upload into Server Document and Media, integrated with Tree-View.

Online demo (Liferay Portal 6.1 GA2)

Test account: test@forgelife.com/test
 
Note that FileReader is currently supported in FireFox, Chrome and Opera. IE 9 and Safari 5.x do not support FileReader yet.  Thus this feature would work well in browsers FireFox, Chrome and Opera.
 

In ForgeCart

JavaScript settings
 
window.onload = function () {
    if (typeof FileReader == "undefined") 
    alert("<%= dndTitle %>");
    
    DnDUpload = new DnDUpload(
        document.getElementById("fileDrop"),
        "<%= uploadURL %>",
        <%= fileMaxSize * 1024 %>,
        2000
    );
    DnDUpload.init();
}
 
drag and drop,  automatic image upload
 

 

drag and drop , automatic file upload

 

Download

 
ForgeCart 1.0 beta for Liferay portal 6.1 GA1 or GA2.
 
 
ブログ
Thanks a lot @Sohui, @Paolo, @Satish.

I have raised a new feature ticket: http://issues.liferay.com/browse/LPS-31199.

Your comments / suggestions / feedback?
Jonas everything is okay, but why i cannot see the download option. I want to evaluate the forgecart, when i clikc the above link its taking to Liferay download instead the forgecart download could you clarify my query ??
Jonas everything is okay, but why i cannot see the download option. I want to evaluate the forgecart, when i clikc the above link its taking to Liferay download instead the forgecart download could you clarify my query ??