html5 ड्रैग और ड्रॉप फ़ाइलें - पूरे फॉर्म को सबमिट होने पर अपलोड करें

Question

क्या फ़ॉर्म भरने में "ड्रैग और ड्रॉप" फ़ाइलों को शामिल करना संभव है? असीमित रूप से अपलोड करने के लिए बहुत सारे विकल्प हैं।

क्या फ़ाइल डेटा को कैप्चर करना और इसे फॉर्म फ़ील्ड में शामिल करना संभव है?

मैं अपने सर्वर के रूप में रेल का उपयोग कर रहा है ताकि आदर्श छवि के लिए डेटा की तरह एक फार्म के लिए फिट हैं इस प्रकार है:

<form multipart='multipart' > 
    <select name='files[type_id]'> 
    ... 
    ... 
    </select> 
    <!-- FILE DATA ? --> 
    <div id="file_drop_spot"> 

    </div> 

</form> 

Answer 1

मैं इस पर इस मुद्दे को मिला: drag drop files into standard html file input

मुझे नहीं पता मानना ​​है कि यह संभव है, लेकिन आप प्रभाव प्राप्त कर सकते हैं। जब आप फॉर्म जमा करते हैं, तो इसके डिफ़ॉल्ट व्यवहार को रोकें और फ़ाइल को AJAX के साथ अपलोड करना प्रारंभ करें। जब फ़ाइल अपलोड पूर्ण हो जाता है तो आप फॉर्म को फिर से इंगित करते हैं और इसे अपने डिफ़ॉल्ट व्यवहार को रोकने के बिना सबमिट करते हैं।

कुछ की तरह:

<form id="form"> 
    <input type="text" name="someText"></input> 
    <input id="submitButton" type="submit" onclick="uploadFile()"></input> 
</form> 

और फिर जावास्क्रिप्ट:

function uploadFile() { 

    document.getElementById("submitButton").disabled = true; 
    // Some ajax code to upload the file and then on the success: 
    success: function() { 

     document.getElementById("form").submit(); 

    } 
    return false; // Prevent the form from submitting 

}