View source for ACP2 File Upload

ACP2 is an alternate version of the Analytica Cloud Platform that works through Cubeplan to integrate dashboard features not currently found in Analytica. One such feature is the seamless integration of interactive mapping via Leaflet, a popular Javascript library for maps.

For more information on the Analytica Cloud Platform, check out [[Analytica Cloud Platform]].

== Overview ==

File uploads in ACP2 are manual and handled on the '''File Manager''' by default. To enable file uploads directly from a dashboard with a button, do the following:


1. Edit the dashboard you wish to include the file upload button.
:[[File:Cubeplan_Edit_Dashboard.png]]


2. Select the '''Text editor''' icon
:[[File:Cubeplan_Text_Editor.png]]

3. Right-click inside the panel and select '''View html'''
:[[File:Cubeplan_View_Html.png]]

4. Paste in the following code and confirm your changes:
<pre>
<input type="file" id="uploader_in_dash" style="display:none">
<button class="btn btn-gray btn_uploader_indash" style="width: 100px;">Upload</button>
<span class="btn_uploader_indash_result"></span>
<div class="progress progress-striped active uploader_progress_wrapper nodisplay" style="width: 100px; height: 10px; display: none;">
  <div class="progress-bar uploader_progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100px;">
  </div>
</div>

<script>
jQuery(document).ready(function() {
  jQuery(".btn_uploader_indash").off("click")
  jQuery(".btn_uploader_indash").on("click",function(){
    var $el = jQuery("#uploader_in_dash")
    $el.trigger("click")
  })

  jQuery("#uploader_in_dash").off("change")
  jQuery("#uploader_in_dash").on("change", function () {
    var files = this.files;
    var url = `${__baseUrl}scripts/uploader.ashx`;
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          jQuery(".uploader_progress_wrapper").hide()
          jQuery(".btn_uploader_indash_result").text(`The file ${files[0].name} has been uploaded`)
          jQuery(".btn_uploader_indash").removeAttr("disabled")
        }
    };
    xhr.upload.addEventListener("progress", function(e) {
      if (e.lengthComputable) {
        var percentage = Math.round((e.loaded * 100) / e.total);
        jQuery(".uploader_progress").width(percentage)
        if (percentage>=100){
          jQuery(".uploader_progress_wrapper").hide()
        }
      }
    });
   

    fd.append("file", files[0]);
    fd.append("targetPath", __currentSession.modelInfo.uri.substr(0,__currentSession.modelInfo.uri.lastIndexOf("\\")));
    fd.append("chunk", 0);
    fd.append("chunks", 1);
    fd.append("name", files[0].name);
    //fd.append("name", 'force_your_name.csv');
   
    xhr.send(fd);
    jQuery(".uploader_progress").width(1)
    jQuery(".uploader_progress_wrapper").show()
    jQuery(".btn_uploader_indash_result").text("Uploading...")
    jQuery(".btn_uploader_indash").attr("disabled","disabled")
  })
})

</script>
</pre>


'''Note:''' If you attempt to save a file that already exists in the directory, the existing file will have a timestamp appended onto the end of it so the new file can have its exact name. This also means that the easiest solution if you wanted your model to use the uploaded file is to keep a consistent name.