JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<h1>Pre-warm your transformation</h1>
  <p>
	<div id="dvImportSegments" class="fileupload ">
            <fieldset>
                <legend>Select the CSV file to upload</legend>
                <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
            </fieldset>
    </div>
  </p>

JavaScript

// The event listener for the file upload
		document.getElementById('txtFileUpload').addEventListener('change', upload, false);
	
		// Method that checks that the browser supports the HTML5 File API
		function browserSupportFileUpload() {
			var isCompatible = false;
			if (window.File && window.FileReader && window.FileList && window.Blob) {
				isCompatible = true;
			}

			return isCompatible;
		};

		function upload(evt) {
			if (!browserSupportFileUpload()) {
				alert('The File APIs are not fully supported in this browser!');
			} else {
                var data = null;
				var file = evt.target.files[0];
				var reader = new FileReader();
				reader.readAsText(file);
                reader.onload = function(event) {
						var csvData = event.target.result; //alert(csvData);
                        var data2 = csvData.split("\n"); //alert(data2);
                        var i;
                        var myArray = [];
                        console.log('start');
                        for (i = 0; i < data2.length; ++i) {
                            // here's the data row separated by commas
                            myArray.push(data2[i]);
                            console.log(i+': '+data2[i]);
                            myUrl = [];
                            myUrl.push(data2[i][1]);
                            //console.log(data2[i][a]);
                            
                            console.log(myUrl.toString());
                           
                        }
                    GenerateTransformation(myArray);
                    if (data2 && data2.length > 0) {
							  alert('Imported -' + data2.length + '- rows successfully!');
						} else {
							alert('No data to import!');
						}
					};
					reader.onerror = function() {
						 alert('Unable to read ' + file.fileName);
					};
			};
		};
    
    function GenerateTransformation(url, callback)
	{
    var http = new XMLHttpRequest();
     for (i = 0; i < url.length; ++i)
...