Thought I'd point you to a recent blog post that describes using the plUpload component in Web Connection in a new way using the simple plUpload API that isn't based on an a pre-defined UI. plUploads contains a few components and the existing implementation used the Queue component which does have a UI. As part of the image upload option on the message board I needed to upload images without UI and so I created an example that demonstrates using the lower level plUpload API.

For those of you that don't know, plUpload is popular AJAX based image uploader which means you can upload images in the background while you can do other stuff on the same page (ie. you don't have to submit the page). It also allows for upload chunking, meaning that files are uploaded in small chunks which allows you to get around hte 16meg limits for POST data in Web Connection. You can use plUpload on any page as well as pure client side Angular applications for example, or server side applications as the message board which simply embeds image links into a page. The blog post describes that exact scenario which is common for message based applications, CMS's blogs etc.

Anyway if you're interested in using an Uploader, check out the blog post:
http://west-wind.com/wconnect/weblog/ShowEntry.blog?id=908

<form id="form1" runat="server">
         <ww:wwWebTextBox ID="txtNmName1" runat="server" Width="250px" IsRequired="True"
          ControlSource="This.Page.oStudent.oData.nmName1" TabIndex="100"
          UserFieldName="First Name"></ww:wwWebTextBox>
.etc.etc
<p><ww:wwWebButton  runat='server' ID="btnSubmit" Text="Submit Application" TabIndex="950" Click="btnSubmit_click" /></p>
  </form>

These operations would populate the batch upload grid. Then I'd add OnClientClick to trigger the actual upload when they submit the page. Do you see any reasons why this approach wouldn't work?

--stein

That would work, but you have to keep in mind that the file upload is asynchronous, while the rest of the information is sent basically as a transactional request. This can make dealing with the upload and synching it up with the actual posted data a bit tricky. There are ways around this like having them post the main data first and then sending the files and having the id associated (look at the full queue form plUploadForm demo in the samples).

I do this in a Classifieds app I built for a customer some time ago. We let people post their classified info first and save it, then display the info they typed, and THEN let them upload the images. That way we have an id we can send with the images so we have the right context in order to pick them up properly and store them with related names on disk (or write them to the database or whatever you do with the data).

Depending on how big the files you are uploading are, it can be easier to simply attach the images using a standard <input type="file" /> control and capture that. If you have one or two files and the files are under a meg each this might work just fine too.

plUpload makes most sense when the upload is not directly coupled to some other form submission. On the message board the images are uploaded before the messages actually exist for example so we can embed the image link. Likewise in classifieds scenario we can have many images uploaded but they do link in that case to the actual entry they posted.

There are lots of options. File Upload controls are easier, but plUpload certainly are nicer UI wise, but it does require some extra code.

+++ Rick ---

<form id="form1" runat="server">
         <ww:wwWebTextBox ID="txtNmName1" runat="server" Width="250px" IsRequired="True"
          ControlSource="This.Page.oStudent.oData.nmName1" TabIndex="100"
          UserFieldName="First Name"></ww:wwWebTextBox>
.etc.etc
<p><ww:wwWebButton  runat='server' ID="btnSubmit" Text="Submit Application" TabIndex="950" Click="btnSubmit_click" /></p>
  </form>

--stein

<form id="form1" runat="server">
         <ww:wwWebTextBox ID="txtNmName1" runat="server" Width="250px" IsRequired="True"
          ControlSource="This.Page.oStudent.oData.nmName1" TabIndex="100"
          UserFieldName="First Name"></ww:wwWebTextBox>
.etc.etc
<p><ww:wwWebButton  runat='server' ID="btnSubmit" Text="Submit Application" TabIndex="950" Click="btnSubmit_click" /></p>
  </form>

Well, if you use standard file upload controls, then it's easy to add that to the main form. You can simply check for the files coming in along with the post buffer. It may still make sense to add the files in a separate step, but it's just as easy to do that at the same time.

Separation is required when you're dealing with async uploads because you will need to know what the context of the uploaded file is...

+++ Rick ---

<form id="form1" runat="server">
         <ww:wwWebTextBox ID="txtNmName1" runat="server" Width="250px" IsRequired="True"
          ControlSource="This.Page.oStudent.oData.nmName1" TabIndex="100"
          UserFieldName="First Name"></ww:wwWebTextBox>
.etc.etc
<p><ww:wwWebButton  runat='server' ID="btnSubmit" Text="Submit Application" TabIndex="950" Click="btnSubmit_click" /></p>
  </form>