How can I use the ContextKeys property for an AjaxFileUpload control?

Question

I began to consider the AjaxFileUpload control, in particular the ContextKeys property. However, I do not understand how to use it.

The documentation says about AjaxFileUpload, that ContextKeys is used to transfer information to the server when the file is uploaded. But there are no examples. Are there any examples online that I could look at?

Answer 1

Although this functionality has not been implemented (I believe that it was planned, but was postponed for some reason), nothing will protect you from its implementation. To do this, you need to download the source code of AjaxControlToolkit and configure it for your needs.

There will be many points, so you can make a cup of coffee earlier :)

I will show the changes with the name of the file to be changed.

Server /AjaxControlToolkit/AjaxFileUpload/AjaxFileUpload.cs file

First of all, add the ContextKeys property to the AjaxFileUploadEventArgs.cs file (it is in the same folder):

/// <summary> /// Gets or sets the context keys. /// </summary> public string ContextKeys { get; set; } 

After that, open the AjaxFileUpload class code and change the OnPreRender method. Here is the custom change part of this method:

 var eventArgs = new AjaxFileUploadEventArgs(guid, AjaxFileUploadState.Success, "Success", uploadedFile.FileName, uploadedFile.ContentLength, uploadedFile.ContentType, stream.ToArray()); // NEW CODE HERE eventArgs.ContextKeys = this.Page.Request.Form["contextKeys"]; 

All changes in the server code we need. Now we need to change the client class Sys.Extended.UI.AjaxFileUpload (file AjaxFileUpload.pre.js )

First apply the _html5UploadFile method, as shown below:

 _html5UploadFile: function (fileItem) { this._guid = Sys.Extended.UI.AjaxFileUpload.utils.generateGuid(); var uploadableFile = fileItem.get_fileInputElement(); var fd = new FormData(); fd.append("fileId", uploadableFile.id); fd.append("Filedata", uploadableFile.file); if (this.contextKeys) { if (typeof this.contextKeys !== "string") { this.contextKeys = Sys.Serialization.JavaScriptSerializer.serialize(this.contextKeys); } fd.append("contextKeys", this.contextKeys); } $common.setVisible(this._progressBar, true); this._setDisableControls(true); this._html5SetPercent(0); this._setStatusMessage(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_UploadingHtml5File, uploadableFile.file.name, Sys.Extended.UI.AjaxFileUpload.utils.sizeToString(uploadableFile.file.size))); var url = this._postBackUrl; if (url.indexOf("?") != -1) url += "&"; else url += "?"; this._webRequest = new Sys.Net.WebRequest(); this._executor = new Sys.Net.XMLHttpExecutor(); this._webRequest.set_url(url + 'contextkey=' + this._contextKey + '&guid=' + this._guid); this._webRequest.set_httpVerb("POST"); this._webRequest.add_completed(this.bind(this._html5OnRequestCompleted, this)); //this._executor.add_load(this.bind(this._html5OnComplete, this)); this._executor.add_progress(this.bind(this._html5OnProgress, this)); this._executor.add_uploadAbort(this.bind(this._html5OnAbort, this)); this._executor.add_error(this.bind(this._html5OnError, this)); this._webRequest.set_executor(this._executor); this._executor.executeRequest(fd); } 

As you can see above, we are adding contextKeys to form the data sent with the Ajax request.

We need to change the _uploadInputElement method:

 _uploadInputElement: function (fileItem) { var inputElement = fileItem.get_fileInputElement(); var uploader = this; uploader._guid = Sys.Extended.UI.AjaxFileUpload.utils.generateGuid(); setTimeout(function () { uploader._setStatusMessage(String.format(Sys.Extended.UI.Resources.AjaxFileUpload_UploadingInputFile, Sys.Extended.UI.AjaxFileUpload.utils.getFileName(inputElement.value))); uploader._setDisableControls(true); uploader.setThrobber(true); }, 0); var url = uploader._postBackUrl; if (url.indexOf("?") != -1) url += "&"; else url += "?"; uploader._createVForm(); uploader._vForm.appendChild(inputElement); if (this.contextKeys) { if (typeof this.contextKeys !== "string") { this.contextKeys = Sys.Serialization.JavaScriptSerializer.serialize(this.contextKeys); } var contextKeysInput = document.createElement("input"); contextKeysInput.setAttribute("type", "hidden"); contextKeysInput.setAttribute("name", "contextKeys"); contextKeysInput.setAttribute("value", this.contextKeys); uploader._vForm.appendChild(contextKeysInput); } uploader._vForm.action = url + 'contextkey=' + this._contextKey + '&guid=' + this._guid; uploader._vForm.target = uploader._iframeName; setTimeout(function () { uploader._vForm.submit(); uploader._waitTimer = setTimeout(function () { uploader._wait() }, 100); }, 0); } 

After all these changes, you can set the ContextKeys property to the code behind and get its value from the AjaxFileUploadEventArgs argument of the AjaxFileUploadEventArgs event, as shown below:

 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack && !AjaxFileUpload1.IsInFileUploadPostBack) { AjaxFileUpload1.ContextKeys = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(new Dictionary<string, string> { { "1", "First" }, { "2", "Second" } }); } protected void AjaxFileUpload1_OnUploadComplete(object sender, AjaxFileUploadEventArgs file) { if (!string.IsNullOrEmpty(file.ContextKeys)) { var contextKeys = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<Dictionary<string, string>>(file.ContextKeys); } 

In addition, if you implement the OnClientUploadStarted event on the client side, as the link suggested here, you can pass your OnClientUploadStarted context from the client to the server:

  function uploadStarted(sender, args) { sender.contextKeys = { "first": "1", "second": "2" }; }