salesforceBen/Build a client side Data Loader app

## Build a client side Data Loader app
// Create a Visualforce page:
<apex:page controller="CSVParser" docType="html-5.0" lightningStylesheets="false" showHeader="false" sidebar="false" standardStylesheets="false">
    <head lang="en">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
        <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.js"/>
        <!--<apex:includeScript value="{!$Resource.papaparse2}"/>-->
        <link rel="stylesheet" href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https:maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
        <div class="main">
            <form class="form-inline">
                <div class="form-group">
                    <label for="files">Upload a CSV formatted file:</label>
                    <input type="file" id="files" class="form-control" />
                </div>
                <div class="form-group">
                    <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
            <div id="app"></div>
        </div>
    </head>
</apex:page>

// Create the Apex controller:
global class CSVParser
{

    @RemoteAction
    global static void insertAccounts(List<String> accountNames)
    {
        system.debug('The Account Names from the .csv are: ' + accountNames);

        List<Account> accounts = new List<Account>();
        Account account;

        for (String accountName : accountNames)
        {
            account = new Account();
            account.Name = accountName;
            accounts.add(account);
        }

        system.debug('The accounts to be inserted are: ' + accounts);

        if (accounts.size() > 0 && accounts.size() == accountNames.size())
        {
            try
            {
                insert accounts;
            }
            catch (Exception ex)
            {
                system.debug('There has been an error: ' + ex.getStackTraceString());
            }
        }
    }

}

// Create the static resource:
function sendAccountNames(cellData) {
    Visualforce.remoting.Manager.invokeAction(
        CSVParser.insertAccounts(cellData,
                                 function(result, event) {
                                     console.log('@@@ result is: ' + result);
                                     console.log('@@@ event is: ' + event);
                                 }));
}


var cellData = [];

function buildTable(results){
    var markup = "<table class='table'>";
    var data = results.data;

    for(i=0;i<data.length-1;i++){
        markup+= "<tr>";
        var row = data[i];
        var cells = row.join(",").split(",");

        console.log('The row is: ' + row);

        cellData.push(row);

        for(j=0;j<cells.length;j++){
            markup+= "<td>";
            console.log(cells[j]);
            markup+= cells[j];
            markup+= "</th>";
        }
        markup+= "</tr>";
    }

    markup+= "</table>";
    sendAccountNames(cellData);

    $("#app").html(markup);
}

$(document).ready(function(){
    $('#submit').on("click",function(e){
        e.preventDefault();
        if (!$('#files')[0].files.length){
            alert("Please choose at least one file to read the data.");
        }

        $('#files').parse({
            config: {
                delimiter: "auto",
                complete: buildTable,
            },
            before: function(file, inputElem)
            {
                console.log("Parsing file...", file);
            },
            error: function(err, file)
            {
                console.log("ERROR:", err, file);
            },
            complete: function()
            {
                console.log("Done with all files");
            }
        });
    });
});
	// Create a Visualforce page:
	<apex:page controller="CSVParser" docType="html-5.0" lightningStylesheets="false" showHeader="false" sidebar="false" standardStylesheets="false">
	<head lang="en">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
	<apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.js"/>
	<!--<apex:includeScript value="{!$Resource.papaparse2}"/>-->
	<link rel="stylesheet" href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="https:maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
	<div class="main">
	<form class="form-inline">
	<div class="form-group">
	<label for="files">Upload a CSV formatted file:</label>
	<input type="file" id="files" class="form-control" />
	</div>
	<div class="form-group">
	<button type="submit" id="submit" class="btn btn-primary">Submit</button>
	</div>
	</form>
	<div id="app"></div>
	</div>
	</head>
	</apex:page>

	// Create the Apex controller:
	global class CSVParser
	{

	@RemoteAction
	global static void insertAccounts(List<String> accountNames)
	{
	system.debug('The Account Names from the .csv are: ' + accountNames);

	List<Account> accounts = new List<Account>();
	Account account;

	for (String accountName : accountNames)
	{
	account = new Account();
	account.Name = accountName;
	accounts.add(account);
	}

	system.debug('The accounts to be inserted are: ' + accounts);

	if (accounts.size() > 0 && accounts.size() == accountNames.size())
	{
	try
	{
	insert accounts;
	}
	catch (Exception ex)
	{
	system.debug('There has been an error: ' + ex.getStackTraceString());
	}
	}
	}

	}

	// Create the static resource:
	function sendAccountNames(cellData) {
	Visualforce.remoting.Manager.invokeAction(
	CSVParser.insertAccounts(cellData,
	function(result, event) {
	console.log('@@@ result is: ' + result);
	console.log('@@@ event is: ' + event);
	}));
	}


	var cellData = [];

	function buildTable(results){
	var markup = "<table class='table'>";
	var data = results.data;

	for(i=0;i<data.length-1;i++){
	markup+= "<tr>";
	var row = data[i];
	var cells = row.join(",").split(",");

	console.log('The row is: ' + row);

	cellData.push(row);

	for(j=0;j<cells.length;j++){
	markup+= "<td>";
	console.log(cells[j]);
	markup+= cells[j];
	markup+= "</th>";
	}
	markup+= "</tr>";
	}

	markup+= "</table>";
	sendAccountNames(cellData);

	$("#app").html(markup);
	}

	$(document).ready(function(){
	$('#submit').on("click",function(e){
	e.preventDefault();
	if (!$('#files')[0].files.length){
	alert("Please choose at least one file to read the data.");
	}

	$('#files').parse({
	config: {
	delimiter: "auto",
	complete: buildTable,
	},
	before: function(file, inputElem)
	{
	console.log("Parsing file...", file);
	},
	error: function(err, file)
	{
	console.log("ERROR:", err, file);
	},
	complete: function()
	{
	console.log("Done with all files");
	}
	});
	});
	});