Drag 'n' Drop files to a Chrome Package App?

Question

Has anyone successfully implemented drag and drop with files from desktop to the app?

I've tried just putting this drag 'n' drop example into the index file but I just get this error:

Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".

Please share your stories, what you've tried and if you have succeed :)

Answer 1

Some resources to help you:

New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.

AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files

JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files

There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls

We're working on the docs to cover both samples though.

Answer 2

I have done this a while ago and it worked.

The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.

But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.

Please let us know how you get on!

Answer 3

Just listening for drop won't work. You will have to prevent the default functionality of dragover.

document.body.addEventListener('dragover', function(e) {
  e.preventDefault();
}

document.body.addEventListener('drop', function(e) {
  alert('it works!')
}