https://www.dropzone.dev/docs/assets/js/ce9e6dcc.97835d55.js

1"use strict";(self.webpackChunk_dropzone_docs=self.webpackChunk_dropzone_docs||[]).push([[101],{7655(e,t,n){n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"getting-started/setup/imperative","title":"Imperative","description":"How to create a Dropzone upload with JavaScript.","source":"@site/docs/getting-started/setup/imperative.md","sourceDirName":"getting-started/setup","slug":"/getting-started/setup/imperative","permalink":"/docs/getting-started/setup/imperative","draft":false,"unlisted":false,"editUrl":"https://github.com/enyo/dropzone/tree/main/apps/docs/docs/getting-started/setup/imperative.md","tags":[],"version":"current","frontMatter":{"description":"How to create a Dropzone upload with JavaScript."},"sidebar":"docs","previous":{"title":"Declarative","permalink":"/docs/getting-started/setup/declarative"},"next":{"title":"Server Side Implementation","permalink":"/docs/getting-started/setup/server-side-implementation"}}');var a=n(4558),o=n(3747),i=n(521),u=n(2629);const s={description:"How to create a Dropzone upload with JavaScript."},l="Imperative",c={},d=[];function p(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"imperative",children:"Imperative"})}),"\n",(0,a.jsxs)(t.p,{children:["As an alternative to the declarative way, you can create Dropzones imperatively (even on non ",(0,a.jsx)(t.code,{children:"<form>"}),"elements) by instantiating the ",(0,a.jsx)(t.code,{children:"Dropzone"})," class:"]}),"\n",(0,a.jsxs)(i.A,{children:[(0,a.jsx)(u.A,{value:"plain-javascript",label:"Plain JavaScript",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-javascript",children:'// The constructor of Dropzone accepts two arguments:\n//\n// 1. The selector for the HTML element that you want to add\n//    Dropzone to, the second\n// 2. An (optional) object with the configuration\nlet myDropzone = new Dropzone("div#myId", { url: "/file/post"});\n'})})}),(0,a.jsx)(u.A,{value:"jquery",label:"jQuery",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-javascript",children:'// The dropzone method is added to jQuery elements and can\n// be invoked with an (optional) configuration object.\n$("div#myId").dropzone({ url: "/file/post" });\n'})})})]}),"\n",(0,a.jsx)(t.admonition,{type:"warning",children:(0,a.jsxs)(t.p,{children:["Don\u2019t forget to specify an ",(0,a.jsx)(t.code,{children:"url"})," option if you\u2019re not using a ",(0,a.jsx)(t.code,{children:"<form>"})," element, since Dropzone doesn\u2019t know where to post to without an action attribute. On form elements, Dropzone defaults to the ",(0,a.jsx)(t.code,{children:"action"})," attribute."]})}),"\n",(0,a.jsxs)(t.p,{children:["For a list of all configuration options, refer to the ",(0,a.jsx)(t.a,{href:"../../configuration/basics/",children:"configuration section"}),"."]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},2629(e,t,n){n.d(t,{A:()=>s});n(1102);var r=n(851),a=n(2185);const o="tabItem_eOxo";var i=n(4558);function u(e){var t=e.children,n=e.className,a=e.hidden;return(0,i.jsx)("div",{role:"tabpanel",className:(0,r.A)(o,n),hidden:a,children:t})}function s(e){var t=e.children,n=e.className,r=e.value,o=(0,a.uc)(),s=o.selectedValue,l=o.lazy,c=r===s;return!c&&l?null:(0,i.jsx)(u,{className:n,hidden:!c,children:t})}},521(e,t,n){n.d(t,{A:()=>f});n(1102);var r=n(851),a=n(6801),o=n(2185),i=n(538),u=n(9581);const s="tabList_ml7G",l="tabItem_rw5H";var c=n(4558);function d(e){var t=e.className,n=(0,o.uc)(),a=n.selectedValue,u=n.selectValue,s=n.tabValues,d=n.block,p=[],h=(0,i.a_)().blockElementScrollPositionUntilNextRender,f=function(e){var t=e.currentTarget,n=p.indexOf(t),r=s[n].value;r!==a&&(h(t),u(r))},v=function(e){var t,n=null;switch(e.key){case"Enter":f(e);break;case"ArrowRight":var r,a=p.indexOf(e.currentTarget)+1;n=null!=(r=p[a])?r:p[0];break;case"ArrowLeft":var o,i=p.indexOf(e.currentTarget)-1;n=null!=(o=p[i])?o:p[p.length-1]}

1null==(t=n)||t.focus()};return(0,c.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":d},t),children:s.map(function(e){var t=e.value,n=e.label,o=e.attributes;return(0,c.jsx)("li",Object.assign({role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:function(e){p.push(e)},onKeyDown:v,onClick:f},o,{className:(0,r.A)("tabs__item",l,null==o?void 0:o.className,{"tabs__item--active":a===t}),children:null!=n?n:t}),t)})})}function p(e){var t=e.children;return(0,c.jsx)("div",{className:"margin-top--md",children:t})}function h(e){var t=e.className,n=e.children;return(0,c.jsxs)("div",{className:(0,r.A)(a.G.tabs.container,"tabs-container",s),children:[(0,c.jsx)(d,{className:t}),(0,c.jsx)(p,{children:n})]})}function f(e){var t=(0,u.A)(),n=(0,o.OC)(e);return(0,c.jsx)(o.O_,{value:n,children:(0,c.jsx)(h,{className:e.className,children:(0,o.vT)(e.children)})},String(t))}},2185(e,t,n){n.d(t,{OC:()=>f,O_:()=>b,uc:()=>m,vT:()=>c});var r=n(1102),a=n(5551),o=n(5119),i=n(4447),u=n(2655),s=n(2852),l=n(4558);function c(e){return r.Children.toArray(e).filter(function(e){return"\n"!==e})}function d(e){var t=e.values,n=e.children;return(0,r.useMemo)(function(){var e=null!=t?t:function(e){return r.Children.toArray(e).flatMap(function(e){if(!e)return[];if((0,r.isValidElement)(e)&&(t=e.props)&&"object"==typeof t&&"value"in t)return[e];var t,n="string"==typeof e.type?e.type:e.type.name;throw new Error("Docusaurus error: Bad <Tabs> child <"+n+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.\nIf you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.')}).map(function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}})}(n);return function(e){var t=(0,s.XI)(e,function(e,t){return e.value===t.value});if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map(function(e){return"'"+e.value+"'"}).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e},[t,n])}function p(e){var t=e.value;return e.tabValues.some(function(e){return e.value===t})}function h(e){var t=e.queryString,n=void 0!==t&&t,o=e.groupId,u=(0,a.W6)(),s=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:o});return[(0,i.aZ)(s),(0,r.useCallback)(function(e){if(s){var t=new URLSearchParams(u.location.search);t.set(s,e),u.replace(Object.assign({},u.location,{search:t.toString()}))}},[s,u])]}function f(e){var t,n,a,i,s,l,c=e.defaultValue,f=e.queryString,v=void 0!==f&&f,m=e.groupId,b=d(e),g=(0,r.useState)(function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!p({value:n,tabValues:r}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map(function(e){return e.value}).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find(function(e){return e.default}))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:c,tabValues:b})}),x=g[0],j=g[1],w=h({queryString:v,groupId:m}),y=w[0],T=w[1],I=(a=function(e){return e?"docusaurus.tab."+e:null}({groupId:m}.groupId),i=(0,u.Dv)(a),s=i[0],l=i[1],[s,(0,r.useCallback)(function(e){a&&l.set(e)},[a,l])]),D=I[0],k=I[1],z=function(){var e=null!=y?y:D;return p({value:e,tabValues:b})?e:null}();return(0,o.A)(function(){z&&j(z)},[z]),{selectedValue:x,selectValue:(0,r.useCallback)(function(e){if(!p({value:e,tabValues:b}))throw new Error("Can't select invalid tab value="+e);j(e),T(e),k(e)},[T,k,b]),tabValues:b,lazy:null!=(t=e.lazy)&&t,block:null!=(n=e.block)&&n}}var v=(0,r.createContext)(null);function m(){var e=r.useContext(v);if(!e)throw new Error("useTabsContext() must be used within a Tabs component");return e}function b(e){return(0,l.jsx)(v.Provider,{value:e.value,children:e.children})}},3747(e,t,n){n.d(t,{R:()=>i,x:()=>u});var r=n(1102);const a={},o=r.createContext(a);function i(e){const t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function u(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]);