Drag and drop a folder onto Chrome now available

As web apps evolve, you might have found it handy to let users drag and drop files from the desktop onto the browser to edit, upload, share, etc. But unfortunately, we’ve been unable to drag and drop folders onto web pages. Luckily, beginning with Chrome 21, this issue will be addressed (already available in the Chrome dev channel).

Passing multiple files with drag and drop

Let’s look at a code sample of existing drag and drop.

<div id=”dropzone”></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.files.length;
  for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
  }
};

In this example, you can actually drag and drop a file or files from the desktop to your browser, but when you try to pass a folder, notice that it will be either rejected or treated as a File object resulting in a failure.

How to handle dropped folders

Chrome 21 allows you to drop a folder or multiple folders into the browser window. To handle these, you need to change the way you handle dropped objects.

<div id=”dropzone”></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};

Notice that a big difference here is that you can treat a dropped object as Entry (FileEntry or DirectoryEntry) by using new function called getAsEntry (webkitGetAsEntry).
After obtaining access to the Entry object, you can use standard file handling methods that were introduced in the FileSystem API specification. For example, this example shows how you can detect if a dropped object is a file or a directory by examining the .isFile (or the .isDirectory) field.

For further information regarding the FileSystem API, read Exploring the FileSystem APIs, regarding new drag and drop capability, read this document. Of course, these features are open standards or are waiting to become one soon.

 Integrating input[type="file"] with the Filesystem API

 - http://updates.html5rocks.com/tag/file-access

: http://html5-demos.appspot.com/static/dnd/all_types_of_import.html

In a recent post, Eiji Kitamura highlighted a subtle, yet powerful new feature in the drag and drop APIs; the ability to drag in folders and retrieve them as HTML5 Filesystem API FileEntry and DirectoryEntry objects (done by accessing a new method on the DataTransferItem, .webkitGetAsEntry()).

What's remarkably cool about the .webkitGetAsEntry() extension is how elegant it makes importing files and entire folders. Once you have a FileEntry or DirectoryEntry from a drop event, it's a matter of using the Filesystem API's copyTo() to get it imported into your app.

An example of copying multiple dropped folders over to the filesystem:

var fs = null; // Cache filesystem for later.

// Not shown: setup drag and drop event listeners.
function onDrop(e) {
  e.preventDefault();
  e.stopPropagation();

  var items = e.dataTransfer.items;

  for (var i = 0, item; item = items[i]; ++i) { 
    var entry = item.webkitGetAsEntry();

    // Folder? Copy the DirectoryEntry over to our local filesystem.
    if (entry.isDirectory) {
      entry.copyTo(fs.root, null, function(copiedEntry) {
        // ...
      }, onError);
    }
  }
}

window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
  fs = fileSystem;
}, function(e) {
  console.log('Error', e);
});

Very nice! Again, the simplicity comes from integrating DnD with the Filesystem API calls.

Taking this one step further, we also have the ability to drag and drop a folder and/or files onto a normal <input type="file">, then access the entries as Filesystem directory or file entries. That is done through .webkitEntries:

<input type="file" multiple>

function onChange(e) {
  e.stopPropagation();
  e.preventDefault();

  var entries = e.target.webkitEntries; // Get all dropped items as FS API entries.

  [].forEach.call(entries, function(entry) {

    // Copy the entry into our local filesystem.
    entry.copyTo(fs.root, null, function(copiedEntry) {
      ...
    }, onError);

  });
}

document.querySelector('input[type="file"]').addEventListener('change', onChange);

I've put together a photo gallery demo to demonstrate these different techniques for importing files/folders.

Launch Demo

To learn more about the HTML5 Filesystem API, see Exploring the Filesystem APIs.

http://developers.facebook.com/mobile/

Build with Facebook on any Platform

Over 500 million people visit Facebook from a Mobile device each month. Mobile apps that integrate with Facebook provide a fundamentally better user experience.

Getting started

  1. Register your web app
  2. Implement the Facebook SDK
  3. Log the user in

Adding social context

  4. Use the Graph API
  5. Integrate with Social Channels

Deploying your social mobile web app

  6. Display your app properly on devices
  7. Test your integration
  8. Set icons

Zend Framework 2 is an open source framework for developing web applications and services using PHP 5.3+. Zend Framework 2 uses 100% object-oriented code and utilises most of the new features of PHP 5.3, namely namespaces, late static binding, lambda functions and closures.

다운로드 : http://framework.zend.com/

배우기 : http://www.zend.com/services/training/course-catalog/zend-framework?src=ZFsite

 RTSP는 월드와이드웹 상에서 스트리밍 데이터를 제어하는 방법에 대한 표준안이다. RTSP는 미국 컬럼비아 대학과 넷스케이프 및 RealNetworks 등에 의해 수행된 작업으로부터 비롯되었으며, 표준으로 지정 받기 위해 IETF에 제출되었다.

RTSP도 H.323과 마찬가지로, 멀티미디어 콘텐츠 패킷 포맷을 지정하기 위해 RTP를 사용한다. 그러나 H.323이 적당한 크기의 그룹간에 화상회의를 하기 위해 설계된 데 반해, RTSP는 대규모 그룹들에게 오디오 및 비디오 데이터를 효율적으로 브로드캐스트 하기 위한 목적으로 설계되었다.

마이크로포맷(microformat)은, 웹 페이지 및 RSS와 같은 HTML 또는 XHTML 기반의 정보군에서 사용될 수 있는, 특정 마크업을 사용하여 정보를 메타 데이터 형태로 가공하는 방식으로 구현되는 정보 포맷 방식을 뜻한다. 줄여서 μF, uF라고 표기한다. 용도에 따라 여러 가지 마이크로 포맷이 존재한다. 마이크로포맷에서는, class^[1], rel^[2], rev 등의 HTML 속성 마크업들이 사용된다.

보통의 HTML 웹 페이지에 마이크로포맷을 적용시키게 되면, 웹 크롤러 등의 프로그램이 여러 가지 부가 정보를 웹 페이지에서 인식해내는 것이 가능해진다.

NULI - 마이크로포맷을 사용해볼까요?