-
-
Save seanrose/5570650 to your computer and use it in GitHub Desktop.
// 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 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!
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.
@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.