How do i make a button that takes a CSV file and uploads it to Frappe?

Learning
1

I have this button on list view, i want it to when i click import, it asks for a CSV file, processes it, and uploads the data to the Products doctype list. I’m currently stuck here:

frappe.listview_settings['Products'] = {
    refresh: function(listview) {
        listview.page.add_inner_button("Import", function() {
            var dialog = new frappe.ui.Dialog({
                title: "Upload CSV File",
                
                primary_action_label: "Upload",
                primary_action: function() {
                    input.click();
                }
            });

            dialog.show();

            var input = document.createElement('input');
            input.type = 'file';
            input.accept = '.csv';  

            input.onchange = function(event) {
                var file = event.target.files[0]; 

                if (file) {
                    uploadFileAndProcess(file);
                    dialog.hide(); 
                }
            
            
            };
        });
    }
};

function uploadFileAndProcess(file) {
    //stuck
}

How do I do this?

2

Why not make it a link to the data import tool and prefill the doctype.

3

because i’m trying to learn javascript bit by bit in frappe, if i just connected an existing function, i’m not sure if that would teach me anything.

4

There are plenty of other customizations you can perform without reinventing the wheel :wink: