0

I'm working on an old piece of code in a software where there's a generic JavaScript (w/ some jQuery) utility function that calls an ASHX web-handler to download any type of file like excel, word, zip, csv, etc. (definition mentioned below). It dynamically creates an iframe & form element with the iframe target, submits the form, and removes the form element.

// existing function
downloadFile: function(url, method, formData) {
  // method = by default 'POST' and can be 'GET', 'POST', ...
  encUrl = encodeUrl(url);

  downloadDiv = $('<div id="download-file" style="display: none;"></div>');
  iframeId = getNewId();
  src = isPost ? '' : 'src="' + encUrl + '"';
  downloadDiv.html('<iframe name="' + iframeId + '" id="' + iframeId + '" ' + src + '></iframe>');

  if(isPost) {
    form = $('<form target="' + iframeId + '" method="post" action="' + encUrl + '"></form>').appendTo(document.body);
    if (formData) {
      for (p in formData) {
        if (formData.hasOwnProperty(p)) {
          $('<input type="hidden" />').attr("name", p).val(formData[p]).appendTo(form);
        }
      }
    }

    form.submit().remove();
  }
}

At few places in the codebase from where this function is called, I have to delete the file after the user downloads it, so I need a callback to request the server. For this, I have converted this function to use an XHR. I seldom work with JS so this is the best I've been able to do so far. With the code below, the server writes the file in the response but I am not able to write it in the iframe so that the download file popup opens up in the application and the user downloads the file. Basically, I'm trying to imitate the form's target="iframeId" thing in JS.

// modified function
downloadFile: function(url, method, formData, downloadAsync, asyncSuccessCallback, asyncFailureCallback) {
  // same as before, just changed the form submit part
  if (submitAsync) {
    downloadXhr = new XMLHttpRequest();

    // is encoded URL required here or the normal one will do?
    downloadXhr.open('POST', url);

    downloadXhr.onloadend = () => {
      var xhr = downloadXhr,
          iframeTarget = downloadDiv.children().first().get(0);
      
      form.remove();
      
      iframeTarget.contentDocument.open();
      iframeTarget.contentDocument.write(xhr.response);
      iframeTarget.contentDocument.close();
    } 

    if (asyncSuccessCallback) {
      downloadXhr.onload = asyncSuccessCallback;
    }

    if (asyncFailureCallback) {
      downloadXhr.onerror = asyncFailureCallback;
    }

    // needed? downloadXhr.responseType = 'blob';
    downloadXhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    downloadXhr.send(new FormData(form.get(0)));
  }
  else {
    form.submit().remove();
  }
}

How can I write the response to the iframe so that the download file window opens in the browser?

Is this approach correct or something better can be done? Perhaps, AJAX could also be used here instead.

Please help, thanks.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy