c# - ajaxToolkit:AjaxFileUpload capture file description -
i'm trying filedescription asp:textbox save db when user clicks upload it's coming blank. doing wrong?
this in upload.aspx file
<ajaxtoolkit:ajaxfileupload id="ajaxfileupload1" throbberid="mythrobber" onuploadcomplete="ajaxfileupload1_uploadcomplete" contextkeys="" allowedfiletypes="jpg,jpeg,doc,xls" maximumnumberoffiles="1" runat="server"/> </div> file description<asp:textbox id="filedescription" width="200" runat="server" ></asp:textbox> , in upload.cs file protected void ajaxfileupload1_uploadcomplete(object sender, ajaxcontroltoolkit.ajaxfileuploadeventargs e) { string sfiledescription = filedescription.text; string filepath = "~/" + e.filename; ajaxfileupload1.saveas(filepath); }
let's add individual descriptions each uploaded file. need download ajaxcontroltoolkit sources codeplex (here link download: latest toolkit sources , modify 3 files:
new content of ajaxfileupload.item.pre.js file:
/// <reference path="../../../client/microsoftajax.extended/common/common.pre.js" /> type.registernamespace("sys.extended.ui.ajaxfileupload"); type.registernamespace("ajaxfileupload"); sys.extended.ui.ajaxfileupload.item = function (parentid, fileitem, onremoveitem) { this._deletebutton = null; this._parentid = parentid; this._inputelementvalue = fileitem.value; this._id = fileitem.id; this._slices = fileitem.slices; this._sliceindex = 0; this._fileinfocontainer = null; this._filestatustext = null; this._isuploaded = false; this._isuploading = false; this._filesize = 0; this._filename = ""; this._filetype = ""; this._bytesuploaded = 0; this._filecomment = null; this._ui = this.initui(onremoveitem); }; sys.extended.ui.ajaxfileupload.item.prototype = { initui: function (onremoveitem) { var self = this, file = this._inputelementvalue, utils = new sys.extended.ui.ajaxfileupload.utils(), ishtml5support = utils.checkhtml5browsersupport(), // generate unique id each item id = this._id, // create line item container container = $common.createelementfromtemplate({ nodename: "div", properties: { id: this._parentid + '_fileitemcontainer_' + id, }, cssclasses: ['ajax__fileupload_fileiteminfo'] }), // create file info/status container fileinfocontainer = $common.createelementfromtemplate({ nodename: "div", properties: { id: this._parentid + '_fileinfocontainer_' + id, style: { display: 'inline-block' } } }), // create file info placeholder fileinfotext = $common.createelementfromtemplate({ nodename: "span", properties: { id: this._parentid + '_fileiteminfo_' + id }, cssclasses: ['ajax__fileupload_fileiteminfo'] }), // create file status placeholder filestatustext = $common.createelementfromtemplate({ nodename: "span", properties: { id: this._parentid + '_fileitemstatus_' + id }, cssclasses: ['uploadstatus'] }), commentcontainer = $common.createelementfromtemplate({ nodename: 'div', cssclasses: ['ajax__fileupload_fileitem_commentcontainer'] }), filecomment = $common.createelementfromtemplate({ nodename: "input", properties: { id: this._parentid + '_fileitemcomment_' + id, type: 'text', style: { width: '100%' } }, cssclasses: ['ajax__fileupload_fileitem_commentinput'] }), // init remove button deletebutton = $common.createelementfromtemplate({ nodename: "div", properties: { id: this._parentid + '_fileitemdeletebutton_' + id }, cssclasses: ['removebutton'] }); this._filename = utils.getfilename(file); if (ishtml5support) { this._filesize = file.size; var ftype = file.type ? '<span class="filetype">(' + file.type + ')</span>' : ''; fileinfotext.innerhtml = '<span class="filename">' + this._filename + '</span> ' + ftype + ' - <span class="filesize">' + utils.sizetostring(file.size) + '</span> '; this._filetype = file.type; } else { fileinfotext.innerhtml = '<span class="filename">' + this._filename + '</span>'; this._filetype = utils.getfiletype(file); } commentcontainer.innerhtml = '<label class="ajax__fileupload_fileitem_commentlabel" for="' + this._parentid + '_fileitemcomment_' + id + '">description:</label>'; commentcontainer.appendchild(filecomment); fileinfocontainer.appendchild(fileinfotext); fileinfocontainer.appendchild(filestatustext); fileinfocontainer.appendchild(commentcontainer); $common.settext(deletebutton, sys.extended.ui.resources.ajaxfileupload_remove); $addhandlers(deletebutton, { 'click': function.createdelegate(this, function () { onremoveitem(self); }) }); // build line item if (sys.browser.agent == sys.browser.internetexplorer && sys.browser.version <= 8) { container.appendchild(deletebutton); container.appendchild(fileinfocontainer); } else { container.appendchild(fileinfocontainer); container.appendchild(deletebutton); } this._fileinfocontainer = fileinfocontainer; this._deletebutton = deletebutton; this._filestatustext = filestatustext; this._filecomment = filecomment; return container; }, setstatus: function (filestatustext, text) { $common.settext(this._filestatustext, ' (' + text + ')'); this._fileinfocontainer.setattribute('class', filestatustext + 'state'); }, disabled: function (on) { if (on) this._deletebutton.disabled = this._filecomment.disabled = 'disabled'; else this._deletebutton.disabled = this._filecomment.disabled = ''; }, hide: function () { this._deletebutton.style.visibility = 'hidden'; this._filecomment.readonly = true; }, destroy: function () { $common.removeelement(this._inputelementvalue); $common.removeelement(this._deletebutton); $common.removeelement(this._filecomment); $common.removeelement(this._ui); }, get_inputelementvalue: function () { return this._inputelementvalue; }, appendnodeto: function (parent) { parent.appendchild(this._ui); }, removenodefrom: function (parent) { parent.removechild(this._ui); }, get_filecomment: function () { return this._filecomment.value; } }; in code added new class field _filecomment, new function get_filecomment , modified initui, disabled, hide , destroy functions. after these changes, each file item have individual textbox file description.
after that, change bit ajaxfileupload.control.pre.js file. rewrite doneanduploadnextfile function below:
doneanduploadnextfile: function (fileitem) { /// <summary> /// mark fileitem uploaded, , upload next file in queue. /// </summary> /// <param name="fileitem">uploaded file</param> // send message server finalize upload var xhr = new xmlhttprequest(), self = this; xhr.open("post", "?contextkey="+ this._contextkey +"&done=1&guid=" + fileitem._id + "&comment=" + fileitem.get_filecomment(), true); xhr.onreadystatechange = function (e) { if (xhr.readystate == 4) { if (xhr.status == 200) { // mark done , invoke event handler self.raiseuploadcomplete(sys.serialization.javascriptserializer.deserialize(xhr.responsetext)); // upload next file self._processor.startupload(); } else { // finalizing error. next file not uploaded. self.setfilestatus(fileitem, 'error', sys.extended.ui.resources.ajaxfileupload_error); self.raiseuploaderror(xhr); throw "error raising upload complete event , start new upload"; } } }; xhr.send(null); } and last step ajaxfileupload.css file. change heigh css rile in .ajax__fileupload_fileiteminfo class definition , add 3 additional classes description:
.ajax__fileupload_fileiteminfo { line-height: 20px; height: 44px; margin-bottom: 2px; overflow: hidden; } .ajax__fileupload_fileitem_commentcontainer { display: table; width: 100%; } .ajax__fileupload_fileitem_commentlabel { display: table-cell; width: 1px; white-space: nowrap; padding-right: 5px; } .ajax__fileupload_fileitem_commentinput { display: table-cell; width: 100%; } after these changes rebuild toolkit solution , use custom dlls. can posted description query string in onuploadcomplete event handler: var comment = request.querystring["comment"];
Comments
Post a Comment