0
1798
Question GUILHERME CRUZ DA CUNHA · Nov 9, 2017

Load stream file into a form with submit without reloading the page

#Caché

Hello guys,
I'm having a problem on a sign-up screen, what happens is that this screen is not reloaded after clicking save, and that's where the problem arises, on that screen it is possible to upload images, but as everything is loaded withsubmit, the record would have to be updated so I had all the information, which does not happen.
With this I'm trying to find a way to get the information from the file loaded in the "file" component to get the data in "% request.MimeData".
The only way I've found it so far has been to reload the whole page, but that's all I do not want to do.
This page has two forms.

Here's a trick of the code.

<form style="text-align:left" name="form2" enctype="multipart/form-data" method="post" action="../lists/ss311.csp?OBJID=#(OBJID)#&edita=#(%request.Get("edita"))#" target="listaimagem">
            <input name="txtimg" type="file" size="10" maxlength="200" id="txtimg">
            <input name="addImagem" id="addImagem" type="submit" value="Adicionar" class="botaoconfirmar">
            &nbsp;&nbsp;
            <span id="aguarde" name="aguarde" style="position:absolute"></span>
        </form>

Discussion (3)0
Log in or sign up to continue

Comments

Vitaliy Serdtsev · Nov 10, 2017 
  1. <html>
<body>
<script language="cache" runat="server">
 if %request.ContentType="multipart/form-data" {
  s stream=%request.MimeData("oFile1",1)
  s file=##class(%Stream.FileBinary).%New()
  s file.Filename="c:\InterSystems\"_##class(%File).GetFilename(stream.FileName)
  d file.CopyFromAndSave(stream)
 }
</script>
<br>
<FORM NAME="oForm" ENCTYPE="multipart/form-data" METHOD="post">
<INPUT TYPE="file" NAME="oFile1"/>
<INPUT TYPE="submit" VALUE="Upload File">
</FORM>
</body>
</html>
  2. <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no"/>

        <</FONT><FONT COLOR="#ff0000">title</FONT><FONT COLOR="#000000">>Uploading a file from the client to the server without reloading the page</</FONT><FONT COLOR="#ff0000">title</FONT><FONT COLOR="#000000">>
        <</FONT><FONT COLOR="#ff0000">script </FONT><FONT COLOR="#000080">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"text/javascript" </FONT><FONT COLOR="#000080">src</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"jquery.min.js"</FONT><FONT COLOR="#000000">></</FONT><FONT COLOR="#ff0000">script</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#ff0000">script </FONT><FONT COLOR="#000080">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"text/javascript" </FONT><FONT COLOR="#000080">src</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"js/vendor/jquery.ui.widget.js"</FONT><FONT COLOR="#000000">></</FONT><FONT COLOR="#ff0000">script</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#ff0000">script </FONT><FONT COLOR="#000080">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"text/javascript" </FONT><FONT COLOR="#000080">src</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"js/jquery.iframe-transport.js"</FONT><FONT COLOR="#000000">></</FONT><FONT COLOR="#ff0000">script</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#ff0000">script </FONT><FONT COLOR="#000080">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"text/javascript" </FONT><FONT COLOR="#000080">src</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"js/jquery.fileupload.js"</FONT><FONT COLOR="#000000">></</FONT><FONT COLOR="#ff0000">script</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#ff0000">script </FONT><FONT COLOR="#000080">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"text/javascript"</FONT><FONT COLOR="#000000">>
    $(</FONT><FONT COLOR="#008080">function</FONT><FONT COLOR="#000000">(){
      $(</FONT><FONT COLOR="#800000">'#fileupload'</FONT><FONT COLOR="#000000">).fileupload();
    });
    
  </</FONT><FONT COLOR="#ff0000">script</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#ff0000">script </FONT><FONT COLOR="#000080">language</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"cache" </FONT><FONT COLOR="#000080">runat</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"server"</FONT><FONT COLOR="#000000">>
      </FONT><FONT COLOR="#0000ff">if </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">%request</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">IsDefinedMimeData</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"files[]"</FONT><FONT COLOR="#000000">,1) ) </FONT><FONT COLOR="#800080">{
        
        </FONT><FONT COLOR="#0000ff">s </FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800000">%request</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">GetMimeData</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"files[]"</FONT><FONT COLOR="#000000">)
        
        </FONT><FONT COLOR="#0000ff">s </FONT><FONT COLOR="#800000">file</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#000080">##class</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008080">%Stream.FileBinary</FONT><FONT COLOR="#000000">).</FONT><FONT COLOR="#0000ff">%New</FONT><FONT COLOR="#000000">()
        </FONT><FONT COLOR="#0000ff">s </FONT><FONT COLOR="#800000">file</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Filename</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"c:\InterSystems&quot;</FONT><FONT COLOR="#000000">_</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">FileName
        d </FONT><FONT COLOR="#800000">file</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">CopyFromAndSave</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">)
      </FONT><FONT COLOR="#800080">}
        </FONT><FONT COLOR="#000000"></</FONT><FONT COLOR="#ff0000">script</FONT><FONT COLOR="#000000">>
  </</FONT><FONT COLOR="#ff0000">head</FONT><FONT COLOR="#000000">>
      <</FONT><FONT COLOR="#ff0000">body</FONT><FONT COLOR="#000000">>
    #(</FONT><FONT COLOR="#0000ff">$H</FONT><FONT COLOR="#000000">)#<</FONT><FONT COLOR="#ff0000">input </FONT><FONT COLOR="#000080">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"fileupload" </FONT><FONT COLOR="#000080">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"file" </FONT><FONT COLOR="#000080">name</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"files[]" </FONT><FONT COLOR="#000080">data-url</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"</FONT><FONT COLOR="#000000">#(</FONT><FONT COLOR="#800000">%request</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">PageName</FONT><FONT COLOR="#000000">)#</FONT><FONT COLOR="#800080">" </FONT><FONT COLOR="#000080">multiple data-sequential-uploads</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800080">"false"</FONT><FONT COLOR="#000000">>
  </</FONT><FONT COLOR="#ff0000">body</FONT><FONT COLOR="#000000">>
</</FONT><FONT COLOR="#ff0000">html</FONT><FONT COLOR="#000000">></FONT>
  3. <FONT COLOR="#000080">Class dc.fileuploadajax Extends %ZEN.Component.page
</FONT><FONT COLOR="#000000">{

    </FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Contents [ </FONT><FONT COLOR="#000080">XMLNamespace </FONT><FONT COLOR="#000000">= </FONT><FONT COLOR="#800080">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#000000">]
{
<</FONT><FONT COLOR="#000080">page </FONT><FONT COLOR="#800000">xmlns</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#800000">title</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Uploading a file from the client to the server without reloading the page"</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">group </FONT><FONT COLOR="#800000">labelPosition</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"left"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">text </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Current date/time on the server:" </FONT><FONT COLOR="#800000">value</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"#(%this.%Eval($ZDT($H)))#"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">group</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">form </FONT><FONT COLOR="#800000">enctype</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"multipart/form-data" </FONT><FONT COLOR="#800000">target</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"upload_target" </FONT><FONT COLOR="#800000">labelPosition</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"left"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">text </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Name:" </FONT><FONT COLOR="#800000">name</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"proc"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">fileUpload </FONT><FONT COLOR="#800000">name</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"file" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Select a file:"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">submit </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Upload"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">iframe </FONT><FONT COLOR="#800000">name</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"upload_target" </FONT><FONT COLOR="#800000">hidden</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"true"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">form</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">fieldSet </FONT><FONT COLOR="#800000">legend</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Information about a previously uploaded file" </FONT><FONT COLOR="#800000">labelPosition</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"left"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">text </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"proc" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Name"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">text </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileSize" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"File size"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">text </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileName" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"File name"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Refresh" </FONT><FONT COLOR="#800000">onclick</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.GetFileInfo();"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">fieldSet</FONT><FONT COLOR="#000000">>
</</FONT><FONT COLOR="#000080">page</FONT><FONT COLOR="#000000">>
}
    </FONT><FONT COLOR="#000080">ClassMethod </FONT><FONT COLOR="#000000">%OnSubmit(</FONT><FONT COLOR="#ff00ff">pSubmit </FONT><FONT COLOR="#000080">As %ZEN.Submit</FONT><FONT COLOR="#000000">) </FONT><FONT COLOR="#000080">As %Status
</FONT><FONT COLOR="#000000">{
  </FONT><FONT COLOR="#0000ff">#dim </FONT><FONT COLOR="#800000">%session </FONT><FONT COLOR="#0000ff">As </FONT><FONT COLOR="#008080">%CSP.Session
  </FONT><FONT COLOR="#0000ff">#dim </FONT><FONT COLOR="#800000">stream </FONT><FONT COLOR="#0000ff">As </FONT><FONT COLOR="#008080">%CSP.BinaryStream</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800000">pSubmit</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">%GetStream</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"file"</FONT><FONT COLOR="#000000">)
      </FONT><FONT COLOR="#0000ff">if $IsObject</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">) </FONT><FONT COLOR="#800080">{
    </FONT><FONT COLOR="#0000ff">set </FONT><FONT COLOR="#800000">%session</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Data</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"fileSize"</FONT><FONT COLOR="#000000">)=</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Size
    set </FONT><FONT COLOR="#800000">%session</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Data</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"fileName"</FONT><FONT COLOR="#000000">)=</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">FileName
  </FONT><FONT COLOR="#800080">}
  </FONT><FONT COLOR="#0000ff">set </FONT><FONT COLOR="#800000">%session</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Data</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"proc"</FONT><FONT COLOR="#000000">)=</FONT><FONT COLOR="#800000">pSubmit</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">%GetValue</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"proc"</FONT><FONT COLOR="#000000">)
  </FONT><FONT COLOR="#0000ff">quit $$$OK
</FONT><FONT COLOR="#000000">}
    </FONT><FONT COLOR="#000080">ClassMethod </FONT><FONT COLOR="#000000">GetFileInfo() [ </FONT><FONT COLOR="#000080">ZenMethod </FONT><FONT COLOR="#000000">]
{
  </FONT><FONT COLOR="#800080">&js<
  </FONT><FONT COLOR="#000000">zenSetProp(</FONT><FONT COLOR="#800000">'proc'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'value'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">#(</FONT><FONT COLOR="#000000">..</FONT><FONT COLOR="#0000ff">QuoteJS</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">%session</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Data</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"proc"</FONT><FONT COLOR="#000000">))</FONT><FONT COLOR="#800000">)#</FONT><FONT COLOR="#000000">);
  zenSetProp(</FONT><FONT COLOR="#800000">'fileSize'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'value'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">#(</FONT><FONT COLOR="#000000">..</FONT><FONT COLOR="#0000ff">QuoteJS</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">%session</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Data</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"fileSize"</FONT><FONT COLOR="#000000">))</FONT><FONT COLOR="#800000">)#</FONT><FONT COLOR="#000000">);
  zenSetProp(</FONT><FONT COLOR="#800000">'fileName'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'value'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">#(</FONT><FONT COLOR="#000000">..</FONT><FONT COLOR="#0000ff">QuoteJS</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">%session</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">Data</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"fileName"</FONT><FONT COLOR="#000000">))</FONT><FONT COLOR="#800000">)#</FONT><FONT COLOR="#000000">);
  </FONT><FONT COLOR="#800080">>
</FONT><FONT COLOR="#000000">}
}</FONT>
If you want, I can give ZEN-examples of asynchronous uploading of immediately several files using the File API, but this will only work in new browsers.
0
Vitaliy Serdtsev  Nov 14, 2017 to Marco Blom
  1. Asynchronous uploading only one file
    Class upload.fileOne Extends %ZEN.Component.page
{

    </FONT><FONT COLOR="#000080">Parameter </FONT><FONT COLOR="#000000">DOMAIN = </FONT><FONT COLOR="#800080">"DC"</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Style
{
  <</FONT><FONT COLOR="#000080">style </FONT><FONT COLOR="#800000">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"text/css"</FONT><FONT COLOR="#000000">>
  </</FONT><FONT COLOR="#000080">style</FONT><FONT COLOR="#000000">>
}
    </FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Contents [ </FONT><FONT COLOR="#000080">XMLNamespace </FONT><FONT COLOR="#000000">= </FONT><FONT COLOR="#800080">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#000000">]
{
<</FONT><FONT COLOR="#000080">page </FONT><FONT COLOR="#800000">xmlns</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#800000">title</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Upload file using XMLHttpRequest" </FONT><FONT COLOR="#800000">labelPosition</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"left"</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">hgroup </FONT><FONT COLOR="#800000">cellVAlign</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"bottom"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">fileUpload </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Select the file" </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileToUpload" </FONT><FONT COLOR="#800000">onchange</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.fileSelected()"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Upload" </FONT><FONT COLOR="#800000">onclick</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.uploadFile();"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">hgroup</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">label </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileType" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Type: "</FONT><FONT COLOR="#000000">/>
  <</FONT><FONT COLOR="#000080">label </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileName" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Name: "</FONT><FONT COLOR="#000000">/>
  <</FONT><FONT COLOR="#000080">label </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileSize" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Size: "</FONT><FONT COLOR="#000000">/>
  <</FONT><FONT COLOR="#000080">html</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">div </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"progressNumber"</FONT><FONT COLOR="#000000">>%</</FONT><FONT COLOR="#000080">div</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">progress </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"progressValue" </FONT><FONT COLOR="#800000">value</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"0" </FONT><FONT COLOR="#800000">max</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"100.0"</FONT><FONT COLOR="#000000">></</FONT><FONT COLOR="#000080">progress</FONT><FONT COLOR="#000000">>
  </</FONT><FONT COLOR="#000080">html</FONT><FONT COLOR="#000000">>
</</FONT><FONT COLOR="#000080">page</FONT><FONT COLOR="#000000">>
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">uploadFile() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">fd </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">FormData();
  fd.append(</FONT><FONT COLOR="#800000">'fUpload'</FONT><FONT COLOR="#000000">, zen(</FONT><FONT COLOR="#800000">'fileToUpload'</FONT><FONT COLOR="#000000">).findElement(</FONT><FONT COLOR="#800000">'control'</FONT><FONT COLOR="#000000">).files[</FONT><FONT COLOR="#000080">0</FONT><FONT COLOR="#000000">]);
  </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">xhr </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">XMLHttpRequest();
  xhr.upload.addEventListener(</FONT><FONT COLOR="#800000">'progress'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.uploadProgress, false);
  xhr.addEventListener(</FONT><FONT COLOR="#800000">'load'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.uploadComplete, false);
  xhr.addEventListener(</FONT><FONT COLOR="#800000">'error'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.uploadFailed, false);
  xhr.addEventListener(</FONT><FONT COLOR="#800000">'abort'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.uploadCanceled, false);
  xhr.open(</FONT><FONT COLOR="#800000">'POST'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">'upload.fileOne.cls'</FONT><FONT COLOR="#000000">);
  xhr.send(fd);
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">uploadProgress(</FONT><FONT COLOR="#ff00ff">evt</FONT><FONT COLOR="#000000">) [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  </FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(evt.lengthComputable) {
    </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">percentComplete </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">Math.round(evt.loaded </FONT><FONT COLOR="#000080">* 100 / </FONT><FONT COLOR="#000000">evt.total);
        document.getElementById(</FONT><FONT COLOR="#800000">'progressNumber'</FONT><FONT COLOR="#000000">).innerHTML </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">percentComplete.toString() </FONT><FONT COLOR="#000080">+ </FONT><FONT COLOR="#800000">'%'</FONT><FONT COLOR="#000000">;
    document.getElementById(</FONT><FONT COLOR="#800000">'progressValue'</FONT><FONT COLOR="#000000">).value </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">percentComplete;
  }
  </FONT><FONT COLOR="#008000">else </FONT><FONT COLOR="#000000">{
    document.getElementById(</FONT><FONT COLOR="#800000">'progressNumber'</FONT><FONT COLOR="#000000">).innerHTML </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">$$$Text(</FONT><FONT COLOR="#800000">'Cannot compute'</FONT><FONT COLOR="#000000">);
  }
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">uploadComplete(</FONT><FONT COLOR="#ff00ff">evt</FONT><FONT COLOR="#000000">) [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  zenAlert($$$Text(</FONT><FONT COLOR="#800000">'The upload is complete.'</FONT><FONT COLOR="#000000">));
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">uploadFailed(</FONT><FONT COLOR="#ff00ff">evt</FONT><FONT COLOR="#000000">) [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  zenAlert($$$Text(</FONT><FONT COLOR="#800000">'An error occurred when trying to upload the file.'</FONT><FONT COLOR="#000000">));
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">uploadCanceled(</FONT><FONT COLOR="#ff00ff">evt</FONT><FONT COLOR="#000000">) [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  zenAlert($$$Text(</FONT><FONT COLOR="#800000">'The upload was canceled by the user or the browser dropped the connection.'</FONT><FONT COLOR="#000000">));
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">fileSelected() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">file </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">zen(</FONT><FONT COLOR="#800000">'fileToUpload'</FONT><FONT COLOR="#000000">).findElement(</FONT><FONT COLOR="#800000">'control'</FONT><FONT COLOR="#000000">).files[</FONT><FONT COLOR="#000080">0</FONT><FONT COLOR="#000000">];
  </FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(file) {
        </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">fileSize </FONT><FONT COLOR="#000080">= 0</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(file.size </FONT><FONT COLOR="#000080">> 1024  1024</FONT><FONT COLOR="#000000">)
       fileSize </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">(Math.round(file.size </FONT><FONT COLOR="#000080"> 100 / </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#000080">1024  1024</FONT><FONT COLOR="#000000">)) </FONT><FONT COLOR="#000080">/ 100</FONT><FONT COLOR="#000000">).toString() </FONT><FONT COLOR="#000080">+ </FONT><FONT COLOR="#000000">$$$Text(</FONT><FONT COLOR="#800000">'MB'</FONT><FONT COLOR="#000000">);
    </FONT><FONT COLOR="#008000">else
       </FONT><FONT COLOR="#000000">fileSize </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">(Math.round(file.size </FONT><FONT COLOR="#000080"> 100 / 1024</FONT><FONT COLOR="#000000">) </FONT><FONT COLOR="#000080">/ 100</FONT><FONT COLOR="#000000">).toString() </FONT><FONT COLOR="#000080">+ </FONT><FONT COLOR="#000000">$$$Text(</FONT><FONT COLOR="#800000">'KB'</FONT><FONT COLOR="#000000">);
        zenSetProp(</FONT><FONT COLOR="#800000">'fileType'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'value'</FONT><FONT COLOR="#000000">,file.type);
    zenSetProp(</FONT><FONT COLOR="#800000">'fileName'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'value'</FONT><FONT COLOR="#000000">,file.name);
    zenSetProp(</FONT><FONT COLOR="#800000">'fileSize'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'value'</FONT><FONT COLOR="#000000">,fileSize);
     
  }
}
    </FONT><FONT COLOR="#000080">ClassMethod </FONT><FONT COLOR="#000000">%OnPreHTTP() </FONT><FONT COLOR="#000080">As %Boolean </FONT><FONT COLOR="#000000">[ </FONT><FONT COLOR="#000080">ServerOnly </FONT><FONT COLOR="#000000">= 1 ]
{
  </FONT><FONT COLOR="#0000ff">#dim </FONT><FONT COLOR="#800000">%request </FONT><FONT COLOR="#0000ff">As </FONT><FONT COLOR="#008080">%CSP.Request
  </FONT><FONT COLOR="#0000ff">#dim </FONT><FONT COLOR="#800000">stream </FONT><FONT COLOR="#0000ff">As </FONT><FONT COLOR="#008080">%CSP.BinaryStream</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800000">%request</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">GetMimeData</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"fUpload"</FONT><FONT COLOR="#000000">)
  </FONT><FONT COLOR="#0000ff">if $IsObject</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">) </FONT><FONT COLOR="#800080">{
    
    </FONT><FONT COLOR="#008000">#; here you do with the received file useful work
    
    /*
    set ^tmp("filename")=stream.FileName
    set ^tmp("filesize")=stream.Size
    */
    
    </FONT><FONT COLOR="#0000ff">quit $$$NO
  </FONT><FONT COLOR="#800080">}
  </FONT><FONT COLOR="#0000ff">quit $$$YES
</FONT><FONT COLOR="#000000">}
    }</FONT>
  2. Asynchronous uploading immediately of several files
    <FONT COLOR="#000080">Class upload.fileMany Extends %ZEN.Component.page
</FONT><FONT COLOR="#000000">{

    </FONT><FONT COLOR="#000080">Parameter </FONT><FONT COLOR="#000000">DOMAIN = </FONT><FONT COLOR="#800080">"DC"</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Style
{
<</FONT><FONT COLOR="#000080">style </FONT><FONT COLOR="#800000">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"text/css"</FONT><FONT COLOR="#000000">>
  </FONT><FONT COLOR="#800000">.</FONT><FONT COLOR="#000080">ok </FONT><FONT COLOR="#800000">{
    </FONT><FONT COLOR="#000080">color</FONT><FONT COLOR="#800000">:</FONT><FONT COLOR="#000080">green</FONT><FONT COLOR="#800000">;
  }
      </FONT><FONT COLOR="#000000">#dropZone </FONT><FONT COLOR="#800000">{
    </FONT><FONT COLOR="#000080">width</FONT><FONT COLOR="#800000">: 360px;
    </FONT><FONT COLOR="#000080">height</FONT><FONT COLOR="#800000">: 125px;
    </FONT><FONT COLOR="#000080">border</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">dashed </FONT><FONT COLOR="#800000">2px #ccc;
    </FONT><FONT COLOR="#000080">background-color</FONT><FONT COLOR="#800000">: #fefefe;
    </FONT><FONT COLOR="#000080">color</FONT><FONT COLOR="#800000">: #ccc;
    </FONT><FONT COLOR="#000080">text-align</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">center</FONT><FONT COLOR="#800000">;
    </FONT><FONT COLOR="#000080">padding</FONT><FONT COLOR="#800000">: 125px 0 0 0;
  }
    </FONT><FONT COLOR="#000000"></</FONT><FONT COLOR="#000080">style</FONT><FONT COLOR="#000000">>
}
    </FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Contents [ </FONT><FONT COLOR="#000080">XMLNamespace </FONT><FONT COLOR="#000000">= </FONT><FONT COLOR="#800080">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#000000">]
{
<</FONT><FONT COLOR="#000080">page </FONT><FONT COLOR="#800000">xmlns</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#800000">title</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Upload immediately multiple files using XMLHttpRequest"</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">html </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"dropZone"</FONT><FONT COLOR="#000000">>Drag files here or click below</</FONT><FONT COLOR="#000080">html</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">hgroup </FONT><FONT COLOR="#800000">cellVAlign</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"bottom"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">html </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"selectFiles" </FONT><FONT COLOR="#800000">label</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Choose the files"</FONT><FONT COLOR="#000000">>
      <</FONT><FONT COLOR="#000080">input </FONT><FONT COLOR="#800000">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"file" </FONT><FONT COLOR="#800000">class</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileUpload" </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"fileToUpload" </FONT><FONT COLOR="#800000">onchange</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.fileSelected(document.getElementById('fileToUpload').files)" </FONT><FONT COLOR="#800000">multiple</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"multiple" </FONT><FONT COLOR="#000000">/>
    </</FONT><FONT COLOR="#000080">html</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Clear" </FONT><FONT COLOR="#800000">title</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Clear the queue" </FONT><FONT COLOR="#800000">onclick</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.clearList();"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">spacer </FONT><FONT COLOR="#800000">width</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"10"</FONT><FONT COLOR="#000000">/>
    <</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Upload" </FONT><FONT COLOR="#800000">title</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Upload files to the server" </FONT><FONT COLOR="#800000">onclick</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.uploadFile();"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">hgroup</FONT><FONT COLOR="#000000">>
  <</FONT><FONT COLOR="#000080">fieldSet </FONT><FONT COLOR="#800000">legend</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Files waiting to upload"</FONT><FONT COLOR="#000000">>
    <</FONT><FONT COLOR="#000080">html </FONT><FONT COLOR="#800000">id</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"holder"</FONT><FONT COLOR="#000000">/>
  </</FONT><FONT COLOR="#000080">fieldSet</FONT><FONT COLOR="#000000">>
</</FONT><FONT COLOR="#000080">page</FONT><FONT COLOR="#000000">>
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">clearList() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  fileQueue</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">[];
  zen(</FONT><FONT COLOR="#800000">'holder'</FONT><FONT COLOR="#000000">).getEnclosingDiv().innerHTML</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">''</FONT><FONT COLOR="#000000">;
  zen(</FONT><FONT COLOR="#800000">'selectFiles'</FONT><FONT COLOR="#000000">).refreshContents();
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">fileSelected(</FONT><FONT COLOR="#ff00ff">files</FONT><FONT COLOR="#000000">) [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">holder </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">zen(</FONT><FONT COLOR="#800000">'holder'</FONT><FONT COLOR="#000000">).getEnclosingDiv();
  </FONT><FONT COLOR="#008000">for </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">var </FONT><FONT COLOR="#000000">i </FONT><FONT COLOR="#000080">= 0</FONT><FONT COLOR="#000000">; i </FONT><FONT COLOR="#000080">< </FONT><FONT COLOR="#000000">files.length; i</FONT><FONT COLOR="#000080">++</FONT><FONT COLOR="#000000">) {
  
    </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">file </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">files[i];
        </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">fileSize </FONT><FONT COLOR="#000080">= 0</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(file.size </FONT><FONT COLOR="#000080">> 1024  1024</FONT><FONT COLOR="#000000">)
      fileSize </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">(Math.round(file.size </FONT><FONT COLOR="#000080"> 100 / </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#000080">1024  1024</FONT><FONT COLOR="#000000">)) </FONT><FONT COLOR="#000080">/ 100</FONT><FONT COLOR="#000000">).toString() </FONT><FONT COLOR="#000080">+ </FONT><FONT COLOR="#000000">$$$Text(</FONT><FONT COLOR="#800000">'MB'</FONT><FONT COLOR="#000000">);
    </FONT><FONT COLOR="#008000">else
      </FONT><FONT COLOR="#000000">fileSize </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">(Math.round(file.size </FONT><FONT COLOR="#000080"> 100 / 1024</FONT><FONT COLOR="#000000">) </FONT><FONT COLOR="#000080">/ 100</FONT><FONT COLOR="#000000">).toString() </FONT><FONT COLOR="#000080">+ </FONT><FONT COLOR="#000000">$$$Text(</FONT><FONT COLOR="#800000">'KB'</FONT><FONT COLOR="#000000">);
  
    </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">divInfo </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">document.createElement(</FONT><FONT COLOR="#800000">'div'</FONT><FONT COLOR="#000000">);
    divInfo.innerHTML</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">file.name</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#800000">' ('</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">file.type</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#800000">') - '</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">fileSize;
    holder.appendChild(divInfo);
        </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">divProgN </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">document.createElement(</FONT><FONT COLOR="#800000">'div'</FONT><FONT COLOR="#000000">);
    divProgN.id</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'progressNumber'</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">i;
    divProgN.innerHTML</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'%'</FONT><FONT COLOR="#000000">;
    holder.appendChild(divProgN);
        </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">prog </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">document.createElement(</FONT><FONT COLOR="#800000">'progress'</FONT><FONT COLOR="#000000">);
    prog.id</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'progressValue'</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">i;
    prog.max</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'100.0'</FONT><FONT COLOR="#000000">;
    prog.value</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'0'</FONT><FONT COLOR="#000000">;
    holder.appendChild(prog);
        fileQueue.push({i:i,file:file});
  }
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">uploadFile() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  </FONT><FONT COLOR="#008000">while </FONT><FONT COLOR="#000000">(fileQueue.length </FONT><FONT COLOR="#000080">> 0</FONT><FONT COLOR="#000000">) {
    </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">item</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">fileQueue.pop();
    uploadFile(item.file,item.i);
  }
}
    </FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">onloadHandler() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
  </FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#000080">typeof </FONT><FONT COLOR="#000000">FileReader </FONT><FONT COLOR="#000080">== </FONT><FONT COLOR="#800000">"undefined"</FONT><FONT COLOR="#000000">) zenAlert($$$Text(</FONT><FONT COLOR="#800000">'Sorry, your browser does not support File API, so this demo will not work correctly'</FONT><FONT COLOR="#000000">));
  fileQueue </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">Array();
      uploadFile </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#008080">function </FONT><FONT COLOR="#000000">(file, i) {
    </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">xhr </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">XMLHttpRequest(), upload </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">xhr.upload, fd </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">new </FONT><FONT COLOR="#000000">FormData();
    
    fd.append(</FONT><FONT COLOR="#800000">'fUpload'</FONT><FONT COLOR="#000000">, file);
        upload.addEventListener(</FONT><FONT COLOR="#800000">'progress'</FONT><FONT COLOR="#000000">,
    </FONT><FONT COLOR="#008080">function </FONT><FONT COLOR="#000000">(evt) {
      </FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(evt.lengthComputable) {
        </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">percentComplete </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">Math.round(evt.loaded </FONT><FONT COLOR="#000080">* 100 / </FONT><FONT COLOR="#000000">evt.total);
            document.getElementById(</FONT><FONT COLOR="#800000">'progressNumber'</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">i).innerHTML </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">percentComplete.toString() </FONT><FONT COLOR="#000080">+ </FONT><FONT COLOR="#800000">'%'</FONT><FONT COLOR="#000000">;
        document.getElementById(</FONT><FONT COLOR="#800000">'progressValue'</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">i).value </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">percentComplete;
        
      }
      </FONT><FONT COLOR="#008000">else </FONT><FONT COLOR="#000000">{
        document.getElementById(</FONT><FONT COLOR="#800000">'progressNumber'</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">i).innerHTML </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">$$$Text(</FONT><FONT COLOR="#800000">'Cannot compute'</FONT><FONT COLOR="#000000">);
      }
      
    }, false);
    upload.addEventListener(</FONT><FONT COLOR="#800000">'load'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#008080">function </FONT><FONT COLOR="#000000">(ev) {
      </FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">c</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">document.getElementById(</FONT><FONT COLOR="#800000">'progressNumber'</FONT><FONT COLOR="#000080">+</FONT><FONT COLOR="#000000">i);
      c.className</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'ok'</FONT><FONT COLOR="#000000">;
      c.innerHTML</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#800000">'OK'</FONT><FONT COLOR="#000000">;
    }, false);
    upload.addEventListener(</FONT><FONT COLOR="#800000">'error'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#008080">function </FONT><FONT COLOR="#000000">(ev) {zenAlert($$$Text(</FONT><FONT COLOR="#800000">'An error occurred when trying to upload the file.'</FONT><FONT COLOR="#000000">));}, false);
    upload.addEventListener(</FONT><FONT COLOR="#800000">'abort'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#008080">function </FONT><FONT COLOR="#000000">(ev) {zenAlert($$$Text(</FONT><FONT COLOR="#800000">'The upload was canceled by the user or the browser dropped the connection.'</FONT><FONT COLOR="#000000">));}, false);
    xhr.open(</FONT><FONT COLOR="#800000">'POST'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'upload.fileMany.cls'</FONT><FONT COLOR="#000000">);
    xhr.setRequestHeader(</FONT><FONT COLOR="#800000">'Cache-Control'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">'no-cache'</FONT><FONT COLOR="#000000">);
    xhr.setRequestHeader(</FONT><FONT COLOR="#800000">'X-Requested-With'</FONT><FONT COLOR="#000000">, </FONT><FONT COLOR="#800000">'XMLHttpRequest'</FONT><FONT COLOR="#000000">);
    xhr.send(fd);
  }
  
  dropZone</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">zen(</FONT><FONT COLOR="#800000">'dropZone'</FONT><FONT COLOR="#000000">).getEnclosingDiv();
  dropZone.addEventListener(</FONT><FONT COLOR="#800000">'dragenter'</FONT><FONT COLOR="#000000">,  </FONT><FONT COLOR="#008080">function</FONT><FONT COLOR="#000000">(ev){
    ev.stopPropagation();
    ev.preventDefault();
  }, false);
  dropZone.addEventListener(</FONT><FONT COLOR="#800000">'dragleave'</FONT><FONT COLOR="#000000">,  </FONT><FONT COLOR="#008080">function</FONT><FONT COLOR="#000000">(ev){
    ev.stopPropagation();
    ev.preventDefault();
    </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'backgroundColor'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#FEFEFE'</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'borderColor'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#CCC'</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'color'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#CCC'</FONT><FONT COLOR="#000000">;
  }, false);
  dropZone.addEventListener(</FONT><FONT COLOR="#800000">'dragover'</FONT><FONT COLOR="#000000">,  </FONT><FONT COLOR="#008080">function</FONT><FONT COLOR="#000000">(ev){
    ev.stopPropagation();
    ev.preventDefault();
    </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'backgroundColor'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#F0FCF0'</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'borderColor'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#3DD13F'</FONT><FONT COLOR="#000000">;
    </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'color'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#3DD13F'</FONT><FONT COLOR="#000000">;
  }, false);
  dropZone.addEventListener(</FONT><FONT COLOR="#800000">'drop'</FONT><FONT COLOR="#000000">,  </FONT><FONT COLOR="#008080">function</FONT><FONT COLOR="#000000">(ev){
  ev.stopPropagation();
  ev.preventDefault();
  </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'backgroundColor'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#FEFEFE'</FONT><FONT COLOR="#000000">;
  </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'borderColor'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#CCC'</FONT><FONT COLOR="#000000">;
  </FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.style[</FONT><FONT COLOR="#800000">'color'</FONT><FONT COLOR="#000000">] </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">'#CCC'</FONT><FONT COLOR="#000000">;
  zenPage.fileSelected(ev.dataTransfer.files);
  }, false);
}
    </FONT><FONT COLOR="#000080">ClassMethod </FONT><FONT COLOR="#000000">%OnPreHTTP() </FONT><FONT COLOR="#000080">As %Boolean </FONT><FONT COLOR="#000000">[ </FONT><FONT COLOR="#000080">ServerOnly </FONT><FONT COLOR="#000000">= 1 ]
{
  </FONT><FONT COLOR="#0000ff">#dim </FONT><FONT COLOR="#800000">%request </FONT><FONT COLOR="#0000ff">As </FONT><FONT COLOR="#008080">%CSP.Request
  </FONT><FONT COLOR="#0000ff">#dim </FONT><FONT COLOR="#800000">stream </FONT><FONT COLOR="#0000ff">As </FONT><FONT COLOR="#008080">%CSP.BinaryStream</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#800000">%request</FONT><FONT COLOR="#000000">.</FONT><FONT COLOR="#0000ff">GetMimeData</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#008000">"fUpload"</FONT><FONT COLOR="#000000">)
  </FONT><FONT COLOR="#0000ff">if $IsObject</FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#800000">stream</FONT><FONT COLOR="#000000">) </FONT><FONT COLOR="#800080">{
    
    </FONT><FONT COLOR="#008000">#; here you do with the received file useful work
    
    /*
    set ^tmp("filename")=stream.FileName
    set ^tmp("filesize")=stream.Size
    */
    
    </FONT><FONT COLOR="#0000ff">quit $$$NO
  </FONT><FONT COLOR="#800080">}
  </FONT><FONT COLOR="#0000ff">quit $$$YES
</FONT><FONT COLOR="#000000">}
    }</FONT>
Of course you can do the same on CSP.
0
Marco Blom · Nov 13, 2017

I am interested in the Zen-examples please. Thanks!

(

0