A sample file upload in javascript to the Box API

sampleBoxFileUpload.js

// Requires JQuery and CORS enabled for the Origin you're testing from.
// Uncomment the next 4 lines to import JQuery
// var script= document.createElement('script');
// script.type= 'text/javascript';
// script.src= '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js';
// document.head.appendChild(script);

// Set up the multipart form using HTML5 FormData object
// https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData
var form = new FormData();

// The content of the file
var fileBody = '<p>hey!<p>';

// JS file-like object
var blob = new Blob([fileBody], { type: 'text/xml'});

// Add the file to the form
form.append('file', blob);

// Add the destination folder for the upload to the form
form.append('parent_id', '0');

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

// The Box OAuth 2 Header. Add your access token.
var headers = {
    Authorization: 'Bearer YOUR_ACCESS_TOKEN'
};

$.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);
});

Hi Sean,
One quick question. What if i want to load multiple files at a time ? I guess the browser hangs if i try to do that in a loop.

Box uses the one API key for all actions. So if you display this key and also use it to store sensitive data, you're essentially giving people the keys to your secure vault.

I am running into CORS issues when trying to enable jQuery.ajax() file upload using this very script. I receive a 201 response status, and the file is uploaded to the target Box folder, but a CORS error is thrown because there is no Access-Control-Allow-Origin header containing the domain specified in my Box app settings. The preflight operation returns a 200 and the Access-Control-Allow-Origin header, but the actual upload operation omits the header. Am I missing something obvious, or does this deserve clarification/fixing?

For what it's worth, I've got the same issue as @brianmacarthur, but using Angular $http - preflight appears to come back OK, but no A-C-A-O header on the POST...

@joshorvis: I should have followed up with my solution. It took a few days of head scratching to figure out that just because a Box app is created doesn't mean that CORS is enabled on the app's domain. CORS capabilities have to be separately requested from Box support after setting up the app. I think the documentation could be a little more specific about that critical detail, but customer support activated my domain very quickly once I requested it.

Hi All, does this method work for following file formats.

• Microsoft Office Files (Word, PowerPoint, Excel)
• Adobe PDF Files (.PDF)
• Image Files (.JPG, .PNG, *.JPEG, *.JPE, *.BMP, *.TIFF, *.GIF, etc…)
• High Resolution Videos (.mpeg, .MOV, etc…)
• Compressed files (.zip )

we cannot use traditional upload method due to size concerns. So can we use this JS method to directly upload these to box.

@brianmacarthur, I continue to have this issue even after having support enable CORS. I posted my situation here, would you mind taking a look to see if you notice anything different than your solution?

Thanks a lot , it really works for me.

Hello, how do I set a name for the File? ti is always uploading as "blob".
Thanks!

@pipeflo

form.append('attributes', `{"name":"mysampleblob", "parent": {"id": "0"}}`);

I am getting CORS and 400 error, is there any solution for this...

I'm getting 500 Form Too Large.