The Box Content Uploader UI Element allows developers to embed an upload widget
in their desktop or mobile web application. Users can select files or use drag
and drop to upload. Large files will be uploaded with the API.
The UI Elements are designed in an authentication agnostic way so whether
you are using UI Elements for users who have Box accounts (Managed Users) or
non-Box accounts (App Users), UI Elements should work out of the box. The
reason for this is that UI Elements only expect a “token” to be passed in for
authentication, and Box provides two different ways to generate tokens - OAuth
and JWT.
Access TokenThese demos may not fully function until you provide a valid access token. For
testing purposes, you can use your temporary developer token. This will need
to be updated under the JS tab in the demo.
Box Folder ID. This will be the ID of the folder from which you want files to be uploaded to. If you want to use the Box All Files folder, then use 0 as the folderId.
accessToken
String
Box API access token to use. This should have upload access to the folder above.
CSS selector of the container in which the content uploader should be placed. Calling hide() will clear out this container.
sharedLink
String
Shared link URL, required if folder is shared and the access token doesn’t belong to an owner or collaborator of the file.
sharedLinkPassword
String
Shared link password, required if shared link has a password.
onClose
Function
Callback function for ‘Close’ button, which will appear when there are no files to upload or when all uploads are complete. If this option is set to null the button will not appear.
modal
Object
When the modal attribute is specified, then the content uploader will not be created in-place. Instead a button will be created in the container and clicking this button will launch the content uploader in a modal popup. See below for the modal options.
size
String
undefined
Indicates to the content uploader to fit within a small or large width container. Value can be absent or one of small or large. If absent the UI Element will adapt to its container and automatically switch between small width or large width mode.
isTouch
Boolean
Defaults to the browser and device’s default touch support
Indicates to the content explorer that it is being rendered on a touch enabled device.
fileLimit
Number
100
The maximum number of files that can be uploaded at once. If more than fileLimit files are selected for upload, any beyond the first fileLimit files will not be included for upload. A warning message will be shown in the footer when this happens.
requestInterceptor
Function
Function to intercept requests. For an example see . Our underlying XHR library is axios.js and we follow a .
responseInterceptor
Function
Function to intercept responses. For an example see . Our underlying XHR library is axios.js and we follow a .
If your application requires the end user to only be able to access a subset of
the Content Uploader functionality, you can use to
appropriately downscope the Access Token to a resulting token that has the
desired set of permissions, and can thus, be securely passed to the end user
client initializing the Content Uploader.Below are a set of UI Element-specific scopes to go alongside Downscoping. These
allow developers to enable/disable UI controls on the Content Uploader by
configuring the appropriate scopes on the downscoped token. To learn
more, see .
{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"Box Dev Docs","description":"Box for Developers: guides, API reference, SDKs, and tutorials for building content management, Box AI, and enterprise integrations.","colors":{"primary":"#0061d5","light":"#f6fafd","dark":"#002947"},"logo":{"light":"https://mintcdn.com/box/lJLw9z7FWORNWMcq/logo/boxdev-light.png?fit=max\u0026auto=format\u0026n=lJLw9z7FWORNWMcq\u0026q=85\u0026s=a11710b698ff59d24426f9ecec6c7e9c","dark":"https://mintcdn.com/box/siVVIgx7pBuvW4ua/logo/boxdev-dark.svg?fit=max\u0026auto=format\u0026n=siVVIgx7pBuvW4ua\u0026q=85\u0026s=0e34af393abb1b8c024258d684bb7732"},"favicon":"https://mintcdn.com/box/T2hwpVFBJMA4eeDs/favicon.ico?fit=max\u0026auto=format\u0026n=T2hwpVFBJMA4eeDs\u0026q=85\u0026s=2a2efcc60e46eca7ee3ebbe650c47350","api":{"examples":{"languages":["curl","python","node","swift","java",".Net"],"autogenerate":false}},"seo":{"metatags":{"google-site-verification":"fuelbNhVR1kQluNBJjYt4K1Hj5HvJLhLnIq0o9CAY9E"}},"fonts":{"family":"Inter"},"contextual":{"options":[{"title":"Install Box Agent Skills","description":"Add Box plugins to your AI assistants","icon":"sparkles","href":"/ai/agent-skills"},"cursor","vscode","mcp","chatgpt","claude","perplexity","copy","view"],"display":"header"},"metadata":{"timestamp":true},"styling":{"latex":false},"navigation":{"languages":[{"language":"en","banner":{"content":"Join BoxWorks Dev Summit on Nov 5-6, San Francisco and dive into AI agents and unstructured content. [See agenda](https://boxworks.box.com/series/boxworks-2026-dev-summit/landing_page).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"Resources","items":[{"label":"Newsletter unsubscribe","href":"https://go.box.com/preferences.html"},{"label":"Terms of Use","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"Privacy Policy","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookie Notification","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"Log in","type":"button"}],"primary":{"type":"button","label":"Get started for free","href":"https://account.box.com/signup/developer"}},"href":""},{"language":"ja","banner":{"content":"Join BoxWorks Dev Summit on Nov 5-6, San Francisco and dive into AI agents and unstructured content. [See agenda](https://boxworks.box.com/series/boxworks-2026-dev-summit/landing_page).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"リソース","items":[{"label":"ニュースレターの登録解除","href":"https://go.box.com/preferences.html"},{"label":"利用規約","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"個人情報保護方針","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookieに関する通知","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"ログイン","type":"button"}],"primary":{"type":"button","label":"今すぐ無料で開始","href":"https://account.box.com/signup/developer"}},"href":"ja"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"box","hasAudioNarration":false,"actualSubdomain":"box","customDomains":["developer.box.com"],"gitSource":{"type":"github","owner":"box","repo":"box-mintlify","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae399959b38aee1e6cb4c05","collectionId":"379c1cab-82c1-4555-bb3f-9f8521fc3dcb","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae399959b38aee1e6cb4c05"},"feedback":{"thumbs":true,"issues":false},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae399959b38aee1e6cb4c05","clientVersion":"0.0.4021","searchFilterCounts":[{"language":"en","tag":"API reference","count":680},{"language":"ja","tag":"APIリファレンス","count":636},{"language":"ja","tag":"ホーム","count":368},{"language":"en","tag":"Home","count":302},{"language":"ja","tag":"AI","count":191},{"language":"en","tag":"AI","count":177},{"language":"ja","tag":"コラボレーション","count":81},{"language":"ja","tag":"ツール","count":77},{"language":"ja","tag":"開発ツール","count":77},{"language":"ja","tag":"メタデータと検索","count":67},{"language":"en","tag":"Tools","count":62},{"language":"en","tag":"Dev tools","count":62},{"language":"ja","tag":"コンテンツ","count":58},{"language":"en","tag":"Metadata \u0026 search","count":56},{"language":"en","tag":"Collaboration","count":50},{"language":"en","tag":"Content","count":49},{"language":"ja","tag":"メタデータ","count":49},{"language":"en","tag":"Supported AI models","count":47},{"language":"en","tag":"v2026.0","count":47},{"language":"ja","tag":"サポートされているAIモデル","count":46}]},"assistantConfig":{"enableAskAiButton":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"styles.css","content":"a code{border-bottom-color:none!important}.prose :where(a code):not(:where([class~=\"not-prose\"], [class~=\"not-prose\"] *)){color:inherit;font-weight:inherit;text-decoration:none;text-decoration-color:rgb(var(--primary));text-underline-offset:0;text-decoration-thickness:1px}#consent_blackbar{position:relative;z-index:9999999!important}#sidebar,.left-0.right-0.sticky.sm\\:px-4.pb-4.sm\\:pb-6.bottom-0.pt-1.flex.flex-col.items-center.w-full.overflow-hidden.z-20{z-index:1}#footer>div,#sidebar-content{z-index:0}a.nav-anchor img[src$=\"/images/sidebar/box.svg\"]{background-color:transparent!important}#truste-consent-track{z-index:9999999!important;position:fixed!important}.dark #truste-consent-track{background-color:#151f26!important;border-color:#1a1a1a}.dark #truste-show-consent{background-color:#fff;color:#151f26}.dark #truste-consent-text{color:#fff}#truste-consent-content{max-width:1400px}.homepage_container .card img{max-height:200px}.homepage_container h1 span,.homepage_container h2 span{margin:auto}#navbar .max-w-8xl.mx-auto.relative button .ml-4.flex.text-sm.leading-6.whitespace-nowrap.min-w-0.space-x-3.overflow-hidden,header#header .eyebrow{display:none!important}.sidebar-group-header:has(+.sidebar-group>li:is(\n [id=\"/reference\"],\n [id=\"/ja/reference\"],\n [id=\"/ja/reference/v2025.0\"],\n [id=\"/ja/reference/v2026.0\"]\n))>.sidebar-title{display:none}footer div.flex.gap-4.flex-col.md\\:flex-row.md\\:items-center.md\\:gap-8.md\\:justify-center{flex-wrap:wrap}footer div.flex.gap-4.flex-col.md\\:flex-row.md\\:items-center.md\\:gap-8.md\\:justify-center a{white-space:nowrap;text-overflow:clip;overflow:visible;align-self:start;flex-shrink:0;cursor:pointer!important}#google-preferred-source-column{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;width:max-content;max-width:100%}#google-preferred-source{display:flex;justify-content:flex-end;width:auto;margin:0;padding-top:16px}.google-preferred-source-button{appearance:none;margin:0;padding:0;border:0;background:0 0;line-height:0;cursor:pointer}.google-preferred-source-badge{display:block;width:140px;max-width:100%;height:auto}.dark .google-preferred-source-badge--light,.google-preferred-source-badge--dark{display:none}.dark .google-preferred-source-badge--dark{display:block}.nav-logo{min-width:109px}.badge-guide,.badge-quickstart,.badge-tutorial,.dark .badge-guide,.dark .badge-quickstart,.dark .badge-tutorial{background-color:#1f2937;color:#fff}.badge-get{background-color:rgb(74 222 128/.2);color:#15803d}.dark .badge-get{color:#4ade80}.badge-post{background-color:rgb(96 165 250/.2);color:#1d4ed8}.dark .badge-post{color:#60a5fa}.badge-patch,.badge-put{background-color:rgb(250 204 21/.2);color:#a16207}.dark .badge-patch,.dark .badge-put{color:#facc15}.badge-delete{background-color:rgb(248 113 113/.2);color:#b91c1c}.dark .badge-delete{color:#f87171}.badge-api{background-color:#e3f2fd;color:#0d47a1}.dark .badge-api{background-color:#0d47a1;color:#bbdefb}.badge-documentation,.badge-reference,.dark .badge-documentation,.dark .badge-reference{background-color:#000;color:#fff}.badge-default{background-color:#f5f5f5;color:#424242}.badge-group{display:inline-flex;gap:.5rem;flex-wrap:wrap}.dark .badge-default{background-color:#424242;color:#e0e0e0}.update>div:first-child>div:nth-child(3){padding:0;order:4}.update>div:first-child>div:nth-child(3)>span{display:flex;padding:.25rem .75rem;align-items:center;border-radius:9999px;font-size:.875rem;line-height:1.25rem;color:#374151;background-color:#f3f4f6}.dark .update>div:first-child>div:nth-child(3)>span{color:#cecece;background-color:#161616}.update>div:first-child>div:nth-child(4){order:3}div#banner a{text-decoration:none!important;color:#fff;font-weight:600}nav ul #topbar-cta-button a span,nav ul .navbar-link a{border-radius:50px!important}nav ul #topbar-cta-button a span{background-color:#0061d5}#topbar-cta-button a:hover span{opacity:1!important;background-color:#146bd5}.dark #topbar-cta-button a:hover span{opacity:1!important;background-color:#0058c3}.signup-cta-button,.signup-cta-button:active,.signup-cta-button:focus,.signup-cta-button:hover{background-color:#0061d5;border-radius:50px!important;transition:background-color .2s!important;box-shadow:none!important;transform:none!important;border:0!important;border-bottom:none!important;text-decoration:none!important;outline:0!important}.signup-cta-button:hover{background-color:#146bd5!important;opacity:1!important}.dark .signup-cta-button:hover{background-color:#0058c3!important;opacity:1!important}.homepage-secondary-button,.homepage-secondary-button:active,.homepage-secondary-button:focus,.homepage-secondary-button:hover{border-radius:50px!important;border:1px solid #d1d5db!important;background-color:transparent!important;color:#1f2937!important;transition:background-color .2s!important;box-shadow:none!important;transform:none!important;text-decoration:none!important;outline:0!important}.homepage-secondary-button:hover{background-color:#f9fafb!important}.dark .homepage-secondary-button,.dark .homepage-secondary-button:active,.dark .homepage-secondary-button:focus{border-color:#4b5563!important;color:#e5e7eb!important}.dark .homepage-secondary-button:hover{background-color:#1f2937!important}.signup-cta-login,.signup-cta-login:active,.signup-cta-login:focus,.signup-cta-login:hover{text-decoration:none!important;border-bottom:none!important}#content-area h1,#content-area h2,#content-area h3,#content-area h4,#content-area h5,#content-area h6{font-weight:600!important}#content-area h1{font-size:32px!important}.dark img[src*=\"guides-box-ai-ai-models/claude.svg\"],.dark img[src*=\"guides-box-ai-ai-models/gemini.svg\"],.dark img[src*=\"guides-box-ai-ai-models/grok.svg\"],.dark img[src*=\"guides-box-ai-ai-models/meta.svg\"],.dark img[src*=\"guides-box-ai-ai-models/mistral.svg\"],.dark img[src*=\"guides-box-ai-ai-models/openai.svg\"]{filter:invert(1)}.homepage_h2{font-size:28px!important}.chat-assistant-floating-input{z-index:1!important}"}],"page":{"pagePath":"guides/embed/ui-elements/uploader","slug":"/guides/embed/ui-elements/uploader","pageMetadata":{"title":"Content Uploader","description":null,"href":"/guides/embed/ui-elements/uploader"},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];const Link=({href,children,className,...props})=>{const _components={a:`a`,..._provideComponents()};const localizedHref=localizeLink(href);return _jsx(_components.a,{href:localizedHref,className,...props,children})};const MultiRelatedLinks=({sections=[]})=>{const{RelatedLinks}=_provideComponents()||{};if(!RelatedLinks)_missingMdxReference(`RelatedLinks`,true);if(!sections||sections.length===0){return null}return _jsx(`div`,{className:`mint-space-y-8`,children:sections.map((section,index)=>_jsx(RelatedLinks,{title:section.title,items:section.items},index))})};const RelatedLinks=({title,items=[]})=>{const _components={a:`a`,..._provideComponents()};const getBadgeClass=badge=>{if(!badge)return`badge-default`;const badgeType=badge.toLowerCase().replace(/\\s+/g,`-`);return`badge-${badge===`ガイド`?`guide`:badgeType}`};if(!items||items.length===0){return null}return _jsxs(`div`,{className:`mint-my-8`,children:[_jsx(`h3`,{className:`mint-text-sm mint-font-bold mint-uppercase mint-tracking-wider mint-mb-4`,children:title}),_jsx(`div`,{className:`mint-flex mint-flex-col mint-gap-3`,children:items.map((item,index)=>_jsxs(_components.a,{href:item.href,className:`mint-py-2 mint-px-3 mint-rounded related_link hover:mint-bg-[#f2f2f2] dark:hover:mint-bg-[#111827] mint-flex mint-items-center mint-gap-3 group mint-no-underline hover:mint-no-underline mint-border-b-0`,children:[_jsx(`span`,{className:`mint-px-2 mint-py-1 mint-rounded-full mint-text-xs mint-font-semibold mint-uppercase mint-tracking-wide mint-flex-shrink-0 ${getBadgeClass(item.badge)}`,children:item.badge}),_jsx(`span`,{className:`mint-text-base`,children:item.label})]},index))})]})};function _createMdxContent(props){const _components={code:`code`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,..._provideComponents(),...props.components},{Card,CodeBlock,Heading,Info,OptimizedFrame,Table,_MdxComponentBoundary}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Info)_missingMdxReference(`Info`,true);if(!OptimizedFrame)_missingMdxReference(`OptimizedFrame`,true);if(!Table)_missingMdxReference(`Table`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsx(_MdxComponentBoundary,{name:`RelatedLinks`,children:_jsx(RelatedLinks,{title:`REQUIRED GUIDES`,items:[{label:translate(`Installation`),href:`/guides/embed/ui-elements/installation`,badge:`GUIDE`}]})}),`\n`,_jsxs(_components.p,{children:[`The Box Content Uploader UI Element allows developers to embed an upload widget\nin their desktop or mobile web application. Users can select files or use drag\nand drop to upload. Large files will be uploaded with the `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/reference/post-files-upload-sessions`,children:`Chunked\nUpload`})}),` API.`]}),`\n`,_jsx(Heading,{level:`2`,id:`installation`,children:`Installation`}),`\n`,_jsxs(_components.p,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/installation`,children:`Learn how to install`})}),` Box UI elements\neither through NPM or the Box CDN.`]}),`\n`,_jsx(Heading,{level:`2`,id:`authentication`,children:`Authentication`}),`\n`,_jsx(_components.p,{children:`The UI Elements are designed in an authentication agnostic way so whether\nyou are using UI Elements for users who have Box accounts (Managed Users) or\nnon-Box accounts (App Users), UI Elements should work out of the box. The\nreason for this is that UI Elements only expect a “token” to be passed in for\nauthentication, and Box provides two different ways to generate tokens - OAuth\nand JWT.`}),`\n`,_jsx(Card,{href:localizeLink(`/guides/authentication`),arrow:true,title:`Compare authentication methods`}),`\n`,_jsx(Heading,{level:`2`,id:`demo`,children:`Demo`}),`\n`,_jsx(Heading,{level:`3`,id:`uploader`,children:`Uploader`}),`\n`,_jsx(OptimizedFrame,{height:`560`,scrolling:`no`,title:`Box Content Uploader`,src:`//codepen.io/box-platform/embed/QvqGwr/?height=560\u0026theme-id=27216\u0026default-tab=result\u0026embed-version=2\u0026editable=true`,frameborder:`no`,allowtransparency:`true`,allowfullscreen:`true`,style:{width:`100%`}}),`\n`,_jsx(Heading,{level:`3`,id:`uploader-as-popup`,children:`Uploader as popup`}),`\n`,_jsx(OptimizedFrame,{height:`560`,scrolling:`no`,title:`Box File Picker and Uploader as popups`,src:`//codepen.io/box-platform/embed/oWEKdq/?height=560\u0026theme-id=27216\u0026default-tab=result\u0026embed-version=2\u0026editable=true`,frameborder:`no`,allowtransparency:`true`,allowfullscreen:`true`,style:{width:`100%`}}),`\n`,_jsxs(Info,{children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Access Token`})}),_jsx(_components.p,{children:`These demos may not fully function until you provide a valid access token. For\ntesting purposes, you can use your temporary developer token. This will need\nto be updated under the JS tab in the demo.`})]}),`\n`,_jsx(Heading,{level:`2`,id:`api`,children:`API`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`51`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`51`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:`ContentUploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` Box`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` uploader`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` ContentUploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`/**`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * Shows the content uploader.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` *`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@public`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {String}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` folderId`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` - Folder ID to upload to.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {String}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` accessToken`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` - Box API access token.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {Object|void}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` [options]`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` - Optional options.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@return`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {void}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` */`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`uploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`show`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`folderId`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`accessToken`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`options`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`/**`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * Hides and clears HTML for the uploader.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` *`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@public`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@return`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {void}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` */`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`uploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`hide`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`/**`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * Adds an event listener to the content uploader.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * Listeners should be added before calling show()`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * so no events are missed.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` *`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@public`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {String}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` eventName`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` Name of the event.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {Function}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` listener`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` Callback function.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@return`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {void}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` */`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`uploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`addListener`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`eventName`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`listener`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`/**`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * Removes an event listener from the content uploader.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` *`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@public`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {String}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` eventName`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` Name of the event.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@param`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {Function}`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` listener`}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` Callback function.`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@return`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {void}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` */`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`uploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`removeListener`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`eventName`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`listener`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`/**`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * Removes all event listeners from the content uploader.`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` *`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@public`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` * `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`@return`}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#4EC9B0`},children:` {void}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` */`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`uploader`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`removeAllListeners`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`parameters`,children:`Parameters`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Parameter`}),_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`folderId`})}),_jsx(_components.td,{children:`String`}),_jsxs(_components.td,{children:[`Box Folder ID. This will be the ID of the folder from which you want files to be uploaded to. If you want to use the Box All Files folder, then use `,_jsx(_components.code,{children:`0`}),` as the `,_jsx(_components.code,{children:`folderId`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`accessToken`})}),_jsx(_components.td,{children:`String`}),_jsx(_components.td,{children:`Box API access token to use. This should have upload access to the folder above.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`options`})}),_jsx(_components.td,{children:`Object`}),_jsx(_components.td,{children:`Optional options. See below for details.`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`options`,children:`Options`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Parameter`}),_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Default`}),_jsx(_components.th,{children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`container`})}),_jsx(_components.td,{children:`String`}),_jsx(_components.td,{children:_jsx(_components.code,{children:`document.body`})}),_jsxs(_components.td,{children:[`CSS selector of the container in which the content uploader should be placed. Calling `,_jsx(_components.code,{children:`hide()`}),` will clear out this container.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`sharedLink`})}),_jsx(_components.td,{children:`String`}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Shared link URL, required if folder is shared and the access token doesn’t belong to an owner or collaborator of the file.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`sharedLinkPassword`})}),_jsx(_components.td,{children:`String`}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Shared link password, required if shared link has a password.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`onClose`})}),_jsx(_components.td,{children:`Function`}),_jsx(_components.td,{}),_jsxs(_components.td,{children:[`Callback function for ‘Close’ button, which will appear when there are no files to upload or when all uploads are complete. If this option is set to `,_jsx(_components.code,{children:`null`}),` the button will not appear.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`modal`})}),_jsx(_components.td,{children:`Object`}),_jsx(_components.td,{}),_jsx(_components.td,{children:`When the modal attribute is specified, then the content uploader will not be created in-place. Instead a button will be created in the container and clicking this button will launch the content uploader in a modal popup. See below for the modal options.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`size`})}),_jsx(_components.td,{children:`String`}),_jsx(_components.td,{children:_jsx(_components.code,{children:`undefined`})}),_jsxs(_components.td,{children:[`Indicates to the content uploader to fit within a small or large width container. Value can be absent or one of `,_jsx(_components.code,{children:`small`}),` or `,_jsx(_components.code,{children:`large`}),`. If absent the UI Element will adapt to its container and automatically switch between small width or large width mode.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`isTouch`})}),_jsx(_components.td,{children:`Boolean`}),_jsx(_components.td,{children:`Defaults to the browser and device’s default touch support`}),_jsx(_components.td,{children:`Indicates to the content explorer that it is being rendered on a touch enabled device.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`fileLimit`})}),_jsx(_components.td,{children:`Number`}),_jsx(_components.td,{\"data-numeric\":`true`,children:`100`}),_jsxs(_components.td,{children:[`The maximum number of files that can be uploaded at once. If more than `,_jsx(_components.code,{children:`fileLimit`}),` files are selected for upload, any beyond the first `,_jsx(_components.code,{children:`fileLimit`}),` files will not be included for upload. A warning message will be shown in the footer when this happens.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`requestInterceptor`})}),_jsx(_components.td,{children:`Function`}),_jsx(_components.td,{}),_jsxs(_components.td,{children:[`Function to intercept requests. For an example see `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`https://codepen.io/box-platform/pen/jLdxEv`,children:`this CodePen`})}),`. Our underlying XHR library is `,_jsx(_components.code,{children:`axios.js`}),` and we follow a `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`https://github.com/axios/axios#interceptors`,children:`similar approach for interceptors`})}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`responseInterceptor`})}),_jsx(_components.td,{children:`Function`}),_jsx(_components.td,{}),_jsxs(_components.td,{children:[`Function to intercept responses. For an example see `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`https://codepen.io/box-platform/pen/jLdxEv`,children:`this CodePen`})}),`. Our underlying XHR library is `,_jsx(_components.code,{children:`axios.js`}),` and we follow a `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`https://github.com/axios/axios#interceptors`,children:`similar approach for interceptors`})}),`.`]})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`modal-options`,children:`Modal Options`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Parameter`}),_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Default`}),_jsx(_components.th,{children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`buttonLabel`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`String`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Label for the button`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`buttonClassName`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`String`})}),_jsx(_components.td,{children:`Box Blue Button`}),_jsx(_components.td,{children:`CSS class to decorate the button`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`modalClassName`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`String`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`CSS class to decorate the modal popup content`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`overlayClassName`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`String`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`CSS class to decorate the modal popup overlay`})]})]})]}),`\n`,_jsx(Heading,{level:`3`,id:`events`,children:`Events`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Event Name`}),_jsx(_components.th,{children:`Event Data`}),_jsx(_components.th,{children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`close`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Will be fired when ‘Close’ button is clicked.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`complete`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`Array\u003cFile>`})}),_jsx(_components.td,{children:`Will be fired when all uploads in the current view are complete. Event data will be an array of File Object.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`upload`})}),_jsx(_components.td,{children:`File`}),_jsx(_components.td,{children:`Fired when a single file is successfully uploaded. Event data will be a File Object.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`error`})}),_jsx(_components.td,{children:`Object`}),_jsx(_components.td,{children:`Fired when a single file has an upload error. Event data will be an object with properties file from the File Web API and the error object error.`})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`scopes`,children:`Scopes`}),`\n`,_jsxs(_components.p,{children:[`If your application requires the end user to only be able to access a subset of\nthe Content Uploader functionality, you can use `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/authentication/tokens/downscope`,children:`Downscoping`})}),` to\nappropriately downscope the Access Token to a resulting token that has the\ndesired set of permissions, and can thus, be securely passed to the end user\nclient initializing the Content Uploader.`]}),`\n`,_jsxs(_components.p,{children:[`Below are a set of UI Element-specific scopes to go alongside Downscoping. These\nallow developers to enable/disable UI controls on the Content Uploader by\nconfiguring the appropriate scopes on the downscoped token. To learn\nmore, see `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/api-calls/permissions-and-errors/scopes`,children:`Dedicated Scopes for Box UI Elements`})}),`.`]}),`\n`,_jsx(Heading,{level:`3`,id:`base-scope`,children:`Base Scope`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Scope Name`}),_jsx(_components.th,{children:`Permissions granted`})]})}),_jsx(_components.tbody,{children:_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`base_upload`})}),_jsx(_components.td,{children:`Allows upload into the folder specified under “resource” of the Token Exchange request.`})]})})]}),`\n`,_jsx(Heading,{level:`3`,id:`sample-scenarios`,children:`Sample Scenarios`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Scenario`}),_jsx(_components.th,{children:`Scopes`})]})}),_jsx(_components.tbody,{children:_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`User wants to upload files to a Box folder`}),_jsx(_components.td,{children:_jsx(_components.code,{children:`base_upload`})})]})})]}),`\n`,_jsx(_MdxComponentBoundary,{name:`RelatedLinks`,children:_jsx(RelatedLinks,{title:`RELATED GUIDES`,items:[{label:translate(`UI Elements`),href:`/guides/embed/ui-elements/index`,badge:`GUIDE`}]})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{Link,MultiRelatedLinks,RelatedLinks,default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Content Uploader","description":null,"href":"/guides/embed/ui-elements/uploader"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[140,1795,")=>null;const MultiRelatedLinks=()=>null;const RelatedLinks=()=>null;function _c"],[2581,2683,""],[3919,3975,"``,arrow:true,title:"],[32278,32372,""]]},"mdxExtracts":{"tableOfContents":[{"title":"Installation","slug":"installation","depth":2,"children":[]},{"title":"Authentication","slug":"authentication","depth":2,"children":[]},{"title":"Demo","slug":"demo","depth":2,"children":[{"title":"Uploader","slug":"uploader","depth":3,"children":[]},{"title":"Uploader as popup","slug":"uploader-as-popup","depth":3,"children":[]}]},{"title":"API","slug":"api","depth":2,"children":[{"title":"Parameters","slug":"parameters","depth":3,"children":[]},{"title":"Options","slug":"options","depth":3,"children":[]},{"title":"Modal Options","slug":"modal-options","depth":3,"children":[]},{"title":"Events","slug":"events","depth":3,"children":[]}]},{"title":"Scopes","slug":"scopes","depth":2,"children":[{"title":"Base Scope","slug":"base-scope","depth":3,"children":[]},{"title":"Sample Scenarios","slug":"sample-scenarios","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/box/523776d2eff70e58/scripts/cookie-banner.js","/_mintlify/custom/box/e597cec886c1778e/scripts/locale-links.js","/_mintlify/custom/box/37b2f846ed414abc/snippets/choose-choice-simple.js","/_mintlify/custom/box/78fc14bb599966cb/scripts/locale-footer-combined.js","/_mintlify/custom/box/9a429216167d598a/scripts/analitics.js","/_mintlify/custom/box/2f463a090bfcd0e8/snippets/boxIntl.js","/_mintlify/custom/box/d88c3906cf95ec86/snippets/translations.js","/_mintlify/custom/box/d67e74fc334b686a/scripts/preferred-source.js"],"dynamicCss":".mint-my-8 {\n margin-top: 2rem;\n margin-bottom: 2rem\n}\n.mint-mb-4 {\n margin-bottom: 1rem\n}\n.mint-flex {\n display: flex\n}\n.mint-flex-shrink-0 {\n flex-shrink: 0\n}\n.mint-flex-col {\n flex-direction: column\n}\n.mint-items-center {\n align-items: center\n}\n.mint-gap-3 {\n gap: 0.75rem\n}\n.mint-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse))\n}\n.mint-rounded {\n border-radius: 0.25rem\n}\n.mint-rounded-full {\n border-radius: 9999px\n}\n.mint-border-b-0 {\n border-bottom-width: 0px\n}\n.mint-px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem\n}\n.mint-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\n}\n.mint-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n.mint-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n.mint-text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n.mint-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n.mint-text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n.mint-font-bold {\n font-weight: 700\n}\n.mint-font-semibold {\n font-weight: 600\n}\n.mint-uppercase {\n text-transform: uppercase\n}\n.mint-tracking-wide {\n letter-spacing: 0.025em\n}\n.mint-tracking-wider {\n letter-spacing: 0.05em\n}\n.mint-no-underline {\n text-decoration-line: none\n}\n.hover\\:mint-bg-\\[\\#f2f2f2\\]:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1))\n}\n.hover\\:mint-no-underline:hover {\n text-decoration-line: none\n}\n.dark\\:hover\\:mint-bg-\\[\\#111827\\]:hover:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))\n}","subdomain":"box","siteName":"Box Dev Docs","title":"Content Uploader - Box Dev Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/guides/embed/ui-elements/uploader","matchLevel":0},"ja":{"href":"/ja/guides/embed/ui-elements/uploader","matchLevel":1}}},"lastModified":"2026-10-29T19:09:37.525Z","gitLastModified":"2026-09-10T09:31:34.000Z","originalFileLocation":"guides/embed/ui-elements/uploader.mdx","locale":"en"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"application-name\" content=\"Box Dev Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Content Uploader - Box Dev Docs\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Box Dev Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://developer.box.com/guides/embed/ui-elements/uploader\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://box.mintlify.app/_mintlify/api/og/v2?division=Box+UI+Elements\u0026amp;title=Content+Uploader\u0026amp;theme=7c006b8b877970d319badcf9\u0026amp;signature=7bb11e63327476ecab262892fa78af9b4e4986bd5417bb4a2e65f4cd74f11685\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Content Uploader - Box Dev Docs\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://box.mintlify.app/_mintlify/api/og/v2?division=Box+UI+Elements\u0026amp;title=Content+Uploader\u0026amp;theme=7c006b8b877970d319badcf9\u0026amp;signature=7bb11e63327476ecab262892fa78af9b4e4986bd5417bb4a2e65f4cd74f11685\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Box Dev Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#0061d5\">\u003cmeta data-mint-head name=\"google-site-verification\" content=\"fuelbNhVR1kQluNBJjYt4K1Hj5HvJLhLnIq0o9CAY9E\">\u003clink data-mint-head rel=\"canonical\" href=\"https://developer.box.com/guides/embed/ui-elements/uploader\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/guides/embed/ui-elements/uploader.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://developer.box.com/guides/embed/ui-elements/uploader\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ja\" href=\"https://developer.box.com/ja/guides/embed/ui-elements/uploader\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://developer.box.com/guides/embed/ui-elements/uploader\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://developer.box.com/#organization\",\"name\":\"Box Dev Docs\",\"url\":\"https://developer.box.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/box/lJLw9z7FWORNWMcq/logo/boxdev-light.png?fit=max\u0026auto=format\u0026n=lJLw9z7FWORNWMcq\u0026q=85\u0026s=a11710b698ff59d24426f9ecec6c7e9c\"}},{\"@type\":\"WebSite\",\"@id\":\"https://developer.box.com#website\",\"name\":\"Box Dev Docs\",\"url\":\"https://developer.box.com\",\"publisher\":{\"@id\":\"https://developer.box.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://developer.box.com/guides/embed/ui-elements/uploader#webpage\",\"url\":\"https://developer.box.com/guides/embed/ui-elements/uploader\",\"name\":\"Content Uploader\",\"dateModified\":\"2026-09-10T09:31:34.000Z\",\"isPartOf\":{\"@id\":\"https://developer.box.com#website\"},\"breadcrumb\":{\"@id\":\"https://developer.box.com/guides/embed/ui-elements/uploader#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://developer.box.com/guides/embed/ui-elements/uploader#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Dev tools\",\"item\":\"https://developer.box.com/sdks-and-tools\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Box UI Elements\",\"item\":\"https://developer.box.com/guides/embed/ui-elements/index\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Content Uploader\",\"item\":\"https://developer.box.com/guides/embed/ui-elements/uploader\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://developer.box.com/guides/embed/ui-elements/uploader#article\",\"headline\":\"Content Uploader\",\"name\":\"Content Uploader\",\"url\":\"https://developer.box.com/guides/embed/ui-elements/uploader\",\"mainEntityOfPage\":{\"@id\":\"https://developer.box.com/guides/embed/ui-elements/uploader#webpage\"},\"dateModified\":\"2026-09-10T09:31:34.000Z\",\"publisher\":{\"@id\":\"https://developer.box.com/#organization\"},\"isPartOf\":{\"@id\":\"https://developer.box.com#website\"}}]}\u003c/script>","siteName":"Box Dev Docs","nav":{"global":null,"languages":[{"language":"en","banner":{"content":"Join BoxWorks Dev Summit on Nov 5-6, San Francisco and dive into AI agents and unstructured content. [See agenda](https://boxworks.box.com/series/boxworks-2026-dev-summit/landing_page).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"Resources","items":[{"label":"Newsletter unsubscribe","href":"https://go.box.com/preferences.html"},{"label":"Terms of Use","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"Privacy Policy","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookie Notification","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"Log in","type":"button"}],"primary":{"type":"button","label":"Get started for free","href":"https://account.box.com/signup/developer"}},"tabs":[{"tab":"Home","pages":[{"title":"Home","href":""}]},{"tab":"AI","pages":[{"title":"AI","href":"/ai"}]},{"tab":"API reference","pages":[{"title":"API reference","href":"/reference"}]},{"tab":"Tools","pages":[{"group":"Dev tools","pages":[{"title":"Tools","sidebarTitle":"Tools","href":"/sdks-and-tools"},{"group":"SDKs","root":{"title":"Box SDKs","href":"/guides/tooling/sdks/index"},"pages":[{"title":"Box SDK versioning strategy","href":"/guides/tooling/sdks/sdk-versioning"},{"title":"Install .NET SDK","sidebarTitle":".NET SDK","href":"/guides/tooling/sdks/dotnet"},{"title":"Box Java SDK","sidebarTitle":"Java SDK","href":"/guides/tooling/sdks/java"},{"title":"Install Python SDK","sidebarTitle":"Python SDK","href":"/guides/tooling/sdks/python"},{"title":"Install Node SDK","sidebarTitle":"Node SDK","href":"/guides/tooling/sdks/node"},{"title":"Install Salesforce SDK","sidebarTitle":"Salesforce SDK","href":"/guides/tooling/sdks/salesforce"},{"group":"Deprecated","root":{"title":"Deprecated Box Next Gen TypeScript SDK","sidebarTitle":"Box Next Gen TypeScript SDK","href":"/guides/tooling/sdks/typescript-gen"},"pages":[{"title":"Deprecated Box Next Gen Python SDK","sidebarTitle":"Box Next Gen Python SDK","href":"/guides/tooling/sdks/python-gen"},{"title":"Deprecated Box Next Gen .NET SDK","sidebarTitle":"Box Next Gen .NET SDK","href":"/guides/tooling/sdks/dotnet-gen"},{"title":"Deprecated Box Next Gen Java SDK","sidebarTitle":"Box Next Gen Java SDK","href":"/guides/tooling/sdks/java-gen"},{"title":"Deprecated Box Next Gen Swift SDK","sidebarTitle":"Box Next Gen Swift SDK","href":"/guides/tooling/sdks/swift-gen"}]}]},{"title":"The `box` npm package","href":"/guides/tooling/box-npm-package"},{"group":"CLI","root":{"title":"Box CLI","sidebarTitle":"Overview","href":"/guides/cli/index"},"pages":[{"title":"Login for Headless Environments","sidebarTitle":"Headless Login","href":"/guides/cli/headless-login"},{"group":"Using the Box CLI","root":{"title":"Building Commands and Help Feature","sidebarTitle":"Building Commands and Help Feature","href":"/guides/cli/quick-start/build-commands-help"},"pages":[{"title":"Using Options","sidebarTitle":"Using Options","href":"/guides/cli/quick-start/using-options"},{"title":"Using Bulk Commands","sidebarTitle":"Using Bulk Commands","href":"/guides/cli/quick-start/using-bulk-commands"}]},{"group":"CLI sample scripts","root":{"title":"CLI sample scripts","href":"/guides/cli/scripts/index"},"pages":[{"title":"Using PowerShell Scripts with the Box CLI","href":"/guides/cli/scripts/powershell-script-templates"},{"title":"Update user zones","href":"/guides/cli/scripts/user-zones-mass-update"},{"title":"Report inactive users","href":"/guides/cli/scripts/report-inactive-users"},{"title":"Manage groups and collaborations","href":"/guides/cli/scripts/manage-groups-collaborations"},{"title":"Extract metadata","href":"/guides/cli/scripts/metadata-extraction"},{"title":"Deprovision users and archive folders","href":"/guides/cli/scripts/deprovision-users"},{"title":"Manage Slack integration folder mappings","href":"/guides/cli/scripts/slack-integration-mappings"}]},{"group":"Box CLI with JWT Authentication","root":{"title":"Box CLI with JWT Authentication","href":"/guides/cli/cli-with-jwt-authentication/jwt-cli"},"pages":[]}]},{"title":"Box Mount","sidebarTitle":"Box Mount","tag":"Preview","href":"/guides/box-mount"},{"group":"Box UI Elements","root":{"title":"UI Elements","sidebarTitle":"Overview","href":"/guides/embed/ui-elements/index"},"pages":[{"title":"Installation","href":"/guides/embed/ui-elements/installation"},{"title":"Browser Support","href":"/guides/embed/ui-elements/browser"},{"group":"Content Explorer","root":{"title":"Content Explorer","href":"/guides/embed/ui-elements/explorer"},"pages":[{"title":"Content Explorer – metadata view v2","href":"/guides/embed/ui-elements/explorer-metadata-v2"},{"title":"Content Explorer - metadata view v1","href":"/guides/embed/ui-elements/explorer-metadata-v1"}]},{"title":"Content Open With","href":"/guides/embed/ui-elements/open-with"},{"title":"Content Picker","href":"/guides/embed/ui-elements/picker"},{"title":"Content Preview","href":"/guides/embed/ui-elements/preview"},{"title":"Content Sidebar","description":null,"href":"/guides/embed/ui-elements/sidebar"},{"title":"Content Uploader","href":"/guides/embed/ui-elements/uploader"},{"title":"Annotations","description":null,"href":"/guides/embed/ui-elements/annotations"},{"title":"Customize Logo","href":"/guides/embed/ui-elements/logo"},{"title":"Theming \u0026 styling for Box UI Elements","href":"/guides/embed/ui-elements/theming-styling"},{"title":"UI Elements design tokens","href":"/guides/embed/ui-elements/ui-elements-design-tokens"},{"title":"Customize Access","href":"/guides/embed/ui-elements/access"},{"title":"Dedicated Scopes","href":"/guides/embed/ui-elements/scopes"},{"title":"Preview - Viewers \u0026 Events","href":"/guides/embed/ui-elements/viewers-and-events"},{"title":"Box Edit Custom Domains","href":"/guides/embed/ui-elements/custom-domains"}]},{"group":"Salesforce Developer Toolkit","root":{"title":"Salesforce Developer Toolkit","href":"/guides/tooling/salesforce-toolkit/index"},"pages":[{"title":"Methods and Operations","href":"/guides/tooling/salesforce-toolkit/methods"},{"title":"Code Samples","href":"/guides/tooling/salesforce-toolkit/samples"},{"title":"Experience Cloud Toolkit Global Methods","href":"/guides/tooling/salesforce-toolkit/experience-cloud-toolkit/experience-cloud-toolkit-global-methods"},{"group":"Flow Actions","root":{"title":"Flow Actions","href":"/guides/tooling/salesforce-toolkit/flow-actions"},"pages":[{"title":"Push File to Box","href":"/guides/tooling/salesforce-toolkit/flow-actions/push-file-to-box"}]},{"title":"UI Elements in Salesforce","href":"/guides/tooling/salesforce-toolkit/ui-elements"},{"title":"Box for Agentforce Extension package","href":"/guides/tooling/salesforce-toolkit/box-agentforce-package"},{"title":"Wiring the Box file picker to a custom invocable","href":"/guides/tooling/salesforce-toolkit/wiring-the-box-file-picker-to-a-custom-invocable"},{"title":"Box Doc Gen Toolkit","href":"/guides/tooling/salesforce-toolkit/doc-gen-toolkit"}]},{"group":"Postman Collection","root":{"title":"Postman Collection","sidebarTitle":"Overview","href":"/guides/tooling/postman/index"},"pages":[{"title":"Refresh an Access Token","href":"/guides/tooling/postman/refresh"}]},{"group":"Mobile","pages":[{"title":"Deep Linking","href":"/guides/mobile/mobile-deep-linking"},{"title":"Android SDK Installation","sidebarTitle":"Android","href":"/guides/mobile/android/install"},{"group":"iOS","root":{"title":"iOS SDK","sidebarTitle":"Overview","href":"/guides/mobile/ios/quick-start/index"},"pages":[{"title":"Create an iOS App","sidebarTitle":"1. Create an iOS App","href":"/guides/mobile/ios/quick-start/create-ios-app"},{"title":"Install the iOS SDK","sidebarTitle":"2. Install the iOS SDK","href":"/guides/mobile/ios/quick-start/install-ios-sdk"},{"title":"Configure a platform app","sidebarTitle":"3. Configure a platform app","href":"/guides/mobile/ios/quick-start/configure-box-app"},{"title":"Make an API call","sidebarTitle":"4. Make an API call","href":"/guides/mobile/ios/quick-start/make-api-call"},{"title":"iOS quick start: next steps","sidebarTitle":"Next steps","href":"/guides/mobile/ios/quick-start/next-steps"}]}]},{"title":"Box Embed","href":"/guides/embed/box-embed"},{"group":"Box View","root":{"title":"Box View","sidebarTitle":"Overview","href":"/guides/embed/box-view/index"},"pages":[{"title":"Setup","href":"/guides/embed/box-view/setup"},{"title":"Create File Preview","href":"/guides/embed/box-view/create-preview"},{"title":"Upload Files","href":"/guides/embed/box-view/upload-file"},{"title":"Box View best practices","sidebarTitle":"Best practices","href":"/guides/embed/box-view/best-practices"},{"title":"FAQ","href":"/guides/embed/box-view/faq"}]}]}]},{"tab":"Tutorials","pages":[{"title":"Tutorials","href":"/tutorials"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/changelog/2026"}]}],"global":{"anchors":[{"anchor":"Box","icon":"https://mintlify.s3.us-west-1.amazonaws.com/box/images/sidebar/box.svg","href":"https://www.box.com/home"},{"anchor":"Community","icon":"book-open-cover","href":"https://community.box.com/box-platform-5"},{"anchor":"Developer Blog","icon":"newspaper","href":"https://blog.box.com/developer"},{"anchor":"Box SDKs","icon":"code","href":"https://github.com/box/sdks"},{"anchor":"Box Docs","icon":"file-lines","href":"https://docs.box.com"}]}},{"language":"ja","banner":{"content":"Join BoxWorks Dev Summit on Nov 5-6, San Francisco and dive into AI agents and unstructured content. [See agenda](https://boxworks.box.com/series/boxworks-2026-dev-summit/landing_page).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"リソース","items":[{"label":"ニュースレターの登録解除","href":"https://go.box.com/preferences.html"},{"label":"利用規約","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"個人情報保護方針","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookieに関する通知","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"ログイン","type":"button"}],"primary":{"type":"button","label":"今すぐ無料で開始","href":"https://account.box.com/signup/developer"}},"pages":[{"title":"ja","href":"/ja/guides/embed/ui-elements/uploader"}]}]},"title":"Content Uploader - Box Dev Docs","buildId":"dpl_EnxDqhjaNc9a8MVa833TGULPd9uJ","deploymentId":"dpl_EnxDqhjaNc9a8MVa833TGULPd9uJ","dynamics":["10e4515597"],"chunks":["BannerMarkdown-m8-xYP3Y.js","dist-1ms6tsT-.js","lib-DuNMoZ05.js","lib-B8HbPgcC.js","clsx-DMKzROTp.js","html-void-elements-mCSPHezU.js","katex-YMM-FMeD.js","marked.esm-CZWythHk.js"]}