Hi
Let's say I have a form for creation of a NEW news article. This article has one main image, and one or more additional images. There are various other fields on the form which require validating, some requiring async postbacks (for example testing that the unique string key for the article is actually unique) , so the selected files for both the primary image and additional images need to be preserved between postbacks.
When I click "submit" to create a new news article, it needs to validate the core fields, then process the main image and move that uploaded file to a new location. It then needs to process any additional uploaded files in the same way.
So far I have got the single main image working using a persisted file:
<CuteWebUI:UploadPersistedFile
runat="server"
ID="cupMainImage"
InsertText="Upload File (Max 1M)"
OnFileChanged="cupMainImage_FileUploaded">
<ValidateOption
AllowedFileExtensions="jpeg,jpg,gif,png"
MaxSizeKB="1024" />
</CuteWebUI:UploadPersistedFile>
By using the persisted file, it doesn't matter how many postbacks go on before the form is finally submitted, in the final submit I can still just use cupMainImage.File to access the single uploaded file for the main image.
However, when it comes to the multiple additional images that could be uploaded, I'm struggling to find the correct way to approach it. I have tried using a similar version of the control definition above but with multiple files specified, e.g.
<CuteWebUI:UploadPersistedFile
runat="server"
ID="cupExtraImages"
InsertText="Upload File (Max 1M)"
OnFileChanged="cupExtraImages_FileUploaded"
MultipleFilesUpload="true">
<ValidateOption
AllowedFileExtensions="jpeg,jpg,gif,png"
MaxSizeKB="1024" />
</CuteWebUI:UploadPersistedFile><br />
The problem is, when the final postback comes to submit the form, I can't figure out how to get each file uploaded using that control (I can only see how to get the last single file using cupExtraImages.File). I've tried using the FileUploaded event to keep a track of each uploaded file's GUID by storing it in ViewState, then in the final submit use the list of uploaded Guids to get each file, e.g.
protected void cupExtraImages_FileUploaded(object sender, PersistedFileEventArgs args)
{
additionalImages = (List<Guid>)ViewState["AdditionalFiles"];
if (additionalImages == null)
{
additionalImages = new List<Guid>();
}
additionalImages.Add(args.FileGuid);
txtExtraImages.Text += "Uploaded " + args.FileName + "\r\n";
}
and then in the final submit where I want to create the main news item:
additionalImages = (List<Guid>)ViewState["AdditionalFiles"];
foreach (Guid id in additionalImages)
{
var file = cupExtraImages.GetUploadedFile(id);
// Do something with the uploaded file
}
But this hasn't worked.
Basically I need some guidance on the best way to use these controls to achieve a web form that allows a single mandatory image and multiple optional images to be uploaded, and the uploaded files need to be moved to a new location and renamed as part of the final postback after all the other validation has happened and I'm ready to create the main record.
Please help! This has been driving me mad for weeks.
Thanks in advance,
Tawl