I would like to allow a user to drag and drop a file onto span defined in data/dragdrop.xml . I managed to catch drop event but cannot make file upload. What do I have to do?

    <?xml version="1.0" encoding="UTF-8"?>
    <templates>
       <t t-name="mail.chatter.ChatComposer" t-extend="mail.chatter.ChatComposer">
           <t t-jquery=".o_composer_attachments_list" t-operation="before">
                <span class="o_chatter_composer_info" id="chatter_drop_target">
                    ~~~drag here~~~
                </span>
            </t>
        </t>
    </templates>

This is the code for module but it doesn't work. Where is my mistake in code? After drag and drop a file icon appears also in console I can see that file upload request status is 200. But the file icon is still showing "uploading" like the file didn't finish upload.

    odoo.define('dragdrop1.dragdrop', function(require) {
        "use strict";
        
    
        var core = require('web.core');
    
        var Composer = require('mail.composer');
    
        var MailThread = core.form_widget_registry.get('mail_thread');
    
        var ExtendedBasicComposer = Composer.BasicComposer.include({
            ondrop: function(event) {
                var form_upload = document.querySelector('form.o_form_binary_form');
    
                if (null === form_upload) {
                    return;
                }
    
                var form_data = new FormData(form_upload);
                var e = event.originalEvent;
                for (var iterator = 0, file; file = e.dataTransfer.files[iterator]; iterator++) {
                    if (file.name !== '') {
                        var filename = file.name.replace(/.*[\\\/]/,'');
                        // if the files exits for this answer, delete the file before upload
                        var attachments = [];
                        for (var i in this.get('attachment_ids')) {
                            if ((this.get('attachment_ids')[i].filename || this.get('attachment_ids')[i].name) === filename) {
                                if (this.get('attachment_ids')[i].upload) {
                                    //return false;
                                }
                                this.AttachmentDataSet.unlink([this.get('attachment_ids')[i].id]);
                            } else {
                                attachments.push(this.get('attachment_ids')[i]);
                            }
                        }
                        var form_data = new FormData(this.$('form.o_form_binary_form'));
                        form_data.set('ufile', file);
                        // submit filename
                        this.$('form.o_form_binary_form').submit();
                        this.$attachment_button.prop('disabled', true);
            
                        attachments.push({
                            'id': 0,
                            'name': filename,
                            'filename': filename,
                            'url': '',
                            'upload': true,
                            'mimetype': '',
                        });
                        this.set('attachment_ids', attachments);
                    }
                }
            },    
        });
    
        var NewChatterX = MailThread.include({
            on_open_composer_log_note: function(){
                this._super.apply(this, arguments);
                var self = this;
                var c = self.composer;
                var main = document.querySelector('body'); 
                $(document).on('drop', '#chatter_drop_target', function(event){
                    event.stopPropagation();
                    event.preventDefault();
                    c.ondrop(event);
                });
                $(document).on('dragenter', '#chatter_drop_target', function(event){
                    event.preventDefault();
                });
                $(document).on('dragover', '#chatter_drop_target', function(event){
                    event.stopPropagation();
                    event.preventDefault();
                });
                $(document).on('dragleave', '#chatter_drop_target', function(event){
                    event.preventDefault();
                });
            },
        });
        
    });

Any help appreciated, Thank you.