Blogs

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

Jonas Yuan

November 18, 2012

A Minute Read

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)

URL: http://support.forgelife.com/dnd

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.

8 Comments

Please sign in to comment.

Good features. Thanks, Jonas.

Please sign in to reply.

Hi Jonas good idea I just presented at italy symposium a solution for catalog, ecommerce and mobile. Could I write a blog on it.

Please sign in to reply.

See you the agenda at http://www.liferay.com/web/italy2012/agenda

Please sign in to reply.

Really it's awesome feature

Please sign in to reply.

Thanks a lot @Sohui, @Paolo, @Satish.

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

Your comments / suggestions / feedback?

Please sign in to reply.

@Paolo, looking forward to reading your presentation slides and your blog about "a solution for catalog, ecommerce and mobile".

Please sign in to reply.

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 ??

Please sign in to reply.