I've struggled with the title for this one.

I'm sure there is a better way to do this in the real problem case but the question seems to make some sense to me in the abstract case.

There is an existing file submission form which uploads a jpeg to the server. When the response comes back from the server the page reloads and the new page from the server contains information about the image uploaded.

I want to manipulate the image in the browser before upload.

So instead of submitting the form I'm building a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object from the form and replacing the file input element with the blob from my canvas and submitting an XMLHttpRequest.

The server is happy with this and returns the new page. So I have the new page in the responseText but I can't load it into the browser the way it would happen with the real form submit.

How do I get the browser to behave the way it does after the form response returns in the submit case?

I've come up with a [test document](https://gist.github.com/jcable/25d4c86d96d810a5498d) that expresses the case. If you don't check the check box it submits the file. If you do check it, it uses an XMLHttpRequest.

setting the document url to the blob url works but leaves the document url different to what it would be for the submit.

document.write fails with an error.