ड्रैग 'एन' ड्रॉप फ़ाइलों को क्रोम पैकेज ऐप पर खींचें?

Question

क्या किसी ने सफलतापूर्वक डेस्कटॉप से ​​फ़ाइलों तक ड्रैग और ड्रॉप को कार्यान्वित किया है?

मैं किया है, उसे इंडेक्स फ़ाइल में this drag 'n' drop example डालने की कोशिश की, लेकिन मैं सिर्फ इस त्रुटि मिलती है:

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

अपनी कहानियों, तुम क्या कोशिश की है साझा करें और आप सफल हो, तो :)

Answer 1

मैंने इसे कुछ समय पहले किया है और यह काम करता है।

आपको मिली समस्या यह है कि आप एक फ़ाइल यूआरएल बना रहे हैं, फिर यूआरएल पर नेविगेट करने का प्रयास कर रहे हैं। नेविगेशन विफल रहा है, पढ़ा नहीं है। यह सीएसपी के कारण असफल रहा है, और आप शायद स्वीकार्य सीएसपी पर रखे गए सुरक्षा प्रतिबंधों के कारण एक अलग सीएसपी के साथ इसे ओवरराइड करने में सक्षम नहीं होंगे।

लेकिन, आप फ़ाइल को पढ़ने और सामग्री का उपयोग करने में सक्षम होना चाहिए। ReadAsDataURL के बजाय आपको ReadAsText या ReadAsArrayBuffer का उपयोग करने के लिए उस नमूना कोड को बदलने की आवश्यकता है। अधिक जानकारी के लिए here देखें।

कृपया हमें बताएं कि आप कैसे चलते हैं!

Answer 2

कुछ संसाधनों मदद करने के लिए:

नई क्रोम पैकेज किए गए एप्लिकेशन codelab है कि हम कवर पर काम कर रहा है खींचें और ड्रॉप दोनों AngularJS और शुद्ध जावास्क्रिप्ट में।

AngularJS खींचें और ड्रॉप: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files

जावास्क्रिप्ट खींचें और ड्रॉप: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files

की पहली झलक किए गए दस्तावेज़ों की क्रोम के लिए AngularJS खींचें और ड्रॉप के लिए भी संस्करण नहीं है developer.chrome.com /trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls

हम दोनों नमूनों को कवर करने के लिए दस्तावेज़ों पर काम कर रहे हैं।

Answer 3

बस drop के लिए सुनना काम नहीं करेगा। आपको dragover की डिफ़ॉल्ट कार्यक्षमता को रोकना होगा।

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

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