Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="//pulipulichen.github.io/blogger/posts/2016/12/semantic/semantic.min.css">
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<script src="//pulipulichen.github.io/blogger/posts/2016/12/semantic/semantic.min.js"></script>

<!-- ------------------------------------ -->

<form class="file-process-framework ui form">

  <div class="ui two column doubling grid">
    <div class="column">
	<div class="ui segment">
	
    
<h1 class="ui horizontal divider header">
  Input
</h1>

    <div class="ui top attached tabular menu">
      <div class="active item" data-tab="textarea">Textarea</div>
      <div class="item" data-tab="file">File</div>
    </div>

<!-- --------------------------------- -->

<div class="ui bottom attached active tab segment" data-tab="textarea">
  <div class="field">
    <label for="input_mode_textarea">Paste text here: </label>
    <textarea class="input-mode textarea" id="input_mode_textarea" onfocus="this.select()">Sales by Region	Europe	Asia	North America
Qtr 1	21704714	8774099	12094215
Qtr 2	17987034	12214447	10873099
Qtr 3	19485029	14356879	15689543
Qtr 4	22567894	15763492	17456723</textarea>
  </div>
  <!--
  <div class="field">
      <button type="button" class="ui primary button process-textarea">Submit</button>
  </div>
  -->
    
</div>

<!-- --------------------------------- -->

<div class="ui bottom attached tab segment" data-tab="file">
  <div class="field">
      <label for="files">Please select a TXT file in UTF8 encoding: </label>
    </div>
    <div class="field">
      <input class="myfile" name="files[]" id="files" multiple="" type="file" />
      <div class="ui pointing inverted blue large basic label">
        <a href="http://blog.pulipuli.info/2016/12/utf-8notepad-how-to-convert-plain-text.html" target="notepad" style="display: block">How to Convert TXT file to UTF8 encoding?</a>
      </div>
    </div>

  
  <div class="inline field">
    <input type="checkbox" name="autodownload" id="autodownload" />
    <label for="autodownload">Download Processed File Automatically</label>
  </div>


</div> <!-- <div class="ui bottom attached tab segment" data-tab="file"> -->
<div class="inline fields">
	<div class="field">
	  <input type="radio" name="sep" id="sep_tab" value="tab" checked="checked" />
	  <label for="sep_tab">Tab</label>
	</div>
	<div class="field">
	  <input type="radio" name="sep" id="sep_comma" value="," />
	  <label for="sep_comma">, Comma</label>
	</div>
	<div class="field">
	  <input type="radio" name="sep" id="sep_semi" value=";" />
	  <label for="sep_semi">; Semicolon</label>
	</div>
</div> <!-- <div class="inline fields"> -->
  

    <!-- -------------------------------------- -->
    
  <div class="field">
    <div class="loading hide"><img src="//dl.dropboxusercontent.com/u/717137/2016/loading.gif" /></div>
  </div> <!-- <div class="field"> -->
  
		</div> <!-- <div class="ui segment"> -->
	</div> <!-- <div class="column"> -->
  <!-- -------------------------------------- -->
  
    <div class="column">
  <div class="ui segment display-result" style="">
  <!-- <div class="display-result"> -->
  
    <h2 class="ui horizontal divider header">
      Result
    </h2>
    <div class="field">
      <button type="button" class="fluid ui large right labeled icon green button download-file">
        <i class="right download icon"></i>
        DOWNLOAD
      </button>
    </div>

    <div class="field">
      <label for="filename">File Name: </label>
      <input type="text" onfocus="this.select()" id="filename" class="filename" style="width: calc(100% - 15em)" />
    </div>
    
    <div class="field">
      <label for="preview">
        Result Preview: 
        <div class="ui  pointing below  medium blue basic label encoding" style="margin-left: 1em">
          Get error encoding text? <a href="http://blog.pulipuli.info/2016/12/utf-8notepad-how-to-convert-plain-text.html" target="notepad" >Try to Convert TXT file to UTF8 encoding?</a>
        </div>
      </label>
        
      <textarea id="preview" class="preview" onfocus="this.select();"></textarea>
    </div>
  
  </div>
    </div> <!-- <div class="column"> -->
  </div> <!-- <div class="ui two column doubling grid"> -->
</form>
            
          
!
            
              body {
  padding: 1em !important; 
}
.file-process-framework .loading.hide {
  display:none;
}

.file-process-framework label,
.file-process-framework .download-file {
  display: block;
}

.file-process-framework .input-mode label {
  display: inline;
}

/*
.file-process-framework .download-file {
  font-size: 2em;
  width: 90%;
}
*/

.file-process-framework textarea.preview {
  display: block;
  width: 90%;
  height: calc(100vh - 200px);
}

            
          
!
            
              var _process_file = function(_input, _callback) {
    
    var _sep = $('[name="sep"]:checked').val();
  if (_sep === "tab") {
    _sep = "\t";
  }
  
  // -----------------------------
  var _lines = _input.split("\n");
  var _rows = [];
  for (var _l = 0; _l < _lines.length; _l++) {
    var _cells = _lines[_l].split(_sep);
    for (var _c = 0; _c < _cells.length; _c++) {
      var _cell = _cells[_c];
      
      if (typeof(_rows[_c]) === "undefined") {
        _rows[_c] = _cell;
      }
      else {
        _rows[_c] = _rows[_c] + _sep + _cell;
      }
    } //for (var _c = 0; _c < _cells.length; _c++) {
  } //for (var _l = 0; _l < _lines.length; _l++) {
  
  var _result = _rows.join("\n");
    
    //console.log(_input);
    //setTimeout(function () {
        if (typeof(_callback) === "function") {
            _callback(_result);
        }
    //}, 1000);
        
};

var _output_filename_surffix="_output";


// -------------------------------------

var _load_file = function(evt) {
    //console.log(1);
    if(!window.FileReader) return; // Browser is not compatible

    var _panel = $(".file-process-framework");
    
    _panel.find(".loading").removeClass("hide");

    var reader = new FileReader();
    var _result;

    var _file_name = evt.target.files[0].name;
    
    reader.onload = function(evt) {
        if(evt.target.readyState != 2) return;
        if(evt.target.error) {
            alert('Error while reading file');
            return;
        }

        //filecontent = evt.target.result;

        //document.forms['myform'].elements['text'].value = evt.target.result;
        _result =  evt.target.result;

        _process_file(_result, function (_result) {
            _panel.find(".preview").val(_result);
            _panel.find(".filename").val(_file_name);
                        
            $(".file-process-framework .myfile").val("");
            $(".file-process-framework .loading").addClass("hide");
            _panel.find(".display-result").show();
            _panel.find(".display-result .encoding").show();

            var _auto_download = (_panel.find('[name="autodownload"]:checked').length === 1);
            if (_auto_download === true) {
                _panel.find(".download-file").click();
            }
            
            //_download_file(_result, _file_name, "txt");
        })
    };

    var _pos = _file_name.lastIndexOf(".");
    _file_name = _file_name.substr(0, _pos)
        + _output_filename_surffix
        + _file_name.substring(_pos, _file_name.length);

    //console.log(_file_name);

    reader.readAsText(evt.target.files[0]);
};

var _load_textarea = function(evt) {
    var _panel = $(".file-process-framework");
    
    // --------------------------

    var _result = _panel.find(".input-mode.textarea").val();
    if (_result.trim() === "") {
        return;
    }

    // ---------------------------
    
    _panel.find(".loading").removeClass("hide");

    // ---------------------------
    var d = new Date();
    var utc = d.getTime() - (d.getTimezoneOffset() * 60000);
  
    var local = new Date(utc);
    var _file_name = local.toJSON().slice(0,19).replace(/:/g, "-");
    _file_name = "output_" + _file_name + ".txt";

    // ---------------------------

    _process_file(_result, function (_result) {
        _panel.find(".preview").val(_result);
        _panel.find(".filename").val(_file_name);

        _panel.find(".loading").addClass("hide");
        _panel.find(".display-result").show();
        _panel.find(".display-result .encoding").hide();

        var _auto_download = (_panel.find('[name="autodownload"]:checked').length === 1);
        if (_auto_download === true) {
            _panel.find(".download-file").click();
        }
    });
};

var _download_file_button = function () {
    var _panel = $(".file-process-framework");
    
    var _file_name = _panel.find(".filename").val();
    var _data = _panel.find(".preview").val();
    
    _download_file(_data, _file_name, "txt");
};


var _download_file = function (data, filename, type) {
    var a = document.createElement("a"),
        file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }

}

$(function () {
  var _panel = $(".file-process-framework");
  _panel.find(".input-mode.textarea").click(_load_textarea).keyup(_load_textarea).click();
  _panel.find(".myfile").change(_load_file);
  _panel.find(".download-file").click(_download_file_button);
  
  $('.menu .item').tab();
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console