Kéo 'n' Thả tệp vào Ứng dụng gói Chrome?

Question

Có ai đã triển khai và kéo thả thành công các tệp từ máy tính để bàn đến ứng dụng không?

Tôi đã cố gắng chỉ đưa this drag 'n' drop example vào file index nhưng tôi chỉ nhận được lỗi này:

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

Xin hãy chia sẻ câu chuyện của bạn, những gì bạn đã cố gắng và nếu bạn có thành công :)

Answer 1

Tôi đã làm điều này một thời gian trước và nó hoạt động.

Sự cố bạn gặp phải là bạn đang tạo url tệp, sau đó cố điều hướng đến url. Điều hướng không thành công, không phải là đọc. Nó không thành công do CSP và có thể bạn sẽ không thể ghi đè điều đó bằng CSP khác do các hạn chế bảo mật mà chúng tôi đã đặt vào CSP cho phép.

Nhưng, bạn sẽ có thể chỉ đọc tệp và sử dụng nội dung. Bạn cần thay đổi mã mẫu đó để sử dụng ReadAsText hoặc ReadAsArrayBuffer thay vì readAsDataURL. Hãy xem here để biết thêm chi tiết.

Vui lòng cho chúng tôi biết cách bạn tiếp tục!

Answer 2

Một số nguồn lực để giúp bạn:

New Chrome Apps Packaged codelab mà chúng tôi đã được làm việc trên bìa kéo-và-thả trong cả AngularJS và tinh khiết JavaScript.

AngularJS kéo-và-thả: 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

Có một phiên bản đầu của tài liệu quá cho AngularJS drag-and-drop dành cho Chrome tại developer.chrome.com /trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls

Chúng tôi đang làm việc trên tài liệu để bao gồm cả hai mẫu.

Answer 3

Chỉ cần nghe drop sẽ không hoạt động. Bạn sẽ phải ngăn chặn chức năng mặc định của dragover.

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

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