diff --git a/404.html b/404.html index 1679142..6ba16cc 100644 --- a/404.html +++ b/404.html @@ -5,10 +5,10 @@ Page Not Found | CustUp - - + + -
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

\ No newline at end of file diff --git a/assets/js/001079cd.7236174d.js b/assets/js/001079cd.7236174d.js new file mode 100644 index 0000000..3c49c90 --- /dev/null +++ b/assets/js/001079cd.7236174d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[5599],{2688:(t,o,n)=>{n.r(o),n.d(o,{assets:()=>a,contentTitle:()=>r,default:()=>l,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var e=n(5893),s=n(1151);const i={sidebar_position:5},r="Using Custom Font",c={id:"customization/custom-font",title:"Using Custom Font",description:"You can also provide another Font to be used within CustUp",source:"@site/docs/customization/custom-font.md",sourceDirName:"customization",slug:"/customization/custom-font",permalink:"/docs/customization/custom-font",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/custom-font.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"External Sources Styles",permalink:"/docs/customization/external-sources"},next:{title:"Default UI",permalink:"/docs/customization/default-ui"}},a={},u=[];function d(t){const o={admonition:"admonition",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...t.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(o.h1,{id:"using-custom-font",children:"Using Custom Font"}),"\n",(0,e.jsx)(o.p,{children:"You can also provide another Font to be used within CustUp"}),"\n",(0,e.jsx)(o.admonition,{title:"Warning",type:"warning",children:(0,e.jsxs)(o.p,{children:[(0,e.jsx)(o.strong,{children:"Note:"})," CustUp currently only supports Google Fonts, so only Google Fonts link may work as it is only Google Fonts has been tested but you can also try other fonts but it is not guaranteed if they will work"]})}),"\n",(0,e.jsx)(o.p,{children:"To use a font provide the link or the route to the font if the font is within the project and also the name of the font provided"}),"\n",(0,e.jsx)(o.pre,{children:(0,e.jsx)(o.code,{className:"language-js",children:'const options = {\n // ...\n css_font_link: "https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap",\n css_font_name: "Dancing Script",\n}\n\nconst uploader = new CustUp(options)\n'})}),"\n",(0,e.jsxs)(o.p,{children:["If you would like to use the already loaded font in the project then you only need to set the ",(0,e.jsx)(o.code,{children:"css_font_name"})," to the font name."]})]})}function l(t={}){const{wrapper:o}={...(0,s.a)(),...t.components};return o?(0,e.jsx)(o,{...t,children:(0,e.jsx)(d,{...t})}):d(t)}},1151:(t,o,n)=>{n.d(o,{Z:()=>c,a:()=>r});var e=n(7294);const s={},i=e.createContext(s);function r(t){const o=e.useContext(i);return e.useMemo((function(){return"function"==typeof t?t(o):{...o,...t}}),[o,t])}function c(t){let o;return o=t.disableParentContext?"function"==typeof t.components?t.components(s):t.components||s:r(t.components),e.createElement(i.Provider,{value:o},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/020cbdcb.f531be61.js b/assets/js/020cbdcb.f531be61.js new file mode 100644 index 0000000..4cb4703 --- /dev/null +++ b/assets/js/020cbdcb.f531be61.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[8442],{693:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>l,default:()=>d,frontMatter:()=>a,metadata:()=>o,toc:()=>c});var i=t(5893),r=t(1151);const a={sidebar_position:4},l="External Sources Styles",o={id:"customization/external-sources",title:"External Sources Styles",description:"Just like the Media sources element styles, external sources styles are not part of the default UI and they get created and appended to the",source:"@site/docs/customization/external-sources.md",sourceDirName:"customization",slug:"/customization/external-sources",permalink:"/docs/customization/external-sources",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/external-sources.md",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Media Source Styles",permalink:"/docs/customization/media-sources"},next:{title:"Using Custom Font",permalink:"/docs/customization/custom-font"}},s={},c=[{value:"Element Styles",id:"element-styles",level:2},{value:"container",id:"container",level:3},{value:"url_source_container",id:"url_source_container",level:3},{value:"url_source_inner_container_1",id:"url_source_inner_container_1",level:3},{value:"url_source_inner_container_2",id:"url_source_inner_container_2",level:3},{value:"url_source_input_container",id:"url_source_input_container",level:3},{value:"url_source_button_container",id:"url_source_button_container",level:3},{value:"dropbox_ui_container",id:"dropbox_ui_container",level:3},{value:"dalleOuterContainer",id:"dalleoutercontainer",level:3},{value:"dalleInitialPageContainer",id:"dalleinitialpagecontainer",level:3},{value:"initialPageContentContainer",id:"initialpagecontentcontainer",level:3},{value:"dalleIntialPageSearchContainer",id:"dalleintialpagesearchcontainer",level:3},{value:"dalleIntialPageButtonContainer",id:"dalleintialpagebuttoncontainer",level:3},{value:"dalleIntialPageTitleContainer",id:"dalleintialpagetitlecontainer",level:3},{value:"dallePreviewPageContainer",id:"dallepreviewpagecontainer",level:3},{value:"image_preview_container",id:"image_preview_container",level:3},{value:"utils_button_container",id:"utils_button_container",level:3},{value:"accept_files_btn",id:"accept_files_btn",level:3},{value:"Setting a custom class name for External source styles",id:"setting-a-custom-class-name-for-external-source-styles",level:3},{value:"Example",id:"example",level:3}];function u(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"external-sources-styles",children:"External Sources Styles"}),"\n",(0,i.jsx)(n.p,{children:"Just like the Media sources element styles, external sources styles are not part of the default UI and they get created and appended to the\ndefault UI, they can also be customized by either adding to their class names or overriding their class names."}),"\n",(0,i.jsx)(n.h2,{id:"element-styles",children:"Element Styles"}),"\n",(0,i.jsx)(n.h3,{id:"container",children:"container"}),"\n",(0,i.jsx)(n.p,{children:"The style of the external sources popup container wrapper"}),"\n",(0,i.jsx)(n.h3,{id:"url_source_container",children:"url_source_container"}),"\n",(0,i.jsx)(n.p,{children:"The main container of the URL source"}),"\n",(0,i.jsx)(n.h3,{id:"url_source_inner_container_1",children:"url_source_inner_container_1"}),"\n",(0,i.jsx)(n.p,{children:"The style of the top inner container of the URL source"}),"\n",(0,i.jsx)(n.h3,{id:"url_source_inner_container_2",children:"url_source_inner_container_2"}),"\n",(0,i.jsx)(n.p,{children:"The style of the bottom inner container of the URL source"}),"\n",(0,i.jsx)(n.h3,{id:"url_source_input_container",children:"url_source_input_container"}),"\n",(0,i.jsx)(n.p,{children:"The style of the input element wrapper container"}),"\n",(0,i.jsx)(n.h3,{id:"url_source_button_container",children:"url_source_button_container"}),"\n",(0,i.jsx)(n.p,{children:"The style of the button element wrapper container"}),"\n",(0,i.jsx)(n.h3,{id:"dropbox_ui_container",children:"dropbox_ui_container"}),"\n",(0,i.jsx)(n.p,{children:"The style of dropbox source main container"}),"\n",(0,i.jsx)(n.h3,{id:"dalleoutercontainer",children:"dalleOuterContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of OpenAI Dall.E source wrapper container"}),"\n",(0,i.jsx)(n.h3,{id:"dalleinitialpagecontainer",children:"dalleInitialPageContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of the DALL.E source initial page container that holds the search box and button"}),"\n",(0,i.jsx)(n.h3,{id:"initialpagecontentcontainer",children:"initialPageContentContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of the DALL.E initial page content wrapper"}),"\n",(0,i.jsx)(n.h3,{id:"dalleintialpagesearchcontainer",children:"dalleIntialPageSearchContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of the DALL.E initial page search box container wrapper"}),"\n",(0,i.jsx)(n.h3,{id:"dalleintialpagebuttoncontainer",children:"dalleIntialPageButtonContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of the DALL.E initial page button wrapper"}),"\n",(0,i.jsx)(n.h3,{id:"dalleintialpagetitlecontainer",children:"dalleIntialPageTitleContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of the DALL.E title description container"}),"\n",(0,i.jsx)(n.h3,{id:"dallepreviewpagecontainer",children:"dallePreviewPageContainer"}),"\n",(0,i.jsx)(n.p,{children:"The style of the generated image page container wrapper"}),"\n",(0,i.jsx)(n.h3,{id:"image_preview_container",children:"image_preview_container"}),"\n",(0,i.jsx)(n.p,{children:"The style of the inner container of the image preview page"}),"\n",(0,i.jsx)(n.h3,{id:"utils_button_container",children:"utils_button_container"}),"\n",(0,i.jsx)(n.p,{children:"The style of the bottom buttons container"}),"\n",(0,i.jsx)(n.h3,{id:"accept_files_btn",children:"accept_files_btn"}),"\n",(0,i.jsx)(n.p,{children:"The style of accept file button"}),"\n",(0,i.jsx)(n.h3,{id:"setting-a-custom-class-name-for-external-source-styles",children:"Setting a custom class name for External source styles"}),"\n",(0,i.jsxs)(n.p,{children:["To set a custom class name for the External source styles use the ",(0,i.jsx)(n.code,{children:"external_source_style_override"})]}),"\n",(0,i.jsx)(n.h3,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n // ...\n external_source_style_override: {\n dalleIntialPageButtonContainer: ['custom_class_name', true]\n }\n})\n"})})]})}function d(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>o,a:()=>l});var i=t(7294);const r={},a=i.createContext(r);function l(e){const n=i.useContext(a);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0e384e19.e9d8e489.js b/assets/js/0e384e19.e9d8e489.js new file mode 100644 index 0000000..d47c023 --- /dev/null +++ b/assets/js/0e384e19.e9d8e489.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[9671],{7876:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>d,contentTitle:()=>s,default:()=>u,frontMatter:()=>a,metadata:()=>r,toc:()=>c});var i=n(5893),o=n(1151);const a={sidebar_position:1},s="Introduction",r={id:"intro",title:"Introduction",description:"CustUp is a highly customizable library with zero dependency, and can be easily adapted to a wide range of applications.",source:"@site/docs/intro.md",sourceDirName:".",slug:"/intro",permalink:"/docs/intro",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/intro.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",next:{title:"Installation",permalink:"/docs/installation"}},d={},c=[{value:"Brief Overview",id:"brief-overview",level:2},{value:"Things you might want to know about CustUp",id:"things-you-might-want-to-know-about-custup",level:3},{value:"Inspiration",id:"inspiration",level:2}];function l(t){const e={h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,o.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.h1,{id:"introduction",children:"Introduction"}),"\n",(0,i.jsx)(e.p,{children:"CustUp is a highly customizable library with zero dependency, and can be easily adapted to a wide range of applications."}),"\n",(0,i.jsx)(e.h2,{id:"brief-overview",children:"Brief Overview"}),"\n",(0,i.jsx)(e.p,{children:"CustUp which is the short for Customizable Uploader was made to be >95% customizable if not 100%, and it is very easy to customize it to suit any kind of project you're working on."}),"\n",(0,i.jsx)(e.h3,{id:"things-you-might-want-to-know-about-custup",children:"Things you might want to know about CustUp"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:"You can easily change the UI design or create your own UI just by overriding or adding to the CSS classes of the Elements"}),"\n",(0,i.jsx)(e.li,{children:"With the instance attachment feature, you can create multiple CustUp instances and upload all files at once together with form fields and/or additional data"}),"\n",(0,i.jsx)(e.li,{children:"You can get all the selected files and upload them manually"}),"\n",(0,i.jsx)(e.li,{children:"You don't need to worry about installing HTTP client to manage your upload requests because axios was bundled into CustUp which you can easily configure."}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"inspiration",children:"Inspiration"}),"\n",(0,i.jsx)(e.p,{children:"When I was working on a freelance project that has a custom file upload UI design some years back, I searched for libraries that can fit into the design or one that has an option to change the UI style to fit into my project and that does not have any dependencies but I couldn't find any that fit into the description and I had to write a custom implementation for the file uploader from scratch, and then few years later I decided to build a file upload library that fits into the description of the library I couldn't find then."})]})}function u(t={}){const{wrapper:e}={...(0,o.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>r,a:()=>s});var i=n(7294);const o={},a=i.createContext(o);function s(t){const e=i.useContext(a);return i.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function r(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(o):t.components||o:s(t.components),i.createElement(a.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/14d23ee6.95fbe846.js b/assets/js/14d23ee6.95fbe846.js new file mode 100644 index 0000000..511e9cb --- /dev/null +++ b/assets/js/14d23ee6.95fbe846.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[6210],{8543:(e,t,n)=>{n.r(t),n.d(t,{BareUI:()=>l,assets:()=>p,contentTitle:()=>u,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(5893),s=n(1151),i=n(7294),o=n(3486);const a={sidebar_position:3},u="Bare",c={id:"ui-types/bare-ui",title:"Bare",description:"Bare UI type is the simplest UI type.",source:"@site/docs/ui-types/bare-ui.md",sourceDirName:"ui-types",slug:"/ui-types/bare-ui",permalink:"/docs/ui-types/bare-ui",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/ui-types/bare-ui.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Default",permalink:"/docs/ui-types/default-ui"},next:{title:"Detached",permalink:"/docs/ui-types/detached-ui"}},p={},d=[],l=({})=>(i.useEffect((()=>{new o.Z({targetRootElement:"#container-1",default_styles_override:{outerContainer:["custup_outer_contaner",!0]},ui_type:"bare"})}),[]),(0,r.jsx)(r.Fragment,{}));function m(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"bare",children:"Bare"}),"\n","\n","\n",(0,r.jsx)(t.p,{children:"Bare UI type is the simplest UI type."}),"\n","\n",(0,r.jsx)("div",{id:"container-1",style:{marginBottom:15}}),"\n",(0,r.jsx)(l,{}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="index.js"',children:'const instance1 = new CustUp({\n targetRootElement: "#container-1",\n default_styles_override: {\n outerContainer: ["custup_outer_contaner", true],\n },\n // ...\n ui_type: \'bare\'\n // ...\n\n })\n'})})]})}function f(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var r=n(7294);const s={},i=r.createContext(s);function o(e){const t=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/253a5dd7.7f24149b.js b/assets/js/253a5dd7.7f24149b.js new file mode 100644 index 0000000..4823b8e --- /dev/null +++ b/assets/js/253a5dd7.7f24149b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[5071],{2769:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>i});var s=o(5893),n=o(1151);const r={sidebar_position:7},l="Scrollbar",c={id:"customization/scrollbar",title:"Scrollbar",description:"Even CustUp's container scrolling is custom made including the scroll bar, though I have not yet made the container scrolling to be customizable but the scrollbar is customizable and can even be set to not display.",source:"@site/docs/customization/scrollbar.md",sourceDirName:"customization",slug:"/customization/scrollbar",permalink:"/docs/customization/scrollbar",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/scrollbar.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Icons",permalink:"/docs/customization/icons"},next:{title:"Tools",permalink:"/docs/customization/tools"}},a={},i=[];function d(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,n.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"scrollbar",children:"Scrollbar"}),"\n",(0,s.jsx)(t.p,{children:"Even CustUp's container scrolling is custom made including the scroll bar, though I have not yet made the container scrolling to be customizable but the scrollbar is customizable and can even be set to not display."}),"\n",(0,s.jsxs)(t.p,{children:["To hide the scrollbar or simply to not show the scrollbar at all set ",(0,s.jsx)(t.code,{children:"disable_scrollbar"})," to ",(0,s.jsx)(t.code,{children:"true"})]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"const instance1 = new CustUp({\n // ...\n disable_scrollbar: true\n})\n"})}),"\n",(0,s.jsxs)(t.p,{children:["The scrollbar can also be styled to your taste, to style the scrollbar you can either add a new class name to the scrollbar element or override the scrollbar class names, the ",(0,s.jsx)(t.code,{children:"scrollBarEl"})," style override option in ",(0,s.jsx)(t.code,{children:"default_styles_override"})," is the scrollbar element style and you can override or add new class name(s) to it like below"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:"const instance1 = new CustUp({\n default_styles_override: {\n scrollBarEl: ['random_scrollbar_el', true],\n // scrollBarEl: \"random_scrollbar_el\", // to override the current scrollbar element class name\n }\n})\n"})})]})}function u(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},1151:(e,t,o)=>{o.d(t,{Z:()=>c,a:()=>l});var s=o(7294);const n={},r=s.createContext(n);function l(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:l(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/259dab2e.932a68bc.js b/assets/js/259dab2e.932a68bc.js new file mode 100644 index 0000000..57c6e9b --- /dev/null +++ b/assets/js/259dab2e.932a68bc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[2259],{9435:(e,n,t)=>{t.r(n),t.d(n,{CustUpUI:()=>u,assets:()=>d,contentTitle:()=>c,default:()=>m,frontMatter:()=>a,metadata:()=>l,toc:()=>h});var i=t(5893),s=t(1151),o=t(7294),r=t(3486);const a={sidebar_position:1},c="Overview",l={id:"customization/overview",title:"Overview",description:"The main reason why CustUp was made is so that it can be fully customized and adapted to any project design quickly and by just changing or adding to the CSS classes.",source:"@site/docs/customization/overview.mdx",sourceDirName:"customization",slug:"/customization/overview",permalink:"/docs/customization/overview",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/overview.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Customization",permalink:"/docs/category/customization"},next:{title:"Main UI Styles",permalink:"/docs/customization/main-ui"}},d={},h=[{value:"Styles division",id:"styles-division",level:3},{value:"Setting the options",id:"setting-the-options",level:3},{value:"Style override examples",id:"style-override-examples",level:3}],u=({})=>{const e={div:"div",...(0,s.a)()};return o.useEffect((()=>{new r.Z({targetRootElement:"#container",allowed_sources:null,default_styles_override:{outerContainer:["custup_outer_contaner",!0],innerContainer:["inner_container_el",!0],headerContainer:"header_cont",footerContainer:"footer_container",sidebarLeftContainer:"side_bar_left",sidebarRightContainer:"side_bar_right",custupInnerContainerWrapperEl:["inner_container_wrapper",!0],defaultUI:"",fileUIOuterContainer:["file_ui_outer",!0]},allowed_tools:null})}),[]),(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(e.div,{id:"container",style:{marginBottom:10,width:"100%",display:"flex",justifyContent:"center"}})})};function p(e){const n={code:"code",h1:"h1",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"overview",children:"Overview"}),"\n","\n","\n",(0,i.jsx)(n.p,{children:"The main reason why CustUp was made is so that it can be fully customized and adapted to any project design quickly and by just changing or adding to the CSS classes."}),"\n",(0,i.jsxs)(n.p,{children:["All the css class names of the all the elements of CustUp is exposed with the ",(0,i.jsx)(n.code,{children:"default_styles_override"})," option."]}),"\n",(0,i.jsx)(n.p,{children:"CustUp is structured into header, left container, right container, inner container and footer container."}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(n.p,{children:"The section with blue background is the header section, the section with green background is the right sidebar section, the section with red background is the footer section, the section with yellow background is the right sidebar section and the section at the center with white background color is the inner container."}),"\n",(0,i.jsx)(n.p,{children:"Of course the example above is a working implementation of CustUp you can drop files in it to see it in action."}),"\n",(0,i.jsx)(n.p,{children:"The example above can be achieved as follows"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n default_styles_override: {\n // outerContainer: ['custup_outer_contaner', true], // added to control the width and to center CustUp\n innerContainer: ['inner_container_el', true], // appends new class name to the inner container element\n headerContainer: 'header_cont', // overrides all the element's class names\n footerContainer: 'footer_container',\n sidebarLeftContainer: 'side_bar_left',\n sidebarRightContainer: 'side_bar_right',\n custupInnerContainerWrapperEl: ['inner_container_wrapper', true], // a must add to set the height of the inner container like `height: calc(100% - 100px)`\n // defaultUI: '', // this was added to hide the default UI\n }\n})\n"})}),"\n",(0,i.jsx)(n.p,{children:"and the provided CSS class names style"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",metastring:'title="random-css-file.css"',children:"\n"})}),"\n",(0,i.jsx)(n.p,{children:"This gives room for full customisation of the library to fit into your project."}),"\n",(0,i.jsx)(n.h3,{id:"styles-division",children:"Styles division"}),"\n",(0,i.jsx)(n.p,{children:"The styles are currently divided into 3 aspect of the UI"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Styles for the Main UI elements"}),"\n",(0,i.jsx)(n.li,{children:"Styles for External file sources UI elements and"}),"\n",(0,i.jsx)(n.li,{children:"Styles for the Media file sources UI elements"}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"setting-the-options",children:"Setting the options"}),"\n",(0,i.jsxs)(n.p,{children:["To add new class name to an element's current list of class names set the element's class name to an array which contains the new class name(s) in a ",(0,i.jsx)(n.code,{children:"string"})," and a ",(0,i.jsx)(n.code,{children:"boolean"})," of either ",(0,i.jsx)(n.code,{children:"true"})," or ",(0,i.jsx)(n.code,{children:"false"}),", ",(0,i.jsx)(n.code,{children:"true"})," indicates that the provided class name should be added to the list of the element's class name and ",(0,i.jsx)(n.code,{children:"false"})," indicates that the provided class name should override the element's class name(s), or simply provide the new class name in a ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.h3,{id:"style-override-examples",children:"Style override examples"}),"\n",(0,i.jsx)(n.p,{children:"To add a class name to an element's list of class names"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n defaultUI: ['new_class_name_for_the_default_ui_container', true]\n})\n"})}),"\n",(0,i.jsx)(n.p,{children:"To override the class names of an element"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n defaultUI: ['new_class_name_for_the_default_ui_container', false]\n})\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Or use a ",(0,i.jsx)(n.code,{children:"string"})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'const instance1 = new CustUp({\n defaultUI: "new_class_name_for_the_default_ui_container"\n})\n'})}),"\n",(0,i.jsx)(n.p,{children:"The above is the recommended way to override an element's class name"})]})}function m(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>r});var i=t(7294);const s={},o=i.createContext(s);function r(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3713015b.c8057e41.js b/assets/js/3713015b.c8057e41.js new file mode 100644 index 0000000..26f1b89 --- /dev/null +++ b/assets/js/3713015b.c8057e41.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[4903],{7113:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>a,toc:()=>r});var n=o(5893),s=o(1151);const i={sidebar_position:7},l="Tools",a={id:"customization/tools",title:"Tools",description:"This page only applies when you're using the default UI type, the tools on the default UI type can be set to not display on the UI and in which case the settings on this page will not be effective",source:"@site/docs/customization/tools.md",sourceDirName:"customization",slug:"/customization/tools",permalink:"/docs/customization/tools",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/tools.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Scrollbar",permalink:"/docs/customization/scrollbar"},next:{title:"Options",permalink:"/docs/category/options"}},c={},r=[];function d(e){const t={admonition:"admonition",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"tools",children:"Tools"}),"\n",(0,n.jsx)(t.admonition,{title:"Note",type:"tip",children:(0,n.jsx)(t.p,{children:"This page only applies when you're using the default UI type, the tools on the default UI type can be set to not display on the UI and in which case the settings on this page will not be effective"})}),"\n",(0,n.jsx)(t.p,{children:"The tools on the default UI type can be rearranged and styles, and you can also set which tools you want to be displayed"}),"\n",(0,n.jsxs)(t.p,{children:["To achieve this you will use the ",(0,n.jsx)(t.code,{children:"allowed_tools"})," option which takes an array of tools for the default UI type"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"For example"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"const options = {\n // ...\n allowed_tools: ['tools_dragger', 'add_file', 'upload', 'added_files_count', 'clear_files'],\n}\n\nconst uploader = new CustUp(options)\n"})}),"\n",(0,n.jsxs)(t.p,{children:["The tools will be displayed according to their order in the array, and the ones that are not in the array will not be included on the UI, to not show the tools on the default UI type at all set ",(0,n.jsx)(t.code,{children:"allowed_tools"})," to ",(0,n.jsx)(t.code,{children:"null"})]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.strong,{children:"Example"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"const options = {\n // ...\n allowed_tools: null,\n}\n\nconst uploader = new CustUp(options)\n"})})]})}function p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,t,o)=>{o.d(t,{Z:()=>a,a:()=>l});var n=o(7294);const s={},i=n.createContext(s);function l(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3b8c55ea.12ca51b5.js b/assets/js/3b8c55ea.12ca51b5.js new file mode 100644 index 0000000..4e88309 --- /dev/null +++ b/assets/js/3b8c55ea.12ca51b5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[3217],{6995:(t,n,e)=>{e.r(n),e.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>c,metadata:()=>o,toc:()=>a});var s=e(5893),i=e(1151);const c={sidebar_position:2},r="Installation",o={id:"installation",title:"Installation",description:"Install via npm",source:"@site/docs/installation.md",sourceDirName:".",slug:"/installation",permalink:"/docs/installation",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/installation.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Introduction",permalink:"/docs/intro"},next:{title:"Quick Start",permalink:"/docs/quick-start"}},l={},a=[];function u(t){const n={code:"code",h1:"h1",p:"p",pre:"pre",...(0,i.a)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"installation",children:"Installation"}),"\n",(0,s.jsx)(n.p,{children:"Install via npm"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm i custup\n"})}),"\n",(0,s.jsx)(n.p,{children:"or include it directly from UNPKG"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'import CustUp from \'https://unpkg.com/custup@latest/src/custup.min.js\' \n\n// OR unminified version\n\nimport CustUp from \'https://unpkg.com/custup@latest/src/custup.js\' \n\n// and the CSS file\n// all CSS combined into one\n\n\n// OR individual files\n\n\n\n\n\n'})})]})}function p(t={}){const{wrapper:n}={...(0,i.a)(),...t.components};return n?(0,s.jsx)(n,{...t,children:(0,s.jsx)(u,{...t})}):u(t)}},1151:(t,n,e)=>{e.d(n,{Z:()=>o,a:()=>r});var s=e(7294);const i={},c=s.createContext(i);function r(t){const n=s.useContext(c);return s.useMemo((function(){return"function"==typeof t?t(n):{...n,...t}}),[n,t])}function o(t){let n;return n=t.disableParentContext?"function"==typeof t.components?t.components(i):t.components||i:r(t.components),s.createElement(c.Provider,{value:n},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/3bca9053.f9b48da7.js b/assets/js/3bca9053.f9b48da7.js new file mode 100644 index 0000000..4799d91 --- /dev/null +++ b/assets/js/3bca9053.f9b48da7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[116],{2678:(e,t,i)=>{i.r(t),i.d(t,{ProfilePictureUI:()=>d,assets:()=>a,contentTitle:()=>c,default:()=>m,frontMatter:()=>u,metadata:()=>p,toc:()=>l});var n=i(5893),r=i(1151),o=i(7294),s=i(3486);const u={sidebar_position:5},c="Profile Picture",p={id:"ui-types/profile-picture-ui",title:"Profile Picture",description:"The profile picture UI type is the type for creating a profile picture file uploader, it accepts single file and only image files.",source:"@site/docs/ui-types/profile-picture-ui.md",sourceDirName:"ui-types",slug:"/ui-types/profile-picture-ui",permalink:"/docs/ui-types/profile-picture-ui",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/ui-types/profile-picture-ui.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Detached",permalink:"/docs/ui-types/detached-ui"},next:{title:"Resume Upload",permalink:"/docs/ui-types/resume-uploader-ui"}},a={},l=[],d=({})=>(o.useEffect((()=>{new s.Z({targetRootElement:"#container-1",default_styles_override:{outerContainer:["custup_outer_contaner",!0]},ui_type:"profilePicture"})}),[]),(0,n.jsx)(n.Fragment,{}));function f(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"profile-picture",children:"Profile Picture"}),"\n","\n","\n",(0,n.jsx)(t.p,{children:"The profile picture UI type is the type for creating a profile picture file uploader, it accepts single file and only image files."}),"\n","\n",(0,n.jsx)("div",{id:"container-1",style:{marginBottom:15}}),"\n",(0,n.jsx)(d,{}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",metastring:'title="index.js"',children:'const instance1 = new CustUp({\n targetRootElement: "#container-1",\n default_styles_override: {\n outerContainer: ["custup_outer_contaner", true],\n },\n // ...\n ui_type: \'profilePicture\'\n // ...\n\n })\n'})})]})}function m(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(f,{...e})}):f(e)}},1151:(e,t,i)=>{i.d(t,{Z:()=>u,a:()=>s});var n=i(7294);const r={},o=n.createContext(r);function s(e){const t=n.useContext(o);return n.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(r):e.components||r:s(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/41fc846d.8898b647.js b/assets/js/41fc846d.8898b647.js new file mode 100644 index 0000000..e118f66 --- /dev/null +++ b/assets/js/41fc846d.8898b647.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[1082],{5489:(e,o,r)=>{r.r(o),r.d(o,{assets:()=>l,contentTitle:()=>n,default:()=>a,frontMatter:()=>s,metadata:()=>t,toc:()=>d});var i=r(5893),c=r(1151);const s={sidebar_position:6},n="File source icons",t={id:"types/file-source-icons",title:"File source icons",description:"List of all the file sources icons for the for the filesourceicons override option, it is identical to the allowed sources list but the implementation is different.",source:"@site/docs/types/file-source-icons.md",sourceDirName:"types",slug:"/types/file-source-icons",permalink:"/docs/types/file-source-icons",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/types/file-source-icons.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"File Preview Animations",permalink:"/docs/types/file-preview-anim"},next:{title:"Icons",permalink:"/docs/types/icons"}},l={},d=[{value:"video_camera",id:"video_camera",level:3},{value:"capture_image",id:"capture_image",level:3},{value:"record_audio",id:"record_audio",level:3},{value:"record_screen",id:"record_screen",level:3},{value:"url_source",id:"url_source",level:3},{value:"google_drive_source",id:"google_drive_source",level:3},{value:"dropbox_source",id:"dropbox_source",level:3},{value:"box_source",id:"box_source",level:3},{value:"openai_dalle_source",id:"openai_dalle_source",level:3}];function u(e){const o={code:"code",h1:"h1",h3:"h3",p:"p",...(0,c.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.h1,{id:"file-source-icons",children:"File source icons"}),"\n",(0,i.jsxs)(o.p,{children:["List of all the file sources icons for the for the ",(0,i.jsx)(o.code,{children:"file_source_icons"})," override option, it is identical to the allowed sources list but the implementation is different."]}),"\n",(0,i.jsx)(o.h3,{id:"video_camera",children:"video_camera"}),"\n",(0,i.jsx)(o.p,{children:"The video camera source icon"}),"\n",(0,i.jsx)(o.h3,{id:"capture_image",children:"capture_image"}),"\n",(0,i.jsx)(o.p,{children:"The image capture source icon"}),"\n",(0,i.jsx)(o.h3,{id:"record_audio",children:"record_audio"}),"\n",(0,i.jsx)(o.p,{children:"The audio recorder source icon"}),"\n",(0,i.jsx)(o.h3,{id:"record_screen",children:"record_screen"}),"\n",(0,i.jsx)(o.p,{children:"The screen recorder source icon"}),"\n",(0,i.jsx)(o.h3,{id:"url_source",children:"url_source"}),"\n",(0,i.jsx)(o.p,{children:"The URL source icon"}),"\n",(0,i.jsx)(o.h3,{id:"google_drive_source",children:"google_drive_source"}),"\n",(0,i.jsx)(o.p,{children:"The Google drive source icon"}),"\n",(0,i.jsx)(o.h3,{id:"dropbox_source",children:"dropbox_source"}),"\n",(0,i.jsx)(o.p,{children:"The Dropbox source icon"}),"\n",(0,i.jsx)(o.h3,{id:"box_source",children:"box_source"}),"\n",(0,i.jsx)(o.p,{children:"The Box source icon"}),"\n",(0,i.jsx)(o.h3,{id:"openai_dalle_source",children:"openai_dalle_source"}),"\n",(0,i.jsx)(o.p,{children:"The OpenAI DALL.E-3 source icon"})]})}function a(e={}){const{wrapper:o}={...(0,c.a)(),...e.components};return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},1151:(e,o,r)=>{r.d(o,{Z:()=>t,a:()=>n});var i=r(7294);const c={},s=i.createContext(c);function n(e){const o=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(o):{...o,...e}}),[o,e])}function t(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:n(e.components),i.createElement(s.Provider,{value:o},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4d54d076.2ad753db.js b/assets/js/4d54d076.2ad753db.js new file mode 100644 index 0000000..adfc1b1 --- /dev/null +++ b/assets/js/4d54d076.2ad753db.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[7080],{4651:(t,n,e)=>{e.r(n),e.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>u});var r=e(5893),o=e(1151);const i={sidebar_position:12},s="Contributing",a={id:"contributing",title:"Contributing",description:"Contributions are welcome, my goal for CustUp is to make it a go to library for adding file uploader to any projects, your contributions are very important to make this possible.",source:"@site/docs/contributing.md",sourceDirName:".",slug:"/contributing",permalink:"/docs/contributing",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/contributing.md",tags:[],version:"current",sidebarPosition:12,frontMatter:{sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Resume Upload",permalink:"/docs/ui-types/resume-uploader-ui"}},c={},u=[];function l(t){const n={br:"br",h1:"h1",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{id:"contributing",children:"Contributing"}),"\n",(0,r.jsx)(n.p,{children:"Contributions are welcome, my goal for CustUp is to make it a go to library for adding file uploader to any projects, your contributions are very important to make this possible."}),"\n",(0,r.jsx)(n.p,{children:"There are many things you can contribute, some things that can be contribute to are:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"New UI types"}),"\n",(0,r.jsx)(n.li,{children:"New file source types"}),"\n",(0,r.jsx)(n.li,{children:"Upload Resumable"}),"\n",(0,r.jsx)(n.li,{children:"Chunk upload"}),"\n",(0,r.jsxs)(n.li,{children:["Javascript framework integration",(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.strong,{children:"React JS"}),(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.strong,{children:"Vue JS"}),(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.strong,{children:"Angular JS"}),(0,r.jsx)(n.br,{}),"\n",(0,r.jsx)(n.strong,{children:"Ember JS"})]}),"\n"]})]})}function d(t={}){const{wrapper:n}={...(0,o.a)(),...t.components};return n?(0,r.jsx)(n,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}},1151:(t,n,e)=>{e.d(n,{Z:()=>a,a:()=>s});var r=e(7294);const o={},i=r.createContext(o);function s(t){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof t?t(n):{...n,...t}}),[n,t])}function a(t){let n;return n=t.disableParentContext?"function"==typeof t.components?t.components(o):t.components||o:s(t.components),r.createElement(i.Provider,{value:n},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/51261d7a.065623d6.js b/assets/js/51261d7a.065623d6.js new file mode 100644 index 0000000..c0ae7e5 --- /dev/null +++ b/assets/js/51261d7a.065623d6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[7599],{5969:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>l,contentTitle:()=>t,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>c});var i=o(5893),s=o(1151);const r={sidebar_position:2},t="File Sources",d={id:"options/file-sources-config",title:"File Sources",description:"This page contains the options for file sources configurations.",source:"@site/docs/options/file-sources-config.md",sourceDirName:"options",slug:"/options/file-sources-config",permalink:"/docs/options/file-sources-config",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/options/file-sources-config.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Main",permalink:"/docs/options/main"},next:{title:"Methods",permalink:"/docs/methods"}},l={},c=[{value:"Example",id:"example",level:4},{value:"Media Sources",id:"media-sources",level:2},{value:"video_recording",id:"video_recording",level:3},{value:"Properties",id:"properties",level:4},{value:"Description",id:"description",level:4},{value:"External sources",id:"external-sources",level:2},{value:"google_drive_source",id:"google_drive_source",level:3},{value:"Example",id:"example-1",level:4},{value:"dropbox_source",id:"dropbox_source",level:3},{value:"Example",id:"example-2",level:4},{value:"box_source",id:"box_source",level:3},{value:"Example",id:"example-3",level:4},{value:"openai_dalle_source",id:"openai_dalle_source",level:3},{value:"Example",id:"example-4",level:4},{value:"Properties description",id:"properties-description",level:4}];function a(e){const n={a:"a",admonition:"admonition",br:"br",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"file-sources",children:"File Sources"}),"\n",(0,i.jsx)(n.p,{children:"This page contains the options for file sources configurations."}),"\n",(0,i.jsx)(n.admonition,{title:"Note",type:"tip",children:(0,i.jsx)(n.p,{children:"The external file sources are not pre-configured unlike other file uploaders that make it work out of the box preconfigured, unfortunately based on how CustUp was made they have to be configured for your projects, the full guides and relevant external links on how to set them up are on this page."})}),"\n",(0,i.jsxs)(n.p,{children:["The options on this page should be added under the ",(0,i.jsx)(n.code,{children:"file_source_config"})," option."]}),"\n",(0,i.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n // ...\n file_source_config: {\n // ...\n video_recording: {\n video_only: true,\n show_image_capture_btn: false\n }\n // ...\n }\n})\n"})}),"\n",(0,i.jsx)(n.h2,{id:"media-sources",children:"Media Sources"}),"\n",(0,i.jsx)(n.h3,{id:"video_recording",children:"video_recording"}),"\n",(0,i.jsx)(n.p,{children:"This option is for configuring the video recording source"}),"\n",(0,i.jsx)(n.h4,{id:"properties",children:"Properties"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"{\n video_only: boolean,\n show_image_capture_btn: boolean\n}\n"})}),"\n",(0,i.jsx)(n.h4,{id:"description",children:"Description"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Property"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Default"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"video_only"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"boolean"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"false"})}),(0,i.jsxs)(n.td,{children:["Set this to ",(0,i.jsx)(n.code,{children:"true"})," to record video only, audio will not be captured during video recording"]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"show_image_capture_btn"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"boolean"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"true"})}),(0,i.jsxs)(n.td,{children:["By default on the video capture screen there is a image capture button to capture picture, set this to ",(0,i.jsx)(n.code,{children:"false"})," to not include this button"]})]})]})]}),"\n",(0,i.jsx)(n.h2,{id:"external-sources",children:"External sources"}),"\n",(0,i.jsx)(n.h3,{id:"google_drive_source",children:"google_drive_source"}),"\n",(0,i.jsx)(n.p,{children:"Currently the Google Drive has one property that takes the configurations for your project."}),"\n",(0,i.jsx)(n.p,{children:"Check the Google Drive Picker API doc for how to setup your credentials, you only need to setup a project, enable the Google Picker API and then create credentials for your project."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["To create a project on Google Cloud Platform\n",(0,i.jsx)(n.a,{href:"https://developers.google.com/drive/picker/guides/overview#appreqs",children:"https://developers.google.com/drive/picker/guides/overview#appreqs"})]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["To Enable the Google Picker API\n",(0,i.jsx)(n.a,{href:"https://developers.google.com/drive/picker/guides/overview#api",children:"https://developers.google.com/drive/picker/guides/overview#api"})]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["To create credentials",(0,i.jsx)(n.br,{}),"\n",(0,i.jsx)(n.a,{href:"https://developers.google.com/drive/picker/guides/overview#api-key",children:"https://developers.google.com/drive/picker/guides/overview#api-key"})]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Then the ",(0,i.jsx)(n.code,{children:"authConfig"})," should be updated with the credentials"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"authConfig: {\n client_id: string;\n api_key: string;\n app_id: string;\n scopes: string;\n}\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Full option"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"google_drive_source: {\n authConfig: {\n client_id: string;\n api_key: string;\n app_id: string;\n scopes: string;\n }\n}\n"})}),"\n",(0,i.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n file_source_config: {\n\n google_drive_source: {\n authConfig: {\n client_id: 'client_id.apps.googleusercontent.com',\n api_key: 'api-key',\n app_id: 'app-id',\n scopes: 'https://www.googleapis.com/auth/drive.metadata.readonly', // optional\n }\n }\n\n }\n})\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"scopes"})," option is optional but it can be set to other values."]}),"\n",(0,i.jsx)(n.h3,{id:"dropbox_source",children:"dropbox_source"}),"\n",(0,i.jsxs)(n.p,{children:["For Dropbox only an ",(0,i.jsx)(n.code,{children:"appKey"})," has to be created for your project."]}),"\n",(0,i.jsxs)(n.p,{children:["To create an ",(0,i.jsx)(n.code,{children:"appKey"})," on Dropbox you will have to create an app first, ",(0,i.jsx)(n.a,{href:"https://www.dropbox.com/developers/apps/create",children:"follow this link to create an app on Dropbox"})]}),"\n",(0,i.jsx)(n.p,{children:"Then under the App settings change your App status from development to production then copy the App key."}),"\n",(0,i.jsxs)(n.p,{children:["The you the App key can be provided to CustUp under the ",(0,i.jsx)(n.code,{children:"authConfig"})," property."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"authConfig: {\n appKey: string;\n}\n"})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Full options"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"authConfig: {\n appKey: string\n}\noptions: {\n cancel: Function\n}\n"})}),"\n",(0,i.jsx)(n.h4,{id:"example-2",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n file_source_config: {\n // ...\n dropbox_source: {\n authConfig: {\n appKey: 'random-id'\n }\n options: {\n cancel: () => {/*Do something cool when user cancels the chooser*/} // optional\n }\n }\n\n }\n})\n"})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"options"})," property is totally optional and can be omited."]}),"\n",(0,i.jsx)(n.h3,{id:"box_source",children:"box_source"}),"\n",(0,i.jsxs)(n.p,{children:["To get Box up and running you only need to provide the developer token and optionally the folder id, ",(0,i.jsx)(n.code,{children:"folder_id"})," is ",(0,i.jsx)(n.code,{children:"'0'"})," by default which is full folder."]}),"\n",(0,i.jsx)(n.p,{children:"To get a developer token on Box an app needs to be created, to create an app"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://app.box.com/developers/console/newapp",children:"https://app.box.com/developers/console/newapp"})}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"After creating the app on the app's page under configuration section scroll to the Developer Token section and generate the developer token."}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Note:"})," The developer token by default only last for 60 minutes to create a production token request for Enterprise access and submit your app for authorization."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Full option"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"authConfig: {\n developerToken: string;\n folder_id: string;\n}\n"})}),"\n",(0,i.jsx)(n.h4,{id:"example-3",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp({\n // ...\n file_source_config: {\n // ...\n box_source: {\n authConfig: {\n developerToken: 'random-id',\n folder_id: '0', // optional\n }\n }\n }\n})\n"})}),"\n",(0,i.jsxs)(n.p,{children:["To learn more about Box Picker API, ",(0,i.jsx)(n.a,{href:"https://developer.box.com/guides/embed/ui-elements/picker/",children:"follow this link"})]}),"\n",(0,i.jsx)(n.h3,{id:"openai_dalle_source",children:"openai_dalle_source"}),"\n",(0,i.jsx)(n.p,{children:"CustUp can also add image files from generated images using OpenAI DALL.E API, CustUp currently uses the DALL.E v3."}),"\n",(0,i.jsx)(n.p,{children:"The API key is required to use DALL.E-3, you can generate an API key here"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://platform.openai.com/api-keys",children:"https://platform.openai.com/api-keys"})}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Complete option properties"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'{\n api_key: string;\n size: "1024x1024" | "1024x1792" | "1792x1024";\n n: number;\n model: "dall-e-3" | "dall-e-2";\n quality: "standard" | "hd";\n}\n'})}),"\n",(0,i.jsx)(n.h4,{id:"example-4",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'const instance1 = new CustUp({\n // ...\n file_source_config: {\n openai_dalle_source: {\n api_key: \'api-key-from-openai\',\n size: "1792x1024",\n n: 1,\n model: "dall-e-3",\n quality: "hd"\n }\n }\n})\n'})}),"\n",(0,i.jsx)(n.h4,{id:"properties-description",children:"Properties description"}),"\n",(0,i.jsxs)(n.table,{children:[(0,i.jsx)(n.thead,{children:(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.th,{children:"Property"}),(0,i.jsx)(n.th,{children:"Type"}),(0,i.jsx)(n.th,{children:"Default"}),(0,i.jsx)(n.th,{children:"Description"})]})}),(0,i.jsxs)(n.tbody,{children:[(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"api_key"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"string"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:""})}),(0,i.jsx)(n.td,{children:"OpenAI API key is required to use DALL.E 3"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"size"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:'"1024x1024" | "1024x1792" | "1792x1024"'})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:'"1024x1024"'})}),(0,i.jsx)(n.td,{children:"The size of the image that will be generated by DALL.E"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"n"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"number"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"1"})}),(0,i.jsx)(n.td,{children:"Number of images that will be generated by DALL.E"})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"model"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:'"dall-e-3" | "dall-e-2"'})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:'"dall-e-3"'})}),(0,i.jsxs)(n.td,{children:["The DALL.E model that should be used, the default is ",(0,i.jsx)(n.code,{children:'"dall-e-3"'})," note that though there is an option for the version 2 of DALL.E it may be buggy because CustUp has been optimized to use version 3"]})]}),(0,i.jsxs)(n.tr,{children:[(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:"quality"})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:'"standard" | "hd"'})}),(0,i.jsx)(n.td,{children:(0,i.jsx)(n.code,{children:'"standard"'})}),(0,i.jsx)(n.td,{children:"The quality of the image that will be generated by DALL.E 3"})]})]})]}),"\n",(0,i.jsxs)(n.p,{children:["To learn more about DALL.E 3 API ",(0,i.jsx)(n.a,{href:"https://platform.openai.com/docs/guides/images/introduction",children:"follow this link"})]})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},1151:(e,n,o)=>{o.d(n,{Z:()=>d,a:()=>t});var i=o(7294);const s={},r=i.createContext(s);function t(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:t(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/59362658.f247b721.js b/assets/js/59362658.f247b721.js new file mode 100644 index 0000000..5996a2f --- /dev/null +++ b/assets/js/59362658.f247b721.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[2267],{7797:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>u,toc:()=>l});var s=o(5893),n=o(1151);const r={slug:"mdx-blog-post",title:"MDX Blog Post",authors:["slorber"],tags:["docusaurus"]},a=void 0,u={permalink:"/blog/mdx-blog-post",editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/blog/2021-08-01-mdx-blog-post.mdx",source:"@site/blog/2021-08-01-mdx-blog-post.mdx",title:"MDX Blog Post",description:"Blog posts support Docusaurus Markdown features, such as MDX.",date:"2021-08-01T00:00:00.000Z",formattedDate:"August 1, 2021",tags:[{label:"docusaurus",permalink:"/blog/tags/docusaurus"}],readingTime:.175,hasTruncateMarker:!1,authors:[{name:"S\xe9bastien Lorber",title:"Docusaurus maintainer",url:"https://sebastienlorber.com",imageURL:"https://github.com/slorber.png",key:"slorber"}],frontMatter:{slug:"mdx-blog-post",title:"MDX Blog Post",authors:["slorber"],tags:["docusaurus"]},unlisted:!1,prevItem:{title:"Welcome",permalink:"/blog/welcome"},nextItem:{title:"Long Blog Post",permalink:"/blog/long-blog-post"}},c={authorsImageUrls:[void 0]},l=[];function i(t){const e={a:"a",admonition:"admonition",code:"code",p:"p",pre:"pre",...(0,n.a)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:["Blog posts support ",(0,s.jsx)(e.a,{href:"https://docusaurus.io/docs/markdown-features",children:"Docusaurus Markdown features"}),", such as ",(0,s.jsx)(e.a,{href:"https://mdxjs.com/",children:"MDX"}),"."]}),"\n",(0,s.jsxs)(e.admonition,{type:"tip",children:[(0,s.jsx)(e.p,{children:"Use the power of React to create interactive blog posts."}),(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-js",children:"\n"})}),(0,s.jsx)("button",{onClick:()=>alert("button clicked!"),children:"Click me!"})]})]})}function d(t={}){const{wrapper:e}={...(0,n.a)(),...t.components};return e?(0,s.jsx)(e,{...t,children:(0,s.jsx)(i,{...t})}):i(t)}},1151:(t,e,o)=>{o.d(e,{Z:()=>u,a:()=>a});var s=o(7294);const n={},r=s.createContext(n);function a(t){const e=s.useContext(r);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function u(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:a(t.components),s.createElement(r.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/5f5eaeee.c3b7d7c4.js b/assets/js/5f5eaeee.c3b7d7c4.js new file mode 100644 index 0000000..5ac5e97 --- /dev/null +++ b/assets/js/5f5eaeee.c3b7d7c4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[7744],{2902:(e,t,o)=>{o.r(t),o.d(t,{ResumeUploader:()=>d,assets:()=>p,contentTitle:()=>a,default:()=>f,frontMatter:()=>u,metadata:()=>l,toc:()=>c});var n=o(5893),s=o(1151),i=o(7294),r=o(3486);const u={sidebar_position:6},a="Resume Upload",l={id:"ui-types/resume-uploader-ui",title:"Resume Upload",description:"The Resume/Curriculum Vitae (CV) Upload UI type is the type of uploader you see on most job application websites for uploading resumes, you can also customize it to the taste of your project.",source:"@site/docs/ui-types/resume-uploader-ui.md",sourceDirName:"ui-types",slug:"/ui-types/resume-uploader-ui",permalink:"/docs/ui-types/resume-uploader-ui",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/ui-types/resume-uploader-ui.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Profile Picture",permalink:"/docs/ui-types/profile-picture-ui"},next:{title:"Contributing",permalink:"/docs/contributing"}},p={},c=[],d=({})=>(i.useEffect((()=>{new r.Z({targetRootElement:"#container-1",default_styles_override:{outerContainer:["custup_outer_contaner",!0]},ui_type:"resumeUploaderUI",allowed_file_types:["pdf"],maximumAllowedFileSize:1e7})}),[]),(0,n.jsx)(n.Fragment,{}));function m(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"resume-upload",children:"Resume Upload"}),"\n","\n","\n",(0,n.jsx)(t.p,{children:"The Resume/Curriculum Vitae (CV) Upload UI type is the type of uploader you see on most job application websites for uploading resumes, you can also customize it to the taste of your project."}),"\n",(0,n.jsxs)(t.p,{children:["This UI type requires the ",(0,n.jsx)(t.code,{children:"allowed_file_types"})," and the ",(0,n.jsx)(t.code,{children:"maximumAllowedFileSize"})," options to be set."]}),"\n","\n",(0,n.jsx)("div",{id:"container-1",style:{marginBottom:15}}),"\n",(0,n.jsx)(d,{}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",metastring:'title="index.js"',children:"const instance1 = new CustUp({\n targetRootElement: \"#container-1\",\n default_styles_override: {\n outerContainer: [\"custup_outer_contaner\", true],\n },\n // ...\n ui_type: 'resumeUploaderUI',\n allowed_file_types: ['pdf'],\n maximumAllowedFileSize: 10000000\n // ...\n\n })\n"})})]})}function f(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},1151:(e,t,o)=>{o.d(t,{Z:()=>u,a:()=>r});var n=o(7294);const s={},i=n.createContext(s);function r(e){const t=n.useContext(i);return n.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(s):e.components||s:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/66d185b3.df3d6ed5.js b/assets/js/66d185b3.df3d6ed5.js new file mode 100644 index 0000000..e60df12 --- /dev/null +++ b/assets/js/66d185b3.df3d6ed5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[6254],{2157:(n,o,e)=>{e.r(o),e.d(o,{assets:()=>a,contentTitle:()=>c,default:()=>l,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var t=e(5893),i=e(1151);const s={sidebar_position:7},c="Icons",r={id:"customization/icons",title:"Icons",description:"You can overide the icons or add your own programatically",source:"@site/docs/customization/icons.md",sourceDirName:"customization",slug:"/customization/icons",permalink:"/docs/customization/icons",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/icons.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Default UI",permalink:"/docs/customization/default-ui"},next:{title:"Scrollbar",permalink:"/docs/customization/scrollbar"}},a={},d=[];function u(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...(0,i.a)(),...n.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.h1,{id:"icons",children:"Icons"}),"\n",(0,t.jsx)(o.p,{children:"You can overide the icons or add your own programatically"}),"\n",(0,t.jsxs)(o.p,{children:["You can override the icons or add your own icons with the ",(0,t.jsx)(o.code,{children:"default_icons_override"})," option"]}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.strong,{children:"For example"})}),"\n",(0,t.jsx)(o.pre,{children:(0,t.jsx)(o.code,{className:"language-js",children:"const options = {\n // ...\n default_icons_override: {\n send: '
S
',\n eye: '
E
'\n },\n}\n\nconst uploader = new CustUp(options)\n"})}),"\n",(0,t.jsx)(o.p,{children:"You can set either an SVG or an HTML element to override an icon or as a new icon."})]})}function l(n={}){const{wrapper:o}={...(0,i.a)(),...n.components};return o?(0,t.jsx)(o,{...n,children:(0,t.jsx)(u,{...n})}):u(n)}},1151:(n,o,e)=>{e.d(o,{Z:()=>r,a:()=>c});var t=e(7294);const i={},s=t.createContext(i);function c(n){const o=t.useContext(s);return t.useMemo((function(){return"function"==typeof n?n(o):{...o,...n}}),[o,n])}function r(n){let o;return o=n.disableParentContext?"function"==typeof n.components?n.components(i):n.components||i:c(n.components),t.createElement(s.Provider,{value:o},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/723e9b0c.4783827e.js b/assets/js/723e9b0c.4783827e.js new file mode 100644 index 0000000..87ea1bf --- /dev/null +++ b/assets/js/723e9b0c.4783827e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[9680],{5570:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>s,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var l=i(5893),t=i(1151);const r={sidebar_position:2},o="Main UI Styles",a={id:"customization/main-ui",title:"Main UI Styles",description:"The main UI elements styles are as follows",source:"@site/docs/customization/main-ui.md",sourceDirName:"customization",slug:"/customization/main-ui",permalink:"/docs/customization/main-ui",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/customization/main-ui.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Overview",permalink:"/docs/customization/overview"},next:{title:"Media Source Styles",permalink:"/docs/customization/media-sources"}},s={},d=[{value:"Element styles",id:"element-styles",level:2},{value:"outerContainer",id:"outercontainer",level:3},{value:"innerContainer",id:"innercontainer",level:3},{value:"sidebarLeftContainer",id:"sidebarleftcontainer",level:3},{value:"sidebarRightContainer",id:"sidebarrightcontainer",level:3},{value:"custupInnerContainerWrapperEl",id:"custupinnercontainerwrapperel",level:3},{value:"headerContainer",id:"headercontainer",level:3},{value:"footerContainer",id:"footercontainer",level:3},{value:"close_popup_btn",id:"close_popup_btn",level:3},{value:"scrollBarEl",id:"scrollbarel",level:3},{value:"defaultUI",id:"defaultui",level:3},{value:"defaultUIInnerContentEl",id:"defaultuiinnercontentel",level:3},{value:"defaultUIUploadSentenceContainer",id:"defaultuiuploadsentencecontainer",level:3},{value:"defaultUIUploadIconsContainer",id:"defaultuiuploadiconscontainer",level:3},{value:"UITool",id:"uitool",level:3},{value:"fileDisplayUI",id:"filedisplayui",level:3},{value:"fileUIOuterContainer",id:"fileuioutercontainer",level:3},{value:"file_wrapper_el",id:"file_wrapper_el",level:3},{value:"fileUI",id:"fileui",level:3},{value:"fileDetailsContainer",id:"filedetailscontainer",level:3},{value:"custup_fileName",id:"custup_filename",level:3},{value:"custup_fileSize",id:"custup_filesize",level:3},{value:"fileBottomDetails",id:"filebottomdetails",level:3},{value:"fileUIBottomToolsContainer",id:"fileuibottomtoolscontainer",level:3},{value:"remove_file_btn",id:"remove_file_btn",level:3},{value:"file_upload_overlay_ui",id:"file_upload_overlay_ui",level:3},{value:"file_upload_overlay_inner_container",id:"file_upload_overlay_inner_container",level:3},{value:"upload_progress_container",id:"upload_progress_container",level:3},{value:"file_upload_progress_inner",id:"file_upload_progress_inner",level:3},{value:"file_upload_progress",id:"file_upload_progress",level:3},{value:"retry_upload_overlay_ui",id:"retry_upload_overlay_ui",level:3},{value:"retry_upload_button",id:"retry_upload_button",level:3},{value:"message_container",id:"message_container",level:3},{value:"filePreviewer",id:"filepreviewer",level:3},{value:"filePreviewerInnerContainer",id:"filepreviewerinnercontainer",level:3},{value:"Example",id:"example",level:3}];function c(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,t.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h1,{id:"main-ui-styles",children:"Main UI Styles"}),"\n",(0,l.jsx)(n.p,{children:"The main UI elements styles are as follows"}),"\n",(0,l.jsx)(n.h2,{id:"element-styles",children:"Element styles"}),"\n",(0,l.jsx)(n.h3,{id:"outercontainer",children:"outerContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of CustUp's wrapper container"}),"\n",(0,l.jsx)(n.h3,{id:"innercontainer",children:"innerContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the middle container wrapper"}),"\n",(0,l.jsx)(n.h3,{id:"sidebarleftcontainer",children:"sidebarLeftContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the left container"}),"\n",(0,l.jsx)(n.h3,{id:"sidebarrightcontainer",children:"sidebarRightContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the right container"}),"\n",(0,l.jsx)(n.h3,{id:"custupinnercontainerwrapperel",children:"custupInnerContainerWrapperEl"}),"\n",(0,l.jsx)(n.p,{children:"The style of the innerContainer's inner container that wraps the middle container elements"}),"\n",(0,l.jsx)(n.h3,{id:"headercontainer",children:"headerContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the header container"}),"\n",(0,l.jsx)(n.h3,{id:"footercontainer",children:"footerContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the footer container"}),"\n",(0,l.jsx)(n.h3,{id:"close_popup_btn",children:"close_popup_btn"}),"\n",(0,l.jsx)(n.p,{children:"The style of CustUp's native popup's Close button"}),"\n",(0,l.jsx)(n.h3,{id:"scrollbarel",children:"scrollBarEl"}),"\n",(0,l.jsx)(n.p,{children:"The style of the custom scroll bar"}),"\n",(0,l.jsx)(n.h3,{id:"defaultui",children:"defaultUI"}),"\n",(0,l.jsx)(n.p,{children:"The style of the default UI wrapper, the default UI is the UI that displays the file source\nicons"}),"\n",(0,l.jsx)(n.h3,{id:"defaultuiinnercontentel",children:"defaultUIInnerContentEl"}),"\n",(0,l.jsx)(n.p,{children:"The style of the default UI inner content main container"}),"\n",(0,l.jsx)(n.h3,{id:"defaultuiuploadsentencecontainer",children:"defaultUIUploadSentenceContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the upload description element that hints users on how to add new files to the UI"}),"\n",(0,l.jsx)(n.h3,{id:"defaultuiuploadiconscontainer",children:"defaultUIUploadIconsContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the file select sources"}),"\n",(0,l.jsx)(n.h3,{id:"uitool",children:"UITool"}),"\n",(0,l.jsx)(n.p,{children:"The style of the tools"}),"\n",(0,l.jsx)(n.h3,{id:"filedisplayui",children:"fileDisplayUI"}),"\n",(0,l.jsx)(n.p,{children:"The style of the default file list container wrapper"}),"\n",(0,l.jsx)(n.h3,{id:"fileuioutercontainer",children:"fileUIOuterContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the file display element wrapper"}),"\n",(0,l.jsx)(n.h3,{id:"file_wrapper_el",children:"file_wrapper_el"}),"\n",(0,l.jsx)(n.p,{children:"Ttyle of the element that wraps the file display inner element"}),"\n",(0,l.jsx)(n.h3,{id:"fileui",children:"fileUI"}),"\n",(0,l.jsx)(n.p,{children:"The style of the element that hold the file display"}),"\n",(0,l.jsx)(n.h3,{id:"filedetailscontainer",children:"fileDetailsContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the container that holds file details like file name, size and file preview"}),"\n",(0,l.jsx)(n.h3,{id:"custup_filename",children:"custup_fileName"}),"\n",(0,l.jsx)(n.p,{children:"The style of file name container"}),"\n",(0,l.jsx)(n.h3,{id:"custup_filesize",children:"custup_fileSize"}),"\n",(0,l.jsx)(n.p,{children:"The style of file size container"}),"\n",(0,l.jsx)(n.h3,{id:"filebottomdetails",children:"fileBottomDetails"}),"\n",(0,l.jsx)(n.p,{children:"The style _custup_file_detail_bottom_details_container"}),"\n",(0,l.jsx)(n.h3,{id:"fileuibottomtoolscontainer",children:"fileUIBottomToolsContainer"}),"\n",(0,l.jsxs)(n.p,{children:["The style of the bottom layer in the ",(0,l.jsx)(n.code,{children:"fileDetailsContainer"})," that holds the file size and file\npreview icon in the default UI"]}),"\n",(0,l.jsx)(n.h3,{id:"remove_file_btn",children:"remove_file_btn"}),"\n",(0,l.jsx)(n.p,{children:"The style of the remove file button"}),"\n",(0,l.jsx)(n.h3,{id:"file_upload_overlay_ui",children:"file_upload_overlay_ui"}),"\n",(0,l.jsx)(n.p,{children:"The style of the overlay that shows upload progress"}),"\n",(0,l.jsx)(n.h3,{id:"file_upload_overlay_inner_container",children:"file_upload_overlay_inner_container"}),"\n",(0,l.jsx)(n.p,{children:"The style of the inner container of the overlay that shows upload progress"}),"\n",(0,l.jsx)(n.h3,{id:"upload_progress_container",children:"upload_progress_container"}),"\n",(0,l.jsx)(n.p,{children:"The style of the upload progress element container"}),"\n",(0,l.jsx)(n.h3,{id:"file_upload_progress_inner",children:"file_upload_progress_inner"}),"\n",(0,l.jsx)(n.p,{children:"The style of the upload progress inner container that hold the upload progress element and\nother items"}),"\n",(0,l.jsx)(n.h3,{id:"file_upload_progress",children:"file_upload_progress"}),"\n",(0,l.jsx)(n.p,{children:"The style of the upload progress main element"}),"\n",(0,l.jsx)(n.h3,{id:"retry_upload_overlay_ui",children:"retry_upload_overlay_ui"}),"\n",(0,l.jsx)(n.p,{children:"The style of the default UI's upload retry element container"}),"\n",(0,l.jsx)(n.h3,{id:"retry_upload_button",children:"retry_upload_button"}),"\n",(0,l.jsx)(n.p,{children:"The style of the default UI upload retry button element"}),"\n",(0,l.jsx)(n.h3,{id:"message_container",children:"message_container"}),"\n",(0,l.jsx)(n.p,{children:"The style of CustUp notification message container"}),"\n",(0,l.jsx)(n.h3,{id:"filepreviewer",children:"filePreviewer"}),"\n",(0,l.jsx)(n.p,{children:"The style of CustUp's file previewer overlay container wrapper"}),"\n",(0,l.jsx)(n.h3,{id:"filepreviewerinnercontainer",children:"filePreviewerInnerContainer"}),"\n",(0,l.jsx)(n.p,{children:"The style of the inner container of file display element"}),"\n",(0,l.jsx)(n.p,{children:"The above Style column holds the key of the class names of all the default UI element styles which can be customized by either overriden or new classes can be added to them to customize them to suit any project's design."}),"\n",(0,l.jsxs)(n.p,{children:["This styles can be set in the option with the ",(0,l.jsx)(n.code,{children:"default_styles_override"})," option"]}),"\n",(0,l.jsx)(n.h3,{id:"example",children:"Example"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-js",children:"const instance1 = new CustUp ({\n default_styles_override: {\n outerContainer: ['custom_outer_container_class', true]\n }\n})\n"})})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(c,{...e})}):c(e)}},1151:(e,n,i)=>{i.d(n,{Z:()=>a,a:()=>o});var l=i(7294);const t={},r=l.createContext(t);function o(e){const n=l.useContext(r);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),l.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/72e14192.71a59871.js b/assets/js/72e14192.71a59871.js new file mode 100644 index 0000000..75b486c --- /dev/null +++ b/assets/js/72e14192.71a59871.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkcustup_doc=self.webpackChunkcustup_doc||[]).push([[7239],{4363:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>r,default:()=>p,frontMatter:()=>c,metadata:()=>l,toc:()=>o});var s=n(5893),i=n(1151);const c={sidebar_position:3},r="Quick Start",l={id:"quick-start",title:"Quick Start",description:"It is very easy to integrate CustUp in your web and mobile application",source:"@site/docs/quick-start.md",sourceDirName:".",slug:"/quick-start",permalink:"/docs/quick-start",draft:!1,unlisted:!1,editUrl:"https://github.com/paulosabayomi/custup-doc/tree/main/docs/quick-start.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Installation",permalink:"/docs/installation"},next:{title:"Guides",permalink:"/docs/category/guides"}},a={},o=[{value:"Installed via NPM",id:"installed-via-npm",level:2},{value:"UNPKG CDN option",id:"unpkg-cdn-option",level:2},{value:"Using with React JS",id:"using-with-react-js",level:2}];function u(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"quick-start",children:"Quick Start"}),"\n",(0,s.jsx)(t.p,{children:"It is very easy to integrate CustUp in your web and mobile application"}),"\n",(0,s.jsx)(t.h2,{id:"installed-via-npm",children:"Installed via NPM"}),"\n",(0,s.jsx)(t.p,{children:"CustUp should be imported like so"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",children:'import CustUp from "/path/to/custup/src/custup.min.js"\n\n// OR the unminified version\n// import CustUp from "/path/to/custup/src/custup.js"\n\nconst instance1 = new CustUp({\n targetRootElement: "#container"\n})\n'})}),"\n",(0,s.jsxs)(t.p,{children:["if you get ",(0,s.jsx)(t.code,{children:"Uncaught SyntaxError: import declarations may only appear at top level of a module"})," error add ",(0,s.jsx)(t.code,{children:'type="module"'})," to the javascript file where CustUp was imported into, example below"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-html",children:'\x3c!-- If CustUp was imported into a script name called index.js add type="module" --\x3e\n\x3c!-- ... --\x3e\n - + + -
Skip to main content

Archive

Archive

2021​

2019​

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
Skip to main content

Archive

Archive

2021​

2019​

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 945622b..747ba55 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -5,10 +5,10 @@ First Blog Post | CustUp - - + + -
Skip to main content

First Blog Post

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
Skip to main content

First Blog Post

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 0e91b33..a667f21 100644 --- a/blog/index.html +++ b/blog/index.html @@ -5,11 +5,11 @@ Blog | CustUp - - + + -
Skip to main content

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

+

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 66795a1..3ed8e50 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -5,11 +5,11 @@ Long Blog Post | CustUp - - + + -

Long Blog Post

· 3 min read
Endilie Yacop Sucipto

This is the summary of a very long blog post,

+

Long Blog Post

· 3 min read
Endilie Yacop Sucipto

This is the summary of a very long blog post,

Use a <!-- truncate --> comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

@@ -26,6 +26,6 @@

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 3c1e101..fecf3e1 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -5,11 +5,11 @@ MDX Blog Post | CustUp - - + + -
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index ae7c28b..8aefaa8 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -5,11 +5,11 @@ 4 posts tagged with "docusaurus" | CustUp - - + + -

4 posts tagged with "docusaurus"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

+

4 posts tagged with "docusaurus"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index 43ad23b..900771c 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -5,11 +5,11 @@ One post tagged with "facebook" | CustUp - - + + -

One post tagged with "facebook"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

+

One post tagged with "facebook"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 8d8ec67..3f4f660 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -5,11 +5,11 @@ 2 posts tagged with "hello" | CustUp - - + + -

2 posts tagged with "hello"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

+

2 posts tagged with "hello"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index 7715cf6..43d1fdf 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -5,10 +5,10 @@ One post tagged with "hola" | CustUp - - + + -

One post tagged with "hola"

View All Tags

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

One post tagged with "hola"

View All Tags

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index 3255586..2db4419 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -5,10 +5,10 @@ Tags | CustUp - - + + -

Tags

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

Tags

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/blog/welcome/index.html b/blog/welcome/index.html index f64503a..7ed3e7b 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -5,11 +5,11 @@ Welcome | CustUp - - + + -

Welcome

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

+

Welcome

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

@@ -20,6 +20,6 @@

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

-

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/category/customization/index.html b/docs/category/customization/index.html index cbaf465..d8d1d7f 100644 --- a/docs/category/customization/index.html +++ b/docs/category/customization/index.html @@ -5,10 +5,10 @@ Customization | CustUp - - + + -

Customization

5 minutes to learn the most important Docusaurus concepts.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

Customization

5 minutes to learn the most important Docusaurus concepts.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/category/guides/index.html b/docs/category/guides/index.html index eaeebb6..13a21ef 100644 --- a/docs/category/guides/index.html +++ b/docs/category/guides/index.html @@ -5,10 +5,10 @@ Guides | CustUp - - + + -

Guides

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

Guides

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/category/options/index.html b/docs/category/options/index.html index 1dc9c59..9617643 100644 --- a/docs/category/options/index.html +++ b/docs/category/options/index.html @@ -5,10 +5,10 @@ Options | CustUp - - + + -

Options

All CustUp options and descriptions

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

Options

All CustUp options and descriptions

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/category/types/index.html b/docs/category/types/index.html index cbf5cde..c7ce3e7 100644 --- a/docs/category/types/index.html +++ b/docs/category/types/index.html @@ -5,10 +5,10 @@ Types | CustUp - - + + -

Types

You can see all the types or simply object and array items that were not fully mentioned in other pages here

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

Types

You can see all the types or simply object and array items that were not fully mentioned in other pages here

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/category/ui-types/index.html b/docs/category/ui-types/index.html index 64620d2..dcd6199 100644 --- a/docs/category/ui-types/index.html +++ b/docs/category/ui-types/index.html @@ -5,10 +5,10 @@ UI types | CustUp - - + + -

UI types

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

UI types

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/contributing/index.html b/docs/contributing/index.html index 19e8694..4f5c6d7 100644 --- a/docs/contributing/index.html +++ b/docs/contributing/index.html @@ -5,11 +5,11 @@ Contributing | CustUp - - + + -

Contributing

+

Contributing

Contributions are welcome, my goal for CustUp is to make it a go to library for adding file uploader to any projects, your contributions are very important to make this possible.

There are many things you can contribute, some things that can be contribute to are:

    @@ -22,6 +22,6 @@ Vue JS
    Angular JS
    Ember JS -
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/custom-font/index.html b/docs/customization/custom-font/index.html index 9754a38..83db8a7 100644 --- a/docs/customization/custom-font/index.html +++ b/docs/customization/custom-font/index.html @@ -5,15 +5,15 @@ Using Custom Font | CustUp - - + + -

Using Custom Font

+

Using Custom Font

You can also provide another Font to be used within CustUp

Warning

Note: CustUp currently only supports Google Fonts, so only Google Fonts link may work as it is only Google Fonts has been tested but you can also try other fonts but it is not guaranteed if they will work

To use a font provide the link or the route to the font if the font is within the project and also the name of the font provided

const options = {
    // ...
    css_font_link: "https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap",
    css_font_name: "Dancing Script",
}

const uploader = new CustUp(options)
-

If you would like to use the already loaded font in the project then you only need to set the css_font_name to the font name.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

If you would like to use the already loaded font in the project then you only need to set the css_font_name to the font name.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/default-ui/index.html b/docs/customization/default-ui/index.html index 7f0e525..1cdddc5 100644 --- a/docs/customization/default-ui/index.html +++ b/docs/customization/default-ui/index.html @@ -5,11 +5,11 @@ Default UI | CustUp - - + + -

Default UI

+

Default UI

@@ -43,6 +43,6 @@

Icons listYou can rearrange and also choose which file sources you would like to list out on the default UI

To choose or rearrange the file sources icons you can use the allowed_sources option which takes an array of file sources

const instance1 = new CustUp({
    // ...
    allowed_sources: ['dropbox_source', 'record_screen', 'link_source', 'google_drive_source'],
})
-

The file sources icons will be listed as they listed in the array

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

The file sources icons will be listed as they listed in the array

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/external-sources/index.html b/docs/customization/external-sources/index.html index e7f096e..e221779 100644 --- a/docs/customization/external-sources/index.html +++ b/docs/customization/external-sources/index.html @@ -5,11 +5,11 @@ External Sources Styles | CustUp - - + + -

External Sources Styles

+

External Sources Styles

Just like the Media sources element styles, external sources styles are not part of the default UI and they get created and appended to the default UI, they can also be customized by either adding to their class names or overriding their class names.

Element Styles​

@@ -50,6 +50,6 @@

accept_file

Setting a custom class name for External source styles​

To set a custom class name for the External source styles use the external_source_style_override

Example​

-
const instance1 = new CustUp({
    // ...
    external_source_style_override: {
        dalleIntialPageButtonContainer: ['custom_class_name', true]
    }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const instance1 = new CustUp({
    // ...
    external_source_style_override: {
        dalleIntialPageButtonContainer: ['custom_class_name', true]
    }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/icons/index.html b/docs/customization/icons/index.html index 9a40798..d2d3b63 100644 --- a/docs/customization/icons/index.html +++ b/docs/customization/icons/index.html @@ -5,15 +5,15 @@ Icons | CustUp - - + + -

Icons

+

Icons

You can overide the icons or add your own programatically

You can override the icons or add your own icons with the default_icons_override option

For example

const options = {
    // ...
    default_icons_override: {
        send: '<div>S</div>',
        eye: '<div>E</div>'
    },
}

const uploader = new CustUp(options)
-

You can set either an SVG or an HTML element to override an icon or as a new icon.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

You can set either an SVG or an HTML element to override an icon or as a new icon.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/main-ui/index.html b/docs/customization/main-ui/index.html index f1e5b84..a522954 100644 --- a/docs/customization/main-ui/index.html +++ b/docs/customization/main-ui/index.html @@ -5,11 +5,11 @@ Main UI Styles | CustUp - - + + -

Main UI Styles

+

Main UI Styles

The main UI elements styles are as follows

Element styles​

outerContainer​

@@ -86,6 +86,6 @@

The above Style column holds the key of the class names of all the default UI element styles which can be customized by either overriden or new classes can be added to them to customize them to suit any project's design.

This styles can be set in the option with the default_styles_override option

Example​

-
const instance1 = new CustUp ({
    default_styles_override: {
        outerContainer: ['custom_outer_container_class', true]
    }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const instance1 = new CustUp ({
    default_styles_override: {
        outerContainer: ['custom_outer_container_class', true]
    }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/media-sources/index.html b/docs/customization/media-sources/index.html index dfc172c..fd9d41b 100644 --- a/docs/customization/media-sources/index.html +++ b/docs/customization/media-sources/index.html @@ -5,11 +5,11 @@ Media Source Styles | CustUp - - + + -

Media Source Styles

+

Media Source Styles

You can also customise the Media source UI styles, the media source elements are not part of the default UI elements, they gets added to the default UI as a popup and the main media sources container wrapper gets appended to the default UI's inner container.

Element Styles​

container​

@@ -24,6 +24,6 @@

Setting custom CSS class names​

The media_capture_source_style_override option is used for adding or overriding the element's class names

Example​

-
const instance1 = new CustUp({
  media_capture_source_style_override: {
    container: ['custum_class_name_to_add_to_the_container_el', true]
  }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const instance1 = new CustUp({
  media_capture_source_style_override: {
    container: ['custum_class_name_to_add_to_the_container_el', true]
  }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/overview/index.html b/docs/customization/overview/index.html index a0f4704..f75b6b8 100644 --- a/docs/customization/overview/index.html +++ b/docs/customization/overview/index.html @@ -5,11 +5,11 @@ Overview | CustUp - - + + -

Overview

+

Overview

The main reason why CustUp was made is so that it can be fully customized and adapted to any project design quickly and by just changing or adding to the CSS classes.

@@ -40,6 +40,6 @@

Styl 
const instance1 = new CustUp({
  defaultUI: ['new_class_name_for_the_default_ui_container', false]
})

Or use a string

const instance1 = new CustUp({
  defaultUI: "new_class_name_for_the_default_ui_container"
})
-

The above is the recommended way to override an element's class name

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

The above is the recommended way to override an element's class name

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/scrollbar/index.html b/docs/customization/scrollbar/index.html index e319333..9b0a9fc 100644 --- a/docs/customization/scrollbar/index.html +++ b/docs/customization/scrollbar/index.html @@ -5,15 +5,15 @@ Scrollbar | CustUp - - + + -

Scrollbar

+

Scrollbar

Even CustUp's container scrolling is custom made including the scroll bar, though I have not yet made the container scrolling to be customizable but the scrollbar is customizable and can even be set to not display.

To hide the scrollbar or simply to not show the scrollbar at all set disable_scrollbar to true

const instance1 = new CustUp({
    // ...
    disable_scrollbar: true
})

The scrollbar can also be styled to your taste, to style the scrollbar you can either add a new class name to the scrollbar element or override the scrollbar class names, the scrollBarEl style override option in default_styles_override is the scrollbar element style and you can override or add new class name(s) to it like below

-
const instance1 = new CustUp({
    default_styles_override: {
        scrollBarEl: ['random_scrollbar_el', true],
        // scrollBarEl: "random_scrollbar_el", // to override the current scrollbar element class name
    }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const instance1 = new CustUp({
    default_styles_override: {
        scrollBarEl: ['random_scrollbar_el', true],
        // scrollBarEl: "random_scrollbar_el", // to override the current scrollbar element class name
    }
})
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/customization/tools/index.html b/docs/customization/tools/index.html index 9b2c650..23fb0d3 100644 --- a/docs/customization/tools/index.html +++ b/docs/customization/tools/index.html @@ -5,11 +5,11 @@ Tools | CustUp - - + + -

Tools

+

Tools

Note

This page only applies when you're using the default UI type, the tools on the default UI type can be set to not display on the UI and in which case the settings on this page will not be effective

The tools on the default UI type can be rearranged and styles, and you can also set which tools you want to be displayed

To achieve this you will use the allowed_tools option which takes an array of tools for the default UI type

@@ -17,6 +17,6 @@ 
const options = {
    // ...
    allowed_tools: ['tools_dragger', 'add_file', 'upload', 'added_files_count', 'clear_files'],
}

const uploader = new CustUp(options)

The tools will be displayed according to their order in the array, and the ones that are not in the array will not be included on the UI, to not show the tools on the default UI type at all set allowed_tools to null

Example

-
const options = {
    // ...
    allowed_tools: null,
}

const uploader = new CustUp(options)
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const options = {
    // ...
    allowed_tools: null,
}

const uploader = new CustUp(options)
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/events/index.html b/docs/events/index.html index 8729843..e2aac9d 100644 --- a/docs/events/index.html +++ b/docs/events/index.html @@ -5,11 +5,11 @@ Events | CustUp - - + + -

Events

+
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

This event is triggered before retrying to upload a file.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/guides/attaching-instances/index.html b/docs/guides/attaching-instances/index.html index a7fc63a..1e4258f 100644 --- a/docs/guides/attaching-instances/index.html +++ b/docs/guides/attaching-instances/index.html @@ -5,14 +5,14 @@ Attaching instances | CustUp - - + + -

Attaching instances

+

Attaching instances

Guess the maximum number of CustUp instances that can be on a single page, Infinity, and up to the maximum capacity of the user's device memory, so also it is also possible to attach one or more CustUp instances to another instance basically for collective file upload, that is if you have more than one CustUp instances on a single page and you would like to upload all the files added to all the instances together in a single upload.
For Example

const instance1 = new CustUp({...});
const instance2 = new CustUp({...});
const instance3 = new CustUp({...});
const instance4 = new CustUp({
    //...
    instance_attach: [instance1, instance2, instance3],
    single_upload: true, // required
});
instance4.upload();
-

single_upload is required to be set to true, because currently the main purpose of instance attachment is for combined file upload for single upload. Read more on single_upload here.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

single_upload is required to be set to true, because currently the main purpose of instance attachment is for combined file upload for single upload. Read more on single_upload here.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/guides/basics/index.html b/docs/guides/basics/index.html index de6f6e0..af1760a 100644 --- a/docs/guides/basics/index.html +++ b/docs/guides/basics/index.html @@ -5,11 +5,11 @@ Basics | CustUp - - + + -

Basics

+

Basics

First of all import CustUp

import CustUp from "/path/to/custup/src/custup.min.js"

Basic options

@@ -32,6 +32,6 @@

Even the CustUp scrolling and scrollbar are custom made so you can also customize them, to not show the scrollbar set disable_scrollbar to false

const options = {
    // ...
    disable_scrollbar: false
}
const uploader = new CustUp(options)

When previewing a file there are in and out animations, by default the animations are randomized but you can set which animations to use or you can also disable the animations

-
const options = {
    // ...
    file_preview_animation_types: ['slideInLeft'], // the animation previewer will only use `slideInLeft` animation type

    // file_preview_animation_types: ['slideInRight', 'zoomIn', 'slideInLeft'], // this will randomly choose between the array of the animations when displaying files

    // file_preview_animation_types: null, // to disable file preview animation set it to null
}
const uploader = new CustUp(options)
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const options = {
    // ...
    file_preview_animation_types: ['slideInLeft'], // the animation previewer will only use `slideInLeft` animation type

    // file_preview_animation_types: ['slideInRight', 'zoomIn', 'slideInLeft'], // this will randomly choose between the array of the animations when displaying files

    // file_preview_animation_types: null, // to disable file preview animation set it to null
}
const uploader = new CustUp(options)
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/guides/file-sources/index.html b/docs/guides/file-sources/index.html index 60d7dbf..4947002 100644 --- a/docs/guides/file-sources/index.html +++ b/docs/guides/file-sources/index.html @@ -5,11 +5,11 @@ File sources | CustUp - - + + -

File sources

+

File sources

Different methods for selecting files or adding files to CustUp is divided into External, Device and Media Sources, but this guide only focuses on external and media sources.

External Sources are​

    @@ -28,6 +28,6 @@

    And Me
  • Screen Recording You can choose which sources to allow and the order in which you want them to appear on the UI

-
const options = {
    // ...
    allowed_sources: ['dropbox_source'], // only Dropbox file source icon will be displayed on the UI    
    // allowed_sources: ['openai_dalle_source', 'capture_image', 'box_source'], // only OpenAI DALL.E-3, Image capture from media devices and Box icons will be displayed and ordered as listed in the array 
}

const uploader = new CustUp(options)
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
const options = {
    // ...
    allowed_sources: ['dropbox_source'], // only Dropbox file source icon will be displayed on the UI    
    // allowed_sources: ['openai_dalle_source', 'capture_image', 'box_source'], // only OpenAI DALL.E-3, Image capture from media devices and Box icons will be displayed and ordered as listed in the array 
}

const uploader = new CustUp(options)
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/guides/react-integration/index.html b/docs/guides/react-integration/index.html index aa65987..96c80ad 100644 --- a/docs/guides/react-integration/index.html +++ b/docs/guides/react-integration/index.html @@ -5,11 +5,11 @@ React JS integration | CustUp - - + + -

React JS integration

+

React JS integration

Though the React JS version of CustUp is not yet available but it can work in your React JS applications and it has been tested, this documentation uses React JS and CustUp works in it :)

Installation​

Install CustUp from npm

@@ -25,6 +25,6 @@

Initiali
ExampleComponent.jsx
const ExampleComponent = React.memo(({}) => {
    const [instance1, setInstance1] = React.useState({})
    // const [instance1, setInstance1] = React.useState<any>({}) // if using typescript

    React.useLayoutEffect(() => {
        const _inst1 = new CustUp({
            targetRootElement: "#container-1",
            // ...
        });

        setInstance1(_inst1);
    }, [])

    const exampleCustomSubmit = React.useCallback(() => {
        instance1.upload();
    }, [instance1]);

    return (
        <div>
            <div id="container-1"></div>
            <button onClick={exampleCustomSubmit}>Submit</button>
        </div>
    )
});

export default ExampleComponent;

Everything altogether​

index.js
// ...
import 'custup/src/all.min.css';
// ...
-
ExampleComponent.jsx
import React from 'react';
import CustUp from "custup/src/custup.min";

const ExampleComponent = React.memo(({}) => {
    const [instance1, setInstance1] = React.useState({});
    // const [instance1, setInstance1] = React.useState<any>({}); // if using typescript

    React.useLayoutEffect(() => {
        const _inst1 = new CustUp({
            targetRootElement: "#container-1",
            // ...
        });

        setInstance1(_inst1);
    }, [])

    const exampleCustomSubmit = React.useCallback(() => {
        instance1.upload();
    }, [instance1]);

    return (
        <div>
            <div id="container-1"></div>
            <button onClick={exampleCustomSubmit}>Submit</button>
        </div>
    )
});

export default ExampleComponent;
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
ExampleComponent.jsx
import React from 'react';
import CustUp from "custup/src/custup.min";

const ExampleComponent = React.memo(({}) => {
    const [instance1, setInstance1] = React.useState({});
    // const [instance1, setInstance1] = React.useState<any>({}); // if using typescript

    React.useLayoutEffect(() => {
        const _inst1 = new CustUp({
            targetRootElement: "#container-1",
            // ...
        });

        setInstance1(_inst1);
    }, [])

    const exampleCustomSubmit = React.useCallback(() => {
        instance1.upload();
    }, [instance1]);

    return (
        <div>
            <div id="container-1"></div>
            <button onClick={exampleCustomSubmit}>Submit</button>
        </div>
    )
});

export default ExampleComponent;
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/installation/index.html b/docs/installation/index.html index 6e5f36b..50b7591 100644 --- a/docs/installation/index.html +++ b/docs/installation/index.html @@ -5,14 +5,14 @@ Installation | CustUp - - + + -

Installation

+

Installation

Install via npm

npm i custup

or include it directly from UNPKG

-
import CustUp from 'https://unpkg.com/custup@0.0.3/src/custup.min.js' 

// OR unminified version

import CustUp from 'https://unpkg.com/custup@0.0.3/src/custup.js' 

// and the CSS file
// all CSS combined into one
<link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/all.min.css">

// OR individual files
<link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/custup.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/bare.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/detached.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/profilePicture.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/resumeUploaderUI.min.css">
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+
import CustUp from 'https://unpkg.com/custup@latest/src/custup.min.js' 

// OR unminified version

import CustUp from 'https://unpkg.com/custup@latest/src/custup.js' 

// and the CSS file
// all CSS combined into one
<link rel="stylesheet" href="https://unpkg.com/custup@latest/src/all.min.css">

// OR individual files
<link rel="stylesheet" href="https://unpkg.com/custup@latest/src/custup.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@latest/src/bare.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@latest/src/detached.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@latest/src/profilePicture.min.css">
<link rel="stylesheet" href="https://unpkg.com/custup@latest/src/resumeUploaderUI.min.css">
Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/intro/index.html b/docs/intro/index.html index 3f02acd..ce31b05 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -5,11 +5,11 @@ Introduction | CustUp - - + + -

Introduction

+

Introduction

CustUp is a highly customizable library with zero dependency, and can be easily adapted to a wide range of applications.

Brief Overview​

CustUp which is the short for Customizable Uploader was made to be >95% customizable if not 100%, and it is very easy to customize it to suit any kind of project you're working on.

@@ -21,6 +21,6 @@

Inspiration​

-

When I was working on a freelance project that has a custom file upload UI design some years back, I searched for libraries that can fit into the design or one that has an option to change the UI style to fit into my project and that does not have any dependencies but I couldn't find any that fit into the description and I had to write a custom implementation for the file uploader from scratch, and then few years later I decided to build a file upload library that fits into the description of the library I couldn't find then.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
+

When I was working on a freelance project that has a custom file upload UI design some years back, I searched for libraries that can fit into the design or one that has an option to change the UI style to fit into my project and that does not have any dependencies but I couldn't find any that fit into the description and I had to write a custom implementation for the file uploader from scratch, and then few years later I decided to build a file upload library that fits into the description of the library I couldn't find then.

Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
\ No newline at end of file diff --git a/docs/methods/index.html b/docs/methods/index.html index 98cff96..16d13b9 100644 --- a/docs/methods/index.html +++ b/docs/methods/index.html @@ -5,11 +5,11 @@ Methods | CustUp - - + + -

Methods

+

Methods

This page consists of all the CustUp methods for interacting with CustUp instances.

File Upload​

upload​

@@ -211,6 +211,6 @@

launch_d
  • returns
    void
    • -

    This method launches the DALL.E file source UI to generate files with OpenAI DALL.E v3.

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +

    This method launches the DALL.E file source UI to generate files with OpenAI DALL.E v3.

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/options/file-sources-config/index.html b/docs/options/file-sources-config/index.html index eb38d0c..d4525d6 100644 --- a/docs/options/file-sources-config/index.html +++ b/docs/options/file-sources-config/index.html @@ -5,11 +5,11 @@ File Sources | CustUp - - + + -

    File Sources

    +

    File Sources

    This page contains the options for file sources configurations.

    Note

    The external file sources are not pre-configured unlike other file uploaders that make it work out of the box preconfigured, unfortunately based on how CustUp was made they have to be configured for your projects, the full guides and relevant external links on how to set them up are on this page.

    The options on this page should be added under the file_source_config option.

    @@ -83,6 +83,6 @@

    Example
    const instance1 = new CustUp({
      // ...
      file_source_config: {
        openai_dalle_source: {
             api_key: 'api-key-from-openai',
             size: "1792x1024",
             n: 1,
             model: "dall-e-3",
             quality: "hd"
        }
      }
    })

    Properties description​

    PropertyTypeDefaultDescription
    api_keystring<empty string>OpenAI API key is required to use DALL.E 3
    size"1024x1024" | "1024x1792" | "1792x1024""1024x1024"The size of the image that will be generated by DALL.E
    nnumber1Number of images that will be generated by DALL.E
    model"dall-e-3" | "dall-e-2""dall-e-3"The DALL.E model that should be used, the default is "dall-e-3" note that though there is an option for the version 2 of DALL.E it may be buggy because CustUp has been optimized to use version 3
    quality"standard" | "hd""standard"The quality of the image that will be generated by DALL.E 3
    -

    To learn more about DALL.E 3 API follow this link

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +

    To learn more about DALL.E 3 API follow this link

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/options/main/index.html b/docs/options/main/index.html index 29af27c..6a1f92e 100644 --- a/docs/options/main/index.html +++ b/docs/options/main/index.html @@ -5,11 +5,11 @@ Main | CustUp - - + + -

    Main

    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    const instance1 = new CustUp({
        targetRootElement: "#example-container",
        // ...
        persist_files: true,
        persist_type: 'hard'
    })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/quick-start/index.html b/docs/quick-start/index.html index 1f33039..a17c44e 100644 --- a/docs/quick-start/index.html +++ b/docs/quick-start/index.html @@ -5,23 +5,25 @@ Quick Start | CustUp - - + + -

    Quick Start

    +

    Quick Start

    It is very easy to integrate CustUp in your web and mobile application

    Installed via NPM​

    -

    if you install it through npm, you can import it directly

    +

    CustUp should be imported like so

    import CustUp from "/path/to/custup/src/custup.min.js"

    // OR the unminified version
    // import CustUp from "/path/to/custup/src/custup.js"

    const instance1 = new CustUp({
        targetRootElement: "#container"
    })
    +

    if you get Uncaught SyntaxError: import declarations may only appear at top level of a module error add type="module" to the javascript file where CustUp was imported into, example below

    +
    <!-- If CustUp was imported into a script name called index.js add type="module" -->
    <!-- ... -->
    <script type="module" src="./index.js"></script>

    Then add the CSS file to the header

    <!--All the CSS files combined together -->
    <link rel="stylesheet" href="path/to/custup/src/all.min.css">

    <!-- OR individual CSS files -->
    <!-- Bare UI CSS file -->
    <link rel="stylesheet" href="path/to/custup/src/bare.min.css">
    <!-- CustUp default UI CSS file -->
    <link rel="stylesheet" href="path/to/custup/src/custup.min.css">
    <!-- Detached UI CSS file -->
    <link rel="stylesheet" href="path/to/custup/src/detached.min.css">
    <!-- ResumeUploader UI CSS file -->
    <link rel="stylesheet" href="path/to/custup/src/resumeUploaderUI.min.css">

    and that's all you need to get CustUp running, the only required option is the targetRootElement which is a CSS selector of the HTML element in which CustUp will be created into.

    UNPKG CDN option​

    -
    import CustUp from 'https://unpkg.com/custup@0.0.3/src/custup.min.js' 

    // OR unminified version
    import CustUp from 'https://unpkg.com/custup@0.0.3/src/custup.js' 

    const instance1 = new CustUp({
        targetRootElement: "#container"
    })
    +
    import CustUp from 'https://unpkg.com/custup@latest/src/custup.min.js' 

    // OR unminified version
    import CustUp from 'https://unpkg.com/custup@latest/src/custup.js' 

    const instance1 = new CustUp({
        targetRootElement: "#container"
    })

    You can include the CSS files from UNPKG like

    -
    <!--All the CSS files combined together -->
    <link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/all.min.css">

    <!-- OR individual CSS files -->
    <!-- Bare UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/bare.min.css">
    <!-- CustUp default UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/custup.min.css">
    <!-- Detached UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/detached.min.css">
    <!-- ResumeUploader UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@0.0.3/src/resumeUploaderUI.min.css">
    +
    <!--All the CSS files combined together -->
    <link rel="stylesheet" href="https://unpkg.com/custup@latest/src/all.min.css">

    <!-- OR individual CSS files -->
    <!-- Bare UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@latest/src/bare.min.css">
    <!-- CustUp default UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@latest/src/custup.min.css">
    <!-- Detached UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@latest/src/detached.min.css">
    <!-- ResumeUploader UI CSS file -->
    <link rel="stylesheet" href="https://unpkg.com/custup@latest/src/resumeUploaderUI.min.css">

    Using with React JS​

    -

    CustUp can also work in React JS applications, check out the guide on how to install and use CustUp in your React JS application here.

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +

    CustUp can also work in React JS applications, check out the guide on how to install and use CustUp in your React JS application here.

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/allowed-sources/index.html b/docs/types/allowed-sources/index.html index fa85e2c..99bee3d 100644 --- a/docs/types/allowed-sources/index.html +++ b/docs/types/allowed-sources/index.html @@ -5,11 +5,11 @@ Allowed sources | CustUp - - + + -

    Allowed sources

    +

    Allowed sources

    These are all the currently available file select sources.

    • record_video
      • @@ -21,6 +21,6 @@
    • dropbox_source
    • box_source
    • openai_dalle_source
      • -
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/allowed-tools/index.html b/docs/types/allowed-tools/index.html index b71eaf1..5b22cc9 100644 --- a/docs/types/allowed-tools/index.html +++ b/docs/types/allowed-tools/index.html @@ -5,11 +5,11 @@ Allowed tools | CustUp - - + + -

    Allowed tools

    +

    Allowed tools

    The following is the list of all currently available tools and that can be provided to the array of tools to be displayed on the UI in the allowed_tools option.

    tools_dragger​

    The tool for dragging the default UI tool horizontally

    @@ -20,6 +20,6 @@

    add_fileadded_files_count​

    The file counter display tool

    clear_files​

    -

    The tool that serves as a clear button and that clear all the files

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +

    The tool that serves as a clear button and that clear all the files

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/file-preview-anim/index.html b/docs/types/file-preview-anim/index.html index fd72d17..0d6296d 100644 --- a/docs/types/file-preview-anim/index.html +++ b/docs/types/file-preview-anim/index.html @@ -5,17 +5,17 @@ File Preview Animations | CustUp - - + + -

    File Preview Animations

    +

    File Preview Animations

    The list of all the currently available file preview animations and that can be set to the file_preview_animation_types option array

    slideInRight slideInTop slideInLeft slideInBottom zoomIn -fadeIn

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +fadeIn

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/file-source-icons/index.html b/docs/types/file-source-icons/index.html index 09c86cb..1c60597 100644 --- a/docs/types/file-source-icons/index.html +++ b/docs/types/file-source-icons/index.html @@ -5,11 +5,11 @@ File source icons | CustUp - - + + -

    File source icons

    +

    File source icons

    List of all the file sources icons for the for the file_source_icons override option, it is identical to the allowed sources list but the implementation is different.

    video_camera​

    The video camera source icon

    @@ -28,6 +28,6 @@

    dropbox_sourc

    box_source​

    The Box source icon

    openai_dalle_source​

    -

    The OpenAI DALL.E-3 source icon

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +

    The OpenAI DALL.E-3 source icon

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/file-types/index.html b/docs/types/file-types/index.html index 72273a0..6e22bd9 100644 --- a/docs/types/file-types/index.html +++ b/docs/types/file-types/index.html @@ -5,11 +5,11 @@ File types | CustUp - - + + -
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/icons/index.html b/docs/types/icons/index.html index 7aa506c..81a927c 100644 --- a/docs/types/icons/index.html +++ b/docs/types/icons/index.html @@ -5,11 +5,11 @@ Icons | CustUp - - + + -
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/types/ui-type/index.html b/docs/types/ui-type/index.html index 745437f..678d2f6 100644 --- a/docs/types/ui-type/index.html +++ b/docs/types/ui-type/index.html @@ -5,11 +5,11 @@ UI type | CustUp - - + + -

    UI type

    +

    UI type

    Complete list of all currently available UI types and that can be provided to the ui_type option

    • default
      • @@ -17,6 +17,6 @@
    • bare
    • detached
    • profilePicture
      • -
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/ui-types/bare-ui/index.html b/docs/ui-types/bare-ui/index.html index 0db5b40..c0609d9 100644 --- a/docs/ui-types/bare-ui/index.html +++ b/docs/ui-types/bare-ui/index.html @@ -5,17 +5,17 @@ Bare | CustUp - - + + -

    Bare

    +

    Bare

    Bare UI type is the simplest UI type.

    -
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'bare'
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'bare'
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/ui-types/default-ui/index.html b/docs/ui-types/default-ui/index.html index b560584..7e9f72b 100644 --- a/docs/ui-types/default-ui/index.html +++ b/docs/ui-types/default-ui/index.html @@ -5,16 +5,16 @@ Default | CustUp - - + + -

    Default

    +

    Default

    The default UI type uses the default styles that were used to develop CustUp, it can also be customized to meet the need of your projects.

    -
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/ui-types/detached-ui/index.html b/docs/ui-types/detached-ui/index.html index 4036378..7110614 100644 --- a/docs/ui-types/detached-ui/index.html +++ b/docs/ui-types/detached-ui/index.html @@ -5,17 +5,17 @@ Detached | CustUp - - + + -

    Detached

    +

    Detached

    Detached UI type is the type that has the default UI and file display separately on the UI.

    -
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'detached'
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'detached'
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/ui-types/intro/index.html b/docs/ui-types/intro/index.html index 13a1264..3b3fe2f 100644 --- a/docs/ui-types/intro/index.html +++ b/docs/ui-types/intro/index.html @@ -5,11 +5,11 @@ Introduction | CustUp - - + + -

    Introduction

    +

    Introduction

    CustUp has other range of UI types that you can choose from, you can choose the ones that very closely match your project, and they are also customizable.

    And guess what? The other UI types were built just by customizing CustUp.

    UI types​

    @@ -20,6 +20,6 @@

    UI typesDetached UI
  • Profile picture
  • Resume Uploader
    • -

    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/ui-types/profile-picture-ui/index.html b/docs/ui-types/profile-picture-ui/index.html index 5dc8ca1..f1d8f41 100644 --- a/docs/ui-types/profile-picture-ui/index.html +++ b/docs/ui-types/profile-picture-ui/index.html @@ -5,17 +5,17 @@ Profile Picture | CustUp - - + + -

    Profile Picture

    +

    Profile Picture

    The profile picture UI type is the type for creating a profile picture file uploader, it accepts single file and only image files.

    -
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'profilePicture'
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'profilePicture'
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/docs/ui-types/resume-uploader-ui/index.html b/docs/ui-types/resume-uploader-ui/index.html index e3e45e3..b372e6f 100644 --- a/docs/ui-types/resume-uploader-ui/index.html +++ b/docs/ui-types/resume-uploader-ui/index.html @@ -5,11 +5,11 @@ Resume Upload | CustUp - - + + -

    Resume Upload

    +

    Resume Upload

    The Resume/Curriculum Vitae (CV) Upload UI type is the type of uploader you see on most job application websites for uploading resumes, you can also customize it to the taste of your project.

    @@ -17,6 +17,6 @@
    -
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'resumeUploaderUI',
                allowed_file_types: ['pdf'],
                maximumAllowedFileSize: 10000000
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +
    index.js
    const instance1 = new CustUp({
                targetRootElement: "#container-1",
                default_styles_override: {
                    outerContainer: ["custup_outer_contaner", true],
                },
                // ...
                ui_type: 'resumeUploaderUI',
                allowed_file_types: ['pdf'],
                maximumAllowedFileSize: 10000000
                // ...

            })
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 908946d..e1b20fd 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,11 +5,11 @@ Job Application page Example | CustUp - - + + -

    Job application page Example

    +

    Job application page Example

    This example is just a demonstration of how there can be many CustUp instances on a single page.

    diff --git a/index.html b/index.html index af82783..cfb4279 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,12 @@ -Hello from CustUp | CustUp +CustUp Documentation | CustUp - - + + -

    CustUp

    Stop settling, start customizing. CustUp is the ultimate file upload toolbox, built for developers who dare to dream. Endless options, zero limitations. Go bold!
    Craft the perfect upload experience with CustUp.
    This lightning-fast, ultra-customizable library lets you fine-tune every detail, from UI to drag-and-drop workflows to progress bars, error messages and so on. Make uploading a breeze for your users!
    Select the UI type that fit your project
    Or customize it to fit your project
    You can use CustUp with
    Features
    Choose the UI that fits your project
    Customize the UI to fit your project
    Easily build your own UI
    Attach multiple CustUp instances together for combined file upload
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    +

    CustUp

    Stop settling, start customizing. CustUp is the ultimate file upload toolbox, built for developers who dare to dream. Endless options, zero limitations. Go bold!
    Craft the perfect upload experience with CustUp.
    This lightning-fast, ultra-customizable library lets you fine-tune every detail, from UI to drag-and-drop workflows to progress bars, error messages and so on. Make uploading a breeze for your users!
    Select the UI type that fit your project
    Or customize it to fit your project
    You can use CustUp with
    Features
    Choose the UI that fits your project
    Customize the UI to fit your project
    Easily build your own UI
    Attach multiple CustUp instances together for combined file upload
    Generate images with DALL.E-3
    Copyright © 2023 CustUp. Built with ♥ by Paulos Ab.
    \ No newline at end of file diff --git a/markdown-page/index.html b/markdown-page/index.html index 73a80d1..a72af40 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -5,11 +5,11 @@ Markdown page example | CustUp - - + + -

    Markdown page example

    +

    Markdown page example

    You don't need React to write simple standalone pages.

    \ No newline at end of file