https://www.dropzone.dev/docs/assets/js/d362b627.f4dd0632.js

1"use strict";(self.webpackChunk_dropzone_docs=self.webpackChunk_dropzone_docs||[]).push([[217],{1686(e,t,n){n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>s,metadata:()=>a,toc:()=>l});const a=JSON.parse('{"id":"getting-started/setup/fallback-for-no-javascript","title":"Fallback for no JavaScript","description":"In case you want to handle browsers that don\'t have JavaScript enabled.","source":"@site/docs/getting-started/setup/fallback-for-no-javascript.md","sourceDirName":"getting-started/setup","slug":"/getting-started/setup/fallback-for-no-javascript","permalink":"/docs/getting-started/setup/fallback-for-no-javascript","draft":false,"unlisted":false,"editUrl":"https://github.com/enyo/dropzone/tree/main/apps/docs/docs/getting-started/setup/fallback-for-no-javascript.md","tags":[],"version":"current","frontMatter":{"description":"In case you want to handle browsers that don\'t have JavaScript enabled."},"sidebar":"docs","previous":{"title":"Server Side Implementation","permalink":"/docs/getting-started/setup/server-side-implementation"},"next":{"title":"Basics","permalink":"/docs/configuration/basics/"}}');var o=n(4558),r=n(3747);const s={description:"In case you want to handle browsers that don't have JavaScript enabled."},i="Fallback for no JavaScript",c={},l=[];function d(e){const t={code:"code",em:"em",h1:"h1",header:"header",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"fallback-for-no-javascript",children:"Fallback for no JavaScript"})}),"\n",(0,o.jsx)(t.p,{children:"Sometimes you need to build websites that should work even if the user doesn't have JavaScript enabled or the browser is not supported. Of course, a drag'n'drop JavaScript library won't work in these cases, but Dropzone got you covered by offering a way to define a fallback."}),"\n",(0,o.jsxs)(t.p,{children:["Inside your dropzone HTML element (in most cases that's a ",(0,o.jsx)(t.code,{children:"<form>"})," element), you can define an additional element with the class ",(0,o.jsx)(t.code,{children:"fallback"}),' . When (or in this case: "if") Dropzone initializes, it will simply remove this element.']}),"\n",(0,o.jsx)(t.p,{children:"Here is an example of what this might look like:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-markup",children:'<form action="/file-upload" class="dropzone">\n  <div class="fallback">\n    <input name="file" type="file" multiple />\n  </div>\n</form>\n'})}),"\n",(0,o.jsxs)(t.p,{children:["So in case the browser doesn't support JavaSript, the user will simply see the ",(0,o.jsx)(t.code,{children:"fallback"})," div with the file input element, and everything will work normally but with no drag and drop support."]}

1),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.em,{children:"If"})," the browser is supported however, this element will be removed, and Dropzone will add a notice that it accepts dropped files and handle them."]})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},3747(e,t,n){n.d(t,{R:()=>s,x:()=>i});var a=n(1102);const o={},r=a.createContext(o);function s(e){const t=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),a.createElement(r.Provider,{value:t},e.children)}}}]);