title: Convert Blob URL to file object with axios
body: <p>I have an image cropper that creates a blob file for each crop.</p>
  
  <p>When the user finished cropping he clicks a success button and I get an URL that looks like this:
  blob:<a href="https://localhost:5001/4434606b-29c4-483d-a1fc-1cefe50a3e3a" rel="noreferrer">https://localhost:5001/4434606b-29c4-483d-a1fc-1cefe50a3e3a</a>". Since I need a file object (so I can post it to my server) I convert this blob into an actual file object with this code:</p>
  
  <pre><code>const file = await fetch(blobUrl).then(r =&gt; r.blob()).then(blobFile =&gt; new File([blobFile], fileName, { type: blobFile.type }));
  </code></pre>
  
  <p>This code works, but unfortunately, I need to provide IE11 support and since fetch is not supported (and polyfills don't seem to work for this fetch call) I would like to migrate this statement into axios (which I already use all over my application).</p>
  
  <p>This is what I've tried:</p>
  
  <pre><code>axios.get(blobUrl).then(r =&gt; r.blob()).then(blobFile =&gt; new File([blobFile], fileName, { type: blobFile.type }));
  </code></pre>
  
  <p>When I look at the response from the first call (<code>then(r =&gt; r.blob()</code>) I get something like this:
  <a href="https://i.stack.imgur.com/Q7HCP.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Q7HCP.jpg" alt="enter image description here"></a></p>
  
  <p>I assume this is because the image can't be displayed in the console, but when I try to call "r.blob()" I get this:</p>
  
  <blockquote>
    <p>r.blob is not a function</p>
  </blockquote>
  
  <p><strong>How can I change my axios call to work like the fetch call above?</strong></p>
  
  <p>Side note: I don't know which file type my response will have (except that it's an image), so it could be a png, jpg, gif etc.</p>