Question
· Aug 12

Need help with file upload.csp

I am trying to use upload.csp as a template for choosing a CDV file to process. I am calling it from a zen page using this:
<button caption="Import Client Consultation Extract" 
       controlStyle="width:500px; height:100px; font-size:1.5em;"
         onclick="zenPage.importExtract();"/>

ClientMethod importExtract() [ Language = javascript ]
{
    // Open CSP popup to upload the CSV
    //alert('importExtract called.');
    zenPage.launchPopupWindow(zenLink('Upload.CSP'),'Upload Client Consultation extract',
                              'status,scrollbars,resizable,width=750,height=250');
}

I have increased the size of the text and buttons and I have added code to process the contents of the selected file into a global that will be processed further in the next step. The only problem is, I can't get the code to call back to the parent zen page and close the popup. I also wanted to add an "Exit" button so the user can close the popup without choosing a file if needed for some reason. What I have developed isn't working.

I am hoping someone would take some time to look this over and give me some solutions.

Here is the upload.csp as I have altered it.

<!-- Copyright (c) 2001 InterSystems Inc. ALL RIGHTS RESERVED. -->
<csp:class description="Upload Client Consultations file.">
<html> <head>
<H1>Upload Client Consultation extract file</H1>
</head> <body bgcolor="#CCCCFF"> <!-- HTML Form to submit the file. You must specify the enctype="multipart/form-data" -->
<!-- for this to work -->
<form enctype="multipart/form-data" method="post" action="upload.csp" style="font-size: 20px">
Choose Client Consultation file: <input type=file size=30 name=FileStream style="width: 500px; height: 40px; font-size:18px;">
<style="font-size: 20px;">
<ul>
  <input type="submit" value="Upload file" style="width: 100px; height: 40px; font-size: 18px;">
  <button onclick="exitPopup();" style="width: 100px; height: 40px; font-size: 18px;"> Exit </button>
</ul>
<p>
</form> <!-- As form is submitted to this page look to see if we have the stream in the %request object -->
<csp:if condition='($data(%request.MimeData("FileStream",1)))'>
<ul>
<script language="Cache" runat="server">
&js<alert('Choose file click');>
New bytes,lc
Set bytes=%request.MimeData("FileStream",1).Read()
Set bytes=##class(%CSP.Utils).DecodeData(bytes)
If $Data(^G2W.Import("UploadedCSV")) Kill ^G2W.Import("UploadedCSV")
For lc=1:1:$L(bytes,"_$c(13,10)_") {
Set D=$TR($Piece(bytes,"_$c(13,10)_",lc),$C(187,191,239))
Set ^G2W.Import("UploadedCSV",lc)=$ZCONVERT(D, "I", "HTML")
}
</script>
</ul>
</csp:if>
</body>
<script language = "JavaScript" >
 function exitPopup() {
alert('Made it to exitPopup');
opener.processImport();
window.close();
}
</script>
</html>
 

I do realize this is to choose a file on the client side (my laptop). This is what I want. The file will not be on the server (my desktop).

Thank you for your time.

Product version: Caché 2018.1
$ZV: Cache for Windows (x86-64) 2018.1.7 (Build 721) Fri Mar 18 2022 22:24:36 EDT
Discussion (1)2
Log in or sign up to continue

Due to limited practice in ZEN I transferred your example to straight CSP and JS

<html>
<head>
<title>Demo for David</title>
<script language="JavaScript" type="text/javascript">
function importExtract()
{
	var url='upload.csp' ;
	var options = 'popup,status=yes,scrollbars=yes,resizable=yes,width=750,height=250' ;
	newwindow=window.open(url,'UPLOAD',options);
    newwindow.focus();
	alert('back');
	}
</script>
</head>
<body>
<h3>Demo for David</h3>
<Input type="button" value="Import Client Consultation Extract"
         onclick="importExtract();"/>
</body>
</html>

in upload.csp I just added this BUTTON to the end ot the main form

	<button onclick="window.close()" style="width: 100px; height: 40px; font-size: 18px;"> Exit </button>
</form>