Stripe Browser-Only File Upload

by Andrew Nelder

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div>
  <form method="post" id="file-upload" ajax="true">
    <label>File URL:</label>
    <br>
    <input type="text" id="file-route" name="path" value="//i.imgur.com/ZUjaAKh.jpg" size=30 required />
    <input type="submit" value="Fetch and Upload" />
  </form>
</div>

<div>
  <div id='label-results'></div>
  <pre id="upload-results"></pre>
</div>

JavaScript

var publishableKey = "pk_test_xxx";  // Platform Publishable Key
var stripeAccount = "acct_xxx";  // Connected Account ID

$(document).ready(function () {
	$('#file-upload').on('submit', function (e) {
  	e.preventDefault();
    
    console.log('Clicked!');
    
		var route = $('#file-route').val();
    var fname = route.split("/").slice(-1)[0].split("?")[0];
    
    var blob = fetchBlob(route, fname, uploadBlob);
    
  });
});

function fetchBlob(route, fname, uploadBlob) {
	
  console.log('Fetching...')

  var oReq = new XMLHttpRequest();
  oReq.open("GET", route, true);
  oReq.responseType = "blob";
  oReq.onload = function(e) {
    var blob = oReq.response;
    console.log('Fetched!')
		uploadBlob(fname, blob);
  };
  oReq.send();

}

function uploadBlob(fname, blob) {

  var fd = new FormData();
  fd.append('file', blob);
  fd.append('purpose', 'identity_document');

	console.log('Uploading...');

	$.ajax({
    url: 'https://uploads.stripe.com/v1/files',
    data: fd,
    headers: {
      'Authorization': 'Bearer ' + publishableKey,
      'Stripe-Account': stripeAccount
    },
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
  }).done(function(data) {
	  console.log('Uploaded!')
    $('#label-results').text('Success!');
    $('#upload-results').text(JSON.stringify(data, null, 3));
  }).fail(function(response, type, message) {
    $('#label-results').text('Failure: ' + type + ', ' + message);
    $('#upload-results').text(JSON.stringify(response.responseJSON, null, 3));
  });

}