« Back

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

General Blogs November 17, 2012 By Jonas Yuan

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.
 
 
Threaded Replies Author Date
Good features. Thanks, Jonas. Sohui Gu November 18, 2012 5:32 PM
Hi Jonas good idea I just presented at italy... paolo valeri November 19, 2012 5:42 AM
See you the agenda at... paolo valeri November 19, 2012 5:45 AM
Really it's awesome feature Satish Babu Anupoju November 22, 2012 10:06 PM
Thanks a lot @Sohui, @Paolo, @Satish. I have... Jonas Yuan November 24, 2012 9:06 AM
@Paolo, looking forward to reading your... Jonas Yuan November 24, 2012 9:08 AM
Jonas everything is okay, but why i cannot see... Ronald Reagan November 9, 2013 7:24 AM
Jonas everything is okay, but why i cannot see... Ronald Reagan November 9, 2013 7:24 AM

Good features. Thanks, Jonas.
Posted on 11/18/12 5:32 PM.
Hi Jonas good idea I just presented at italy symposium a solution for catalog, ecommerce and mobile. Could I write a blog on it.
Posted on 11/19/12 5:42 AM.
See you the agenda at http://www.liferay.com/web/italy2012/agenda
Posted on 11/19/12 5:45 AM in reply to paolo valeri.
Really it's awesome feature
Posted on 11/22/12 10:06 PM.
Thanks a lot @Sohui, @Paolo, @Satish.

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

Your comments / suggestions / feedback?
Posted on 11/24/12 9:06 AM in reply to Satish Babu Anupoju.
@Paolo, looking forward to reading your presentation slides and your blog about "a solution for catalog, ecommerce and mobile".
Posted on 11/24/12 9:08 AM in reply to Jonas Yuan.
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 ??
Posted on 11/9/13 7:24 AM.
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 ??
Posted on 11/9/13 7:24 AM.