JSFiddle - React, Tailwind, and code Playground

by David Simpson

HTML

<p>
Run at <a target="_top" href="http://jsfiddle.net/dvdsmpsn/u1h7mfam/">http://jsfiddle.net/dvdsmpsn/u1h7mfam/</a>
</p>
<!--
<form>
   <p>
    <input id=token placeholder="Paste token here">
  </p>

  <p>
    <input id=file type=file multiple>
  </p>
</form>
   -->

CSS

body {
  padding: 20px;
}
p {
  margin: 20px 0;
}

JavaScript

var self = this,
    access_token = 'YOLB8EkOOVlf1ePOXn4ugrM8n1ZnIq0M',
    parentFolderId = '366734983';

// see https://blog.box.com/blog/uploading-files-with-cors/
var form = new FormData();
var fileBody = '<p>hey!<p>'; // The content of the file
var blob = new Blob([fileBody], { type: 'text/xml'}); // JS file-like object
form.append('file', blob); // Add the file to the form
form.append('parent_id', '0'); // Add the destination folder for the upload to the form

var uploadUrl = 'https://upload.box.com/api/2.0/files/content';

// The Box OAuth 2 Header. Add your access token.
var headers = {
  'Authorization': 'Bearer ' + access_token,
  'Access-Control-Allow-Origin': 'http://fiddle.jshell.net'
};
     
$.ajax({
    url: uploadUrl,
    headers: headers,
    type: 'POST',
    // This prevents JQuery from trying to append the form as a querystring
    processData: false,
    contentType: false,
    data: form
}).complete(function ( data ) {
    // Log the JSON response to prove this worked
    console.log(data.responseText);
});        

/*
$('#file').change(function (e) {

	console.log(self.files.length + " files:", self.files);   
  
	for (var i=0; i < self.files.length; i++) {
  
  	// see: https://docs.box.com/reference#upload-a-file
  	// curl https://upload.box.com/api/2.0/files/content \
    //   -H "Authorization: Bearer ACCESS_TOKEN" -X POST \
    //  -F attributes='{"name":"tigers.jpeg", "parent":{"id":"11446498"}}' \
    //  -F [email protected]
    $.ajax({
      url: 'https://upload.box.com/api/2.0/files/content',
      type: 'POST',
      data: { 
      	name: self.files[i].name,
        parent: {
        	id: parentFolderId
        }
      },
      // TODO: push the file content too.
      beforeSend : function( xhr ) {
        xhr.setRequestHeader( "Authorization", "BEARER " + access_token );
        // xhr.setRequestHeader('Access-Control-Allow-Origin', 'http://fiddle.jshell.net/');
        xhr.setRequestHeader('Access-Control-Allow-Origin',...