1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < title > Uploadcare JS Regular Example</ title >
6+ < meta name ="description " content ="Uploading files with HTML and JS using Uploadcare " />
7+ < meta charset ="UTF-8 " />
8+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
9+
10+ < link rel ="stylesheet "
11+ href ="
https://cdn.jsdelivr.net/npm/@uploadcare/[email protected] /web/lr-file-uploader-regular.min.css "
> 12+ < link rel ="stylesheet " href ="./styles.css ">
13+ </ head >
14+
15+ < body >
16+ < p >
17+ < a href ="/ "> ← All JS Examples</ a >
18+ </ p >
19+
20+ < hr >
21+
22+ < lr-config ctx-name ="my-uploader " pubkey ="a6ca334c3520777c0045 " sourceList ="local, url, camera, dropbox "> </ lr-config >
23+ < lr-file-uploader-regular headless ctx-name ="my-uploader "> </ lr-file-uploader-regular >
24+ < lr-upload-ctx-provider ctx-name ="my-uploader " id ="my-uploader-provider "> </ lr-upload-ctx-provider >
25+ < button id ="custom-button "> Custom button</ button >
26+
27+ < div class ="previews " id ="previews "> </ div >
28+
29+ < script type ="module ">
30+ import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/[email protected] /web/lr-file-uploader-regular.min.js' ; 31+
32+ LR . registerBlocks ( LR ) ;
33+
34+ const providerNode = document . getElementById ( 'my-uploader-provider' ) ;
35+ const previewsNode = document . getElementById ( 'previews' ) ;
36+ const customButtonNode = document . getElementById ( 'custom-button' )
37+
38+
39+ /*
40+ Note: Here we use provider's API to init flow File Uploader state.
41+ We use it here to show users how to use headless mode and work with File Uploader.
42+
43+ See more: https://uploadcare.com/docs/file-uploader/api/
44+ */
45+
46+ const initFlow = ( ) => providerNode . initFlow ( )
47+ customButtonNode . addEventListener ( 'click' , initFlow )
48+
49+ /*
50+ Note: Event binding is the main way to get data and other info from File Uploader.
51+ There plenty of events you may use.
52+
53+ See more: https://uploadcare.com/docs/file-uploader/events/
54+ */
55+ providerNode . addEventListener ( 'change' , handleChangeEvent ) ;
56+
57+ function handleChangeEvent ( e ) {
58+ console . log ( 'change event payload:' , e ) ;
59+
60+ renderFiles ( e . detail . allEntries . filter ( f => f . status === 'success' ) ) ;
61+ }
62+
63+ function renderFiles ( files ) {
64+ const renderedFiles = files . map ( file => {
65+ const fileNode = document . createElement ( 'div' ) ;
66+ fileNode . setAttribute ( 'class' , 'preview-wrapper' ) ;
67+
68+ const imgNode = document . createElement ( 'img' ) ;
69+ imgNode . setAttribute ( 'class' , 'preview-image' ) ;
70+ imgNode . setAttribute ( 'src' , file . cdnUrl + '/-/preview/-/resize/x400/' ) ;
71+ imgNode . setAttribute ( 'width' , '200' ) ;
72+ imgNode . setAttribute ( 'height' , '200' ) ;
73+ imgNode . setAttribute ( 'alt' , file . fileInfo . originalFilename ) ;
74+ imgNode . setAttribute ( 'title' , file . fileInfo . originalFilename ) ;
75+
76+ const imgNameNode = document . createElement ( 'p' ) ;
77+ imgNameNode . setAttribute ( 'class' , 'preview-data' ) ;
78+ imgNameNode . textContent = `${ file . fileInfo . originalFilename } ;
79+
80+ const imgSizeNode = document . createElement ( 'p' ) ;
81+ imgSizeNode . setAttribute ( 'class' , 'preview-data' ) ;
82+ imgSizeNode . textContent = `${ formatSize ( file . fileInfo . size ) } ;
83+
84+ fileNode . append ( imgNode , imgNameNode , imgSizeNode ) ;
85+
86+ return fileNode ;
87+ } ) ;
88+
89+ previewsNode . replaceChildren ( ...renderedFiles ) ;
90+ }
91+
92+ function formatSize ( bytes ) {
93+ if ( ! bytes ) return '0 Bytes' ;
94+
95+ const k = 1024 ;
96+ const sizes = [ 'Bytes' , 'KB' , 'MB' , 'GB' , 'TB' , 'PB' , 'EB' , 'ZB' , 'YB' ] ;
97+
98+ const i = Math . floor ( Math . log ( bytes ) / Math . log ( k ) ) ;
99+
100+ return `${ parseFloat ( ( bytes / k ** i ) . toFixed ( 2 ) ) } ${ sizes [ i ] } ;
101+ }
102+ </ script >
103+ </ body >
104+
105+ </ html >
0 commit comments