Detailed simple explanation and example about how to make it more JQuery and generic

well, if you read my post about how to send a FormData here you probably said something like "why can it be more simple, just to send a bloody ajax with a file", well ur in the right place.
also TOC about this subject here like server side

this is the basically the same code only a bit refined to FormData only, and skipping the part where its constrained to a form

also added the __REQUESTDIGEST for anyone who wants to use this with sharepoint, just remove the comment there.

NOTE that i changed the readAsBinaryString to readAsDataURL since it solves some encoding problems

now the function accepts a jQuery object as a "form" and just runs on all of its elements, and you get to send yourself the normal ajas options object with the URL and all other headers ect. and callbacks (success, error..)

var FormDataAJAXSubmit = (function () {
   function submitData(oData) {
      var sBoundary = "---------------------------" + Date.now().toString(16);
      oData.ajaxOptions.contentType = "multipart\/form-data; boundary=" + sBoundary;
      oData.ajaxOptions.processData = false;
      oData.ajaxOptions.data = "--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n";
      console.log("using FormData, start ajax");
      $.ajax(oData.ajaxOptions);
   }

  
function processStatus(oData) {
      if (oData.status > 0) { return; }
      submitData(oData);
   }

  
function pushSegment(oFREvt) {
      this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
      this.owner.status--;
      processStatus(this.owner);
   }

   function SubmitRequest(form, ajaxOptions) {
      this.ajaxOptions = ajaxOptions;
      var nFile, sFieldType, oField, oSegmReq, oFile;
      this.status = 0;
      this.segments = [];
      var propsNames = [];

      var inputs = $("input, textarea, select", form);

      for (var nItem = 0; nItem < inputs.length; nItem++) {
         oField = inputs[nItem];
         var _inputElem = $(oField);
         sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
         if (sFieldType === "FILE" && oField.files.length > 0) {
            for (nFile = 0; nFile < oField.files.length; nFile++) {
               oFile = oField.files[nFile];
               oSegmReq = new FileReader();
               /* (custom properties:) */
               oSegmReq.segmentIdx = this.segments.length;
               oSegmReq.owner = this;
               /* (end of custom properties) */
               oSegmReq.onload = pushSegment;
               this.segments.push("Content-Disposition: form-data; name=\"" + _inputElem.attr('id') + "\"; filename=\"" + oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
this.status++;
               //oSegmReq.readAsBinaryString(oFile);
               oSegmReq.readAsDataURL(oFile);            }         } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
            this.segments.push("Content-Disposition: form-data; name=\"" + _inputElem.attr('id') + "\"\r\n\r\n" + _inputElem.val() + "\r\n");
         }
      }      //if you use it in sharepoint u need this
      //this.segments.push("Content-Disposition: form-data; name=\"__REQUESTDIGEST\"\r\n\r\n" + $("#__REQUESTDIGEST").val() + "\r\n");
      processStatus(this);
   };

   return function (form, ajaxOptions) {
      new SubmitRequest(form, ajaxOptions);
   };
})(); 

Comments

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

Asp.Net Ending Response options, Response.End() vs CompleteRequest()