Componente
Upload
Caricamento di file: daisyUI file-input, un'area di trascinamento dove si rilasciano i file direttamente sul campo nativo, l'elenco dei file allegati con stato e avanzamento, e il cambio della foto profilo.
- Riferimento
<it-upload>- Classi
ita-file-inputita-file-input-smita-file-input-lgita-dropzoneita-dropzone-titleita-dropzone-textita-dropzone-hintita-dropzone-doneita-dropzone-overita-upload-listita-upload-fileita-upload-statusita-upload-percentita-upload-errorita-upload-removeita-upload-avatarita-upload-button- Basato su (daisyUI)
file-inputfile-input-primaryprogressavatarbtn- Solo CSS
- L'area di trascinamento è il campo file stesso, trasparente e steso su tutta l'area: il rilascio di un file è un rilascio nativo sul campo, senza script. Con required, :valid dice al CSS che un file è stato scelto e l'area diventa verde. Elenco dei file scelti, anteprime, evidenziazione durante il trascinamento e invio con barra di avanzamento richiedono JavaScript: vedi sotto. L'elenco dei file già caricati è HTML reso dal server, e il cestino è un pulsante di invio.
- Storybook
- Apri le storie di Upload
Campo file
Formato PDF, massimo 5 MB.
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-6">
<div class="ita-field">
<label for="upload-1" class="ita-label">Allega un documento</label>
<input type="file" id="upload-1" class="ita-file-input" accept=".pdf" aria-describedby="upload-1-hint">
<p id="upload-1-hint" class="ita-hint">Formato PDF, massimo 5 MB.</p>
</div>
<div class="ita-field">
<label for="upload-2" class="ita-label">Allega più documenti</label>
<input type="file" id="upload-2" class="ita-file-input ita-file-input-sm" multiple>
</div>
<div class="ita-field">
<label for="upload-3" class="ita-label">Campo disabilitato</label>
<input type="file" id="upload-3" class="ita-file-input" disabled>
</div>
</div>Area di trascinamento
Trascina un file sull'area o cliccala. La seconda è obbligatoria: dopo la scelta diventa verde, solo con CSS.
Trascina qui i file
oppure selezionali dal dispositivo
PDF o immagini, massimo 10 MB ciascuno
Trascina qui il documento d'identità — file selezionato
oppure selezionali dal dispositivo
Obbligatorio. PDF o JPG, massimo 5 MB
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-6">
<div class="ita-dropzone">
<svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.4,7.3L7.7,6.6L12,2.3l4.3,4.3l-0.7,0.7l-3.1-3.1v9.3h-1V4.2L8.4,7.3z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg>
<p class="ita-dropzone-title">Trascina qui i file</p>
<p class="ita-dropzone-text">oppure <span>selezionali dal dispositivo</span></p>
<p id="dropzone-4-hint" class="ita-dropzone-hint">PDF o immagini, massimo 10 MB ciascuno</p>
<input type="file" id="dropzone-4" aria-label="Trascina qui i file, oppure selezionali dal dispositivo" aria-describedby="dropzone-4-hint" multiple>
</div>
<div class="ita-dropzone">
<svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.4,7.3L7.7,6.6L12,2.3l4.3,4.3l-0.7,0.7l-3.1-3.1v9.3h-1V4.2L8.4,7.3z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg><svg class="ita-dropzone-done shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<p class="ita-dropzone-title">Trascina qui il documento d'identità<span class="ita-dropzone-done"> — file selezionato</span></p>
<p class="ita-dropzone-text">oppure <span>selezionali dal dispositivo</span></p>
<p id="dropzone-5-hint" class="ita-dropzone-hint">Obbligatorio. PDF o JPG, massimo 5 MB</p>
<input type="file" id="dropzone-5" aria-label="Trascina qui il documento d'identità, oppure selezionali dal dispositivo" aria-describedby="dropzone-5-hint" accept=".pdf,.jpg,.jpeg" required>
</div>
</div>Elenco dei file
-
Caricato
carta-identita.pdf
1,2 MB
-
64%
planimetria.png
3,4 MB
-
Errore
delega-firmata.docx
Formato non ammesso: usa PDF
-
Caricato
ricevuta-pagamento.pdf
180 KB
Mostra il codice HTMLNascondi il codice HTML
<ul class="ita-upload-list" aria-label="File allegati">
<li>
<div>
<svg class="ita-upload-file shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M6.5 2H14.7L19 6.3V20.5C19 21.3284 18.3284 22 17.5 22H6.5C5.67157 22 5 21.3284 5 20.5V3.5C5 2.67157 5.67157 2 6.5 2ZM17.3 6L15 3.7V5.5C15 5.77614 15.2239 6 15.5 6H17.3ZM17.5 21H6.5C6.22386 21 6 20.7761 6 20.5V3.5C6 3.22386 6.22386 3 6.5 3H14V5.5C14 6.32843 14.6716 7 15.5 7H18V20.5C18 20.7761 17.7761 21 17.5 21ZM8.11635 17.1101C8.20668 17.2907 8.34658 17.453 8.55474 17.529C8.76156 17.6045 8.96631 17.5694 9.13467 17.5C9.45298 17.3689 9.77004 17.0635 10.0607 16.713C10.3934 16.312 10.7438 15.7864 11.0818 15.2032C11.404 15.1073 11.7405 15.0235 12.079 14.9547C12.421 14.8852 12.7584 14.8324 13.0786 14.7976C13.3783 15.18 13.6888 15.51 13.9894 15.7473C14.269 15.9681 14.5917 16.1506 14.923 16.1639C15.0988 16.171 15.2745 16.1299 15.4325 16.0265C15.5873 15.9252 15.7027 15.7789 15.7871 15.61C15.8776 15.4291 15.9317 15.2395 15.9248 15.0478C15.9175 14.8495 15.8456 14.6734 15.7247 14.5291C15.4987 14.2596 15.1286 14.1298 14.7647 14.0644C14.3846 13.996 13.9248 13.9832 13.4299 14.0145C13.267 13.7858 13.1063 13.5385 12.953 13.2797C12.7683 12.9681 12.5981 12.6465 12.45 12.3287C12.6998 11.6687 12.8869 11.044 12.9703 10.5341C13.006 10.3158 13.0245 10.1078 13.0175 9.92061C13.0107 9.73789 12.9788 9.5467 12.8906 9.38227C12.7948 9.20377 12.635 9.06437 12.4138 9.01706C12.2116 8.97383 12.004 9.01757 11.8124 9.09419C11.4352 9.24509 11.2366 9.56348 11.1612 9.91728C11.0888 10.2571 11.1214 10.6533 11.208 11.0537C11.2957 11.459 11.4459 11.9012 11.6375 12.3486C11.4993 12.6941 11.3434 13.0509 11.1752 13.4072C10.9856 13.8088 10.7829 14.2039 10.5758 14.5757C10.024 14.7565 9.51032 14.9743 9.09323 15.2207C8.72273 15.4395 8.39486 15.7002 8.19704 16.0069C7.98645 16.3334 7.92189 16.7212 8.11635 17.1101ZM9.47464 15.8665C9.61383 15.7842 9.76769 15.7046 9.93324 15.6282C9.77971 15.855 9.62861 16.0592 9.48349 16.2342C9.20385 16.5713 8.98575 16.7502 8.84897 16.8066C8.83339 16.813 8.82173 16.8166 8.81344 16.8187C8.80693 16.8101 8.79793 16.7962 8.78717 16.7747C8.73161 16.6635 8.73392 16.5582 8.8273 16.4134C8.93347 16.2488 9.1467 16.0602 9.47464 15.8665ZM11.9296 14.2197C11.8111 14.2438 11.6923 14.2698 11.5737 14.2975C11.6697 14.1091 11.7632 13.9185 11.8534 13.7275C11.9286 13.5681 12.002 13.4076 12.0729 13.2471C12.1486 13.3874 12.2271 13.5261 12.3078 13.6621C12.3966 13.8121 12.4889 13.9602 12.5837 14.105C12.3664 14.137 12.1473 14.1755 11.9296 14.2197ZM14.4542 15.1588C14.3155 15.0492 14.1694 14.9108 14.0199 14.7491C14.2475 14.753 14.454 14.7705 14.6319 14.8025C14.949 14.8596 15.0981 14.9492 15.1499 15.011C15.1678 15.0324 15.1743 15.0499 15.1753 15.0751C15.1764 15.1068 15.1684 15.1705 15.1163 15.2746C15.0758 15.3557 15.0399 15.3871 15.0219 15.3989C15.0071 15.4086 14.9885 15.4159 14.9531 15.4145C14.862 15.4108 14.6947 15.3487 14.4542 15.1588ZM12.2301 10.4131C12.1903 10.6565 12.1219 10.9364 12.0301 11.2411C11.995 11.122 11.9651 11.0064 11.9411 10.8952C11.8647 10.5421 11.8539 10.2651 11.8947 10.0737C11.9325 9.89622 12.004 9.82535 12.091 9.79055C12.1657 9.76067 12.2119 9.75252 12.236 9.75059C12.2483 9.78097 12.2641 9.84222 12.2681 9.94849C12.2726 10.0699 12.2608 10.2251 12.2301 10.4131Z" /></svg>
<div>
<p>carta-identita.pdf</p>
<p>1,2 MB</p>
</div>
<svg class="ita-upload-status shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg><span class="sr-only">Caricato</span>
<button type="submit" name="elimina" value="0" formaction="#" class="ita-upload-remove" aria-label="Elimina carta-identita.pdf"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5,4V3.5C15.5,2.7,14.8,2,14,2h-4C9.2,2,8.5,2.7,8.5,3.5V4H3v1h2v15.5C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V5 h2V4H15.5z M9.5,3.5C9.5,3.2,9.7,3,10,3h4c0.3,0,0.5,0.2,0.5,0.5V4h-5V3.5z M18,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C6.2,21,6,20.8,6,20.5V5h12V20.5z" /><rect x="11.5" y="8" width="1" height="10" /><rect x="8" y="8" width="1" height="10" /><rect x="15" y="8" width="1" height="10" /></svg></button>
</div>
</li>
<li>
<div>
<svg class="ita-upload-file shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m 20.115001,12.685 -2.671,-3.5440001 c -0.086,-0.1149996 -0.185001,-0.216 -0.296999,-0.3069996 -0.11,-0.090002 -0.228,-0.168 -0.354002,-0.2319988 -0.126002,-0.061002 -0.260999,-0.1090016 -0.4,-0.144 -0.139,-0.032013 -0.282002,-0.048 -0.429,-0.048 -0.145001,0 -0.286998,0.015987 -0.426,0.048 -0.140001,0.034998 -0.274001,0.082998 -0.4,0.144 -0.126002,0.063999 -0.243999,0.1420006 -0.356999,0.2319988 -0.11,0.091 -0.209001,0.192 -0.296999,0.3069996 L 11.941001,12.515 c 0,0 0,0 0,0 0,0 0,0 0,0 L 11.469,12.043 c -0.093,-0.096 -0.198002,-0.178998 -0.308001,-0.248001 -0.113,-0.072 -0.231001,-0.130998 -0.354002,-0.176001 -0.123001,-0.046 -0.248999,-0.078 -0.381,-0.096 -0.130998,-0.01901 -0.262998,-0.024 -0.394,-0.01599 -0.1339992,0.007 -0.2629983,0.03201 -0.386,0.072 -0.1260019,0.037 -0.2439987,0.088 -0.3589984,0.152002 -0.1130004,0.061 -0.2199988,0.135998 -0.3220007,0.217999 -0.099999,0.083 -0.1939993,0.176001 -0.276,0.277999 L 5.5289976,16.011 l 0.762,0.63 3.1620001,-3.782001 c 0.096,-0.118 0.200999,-0.207998 0.3139994,-0.267001 0.1119987,-0.059 0.2219981,-0.093 0.3320009,-0.101 0.121002,-0.011 0.241002,0.008 0.358999,0.048 0.116001,0.042 0.219998,0.106001 0.308999,0.197 l 0.472005,0.474999 c 0.106998,0.106001 0.228,0.183999 0.361999,0.231999 0.135999,0.048 0.272999,0.066 0.41,0.056 0.139,-0.008 0.271,-0.048 0.397,-0.111999 0.128999,-0.067 0.236001,-0.159998 0.327001,-0.279998 l 2.542,-3.3740018 c 0.081,-0.1069984 0.183001,-0.188999 0.303001,-0.2480013 0.120997,-0.061002 0.25,-0.091 0.384,-0.091 0.137,0 0.265001,0.030009 0.385999,0.091 0.121002,0.058998 0.223,0.1409991 0.303001,0.2480013 L 19.324001,13.277 Z M 2.6630001,15.942 v 0.987 H 21.338001 V 15.942 Z M 7.0450005,5.8869998 c 0.1660007,0 0.3189997,0.032013 0.4639998,0.094001 0.144,0.060998 0.2700019,0.1459994 0.378,0.2530016 0.1069984,0.1069984 0.1930016,0.2319987 0.2539994,0.3759987 0.061999,0.144 0.094001,0.2960013 0.094001,0.461 0,0.1660006 -0.032013,0.3179981 -0.094001,0.462 -0.061002,0.144 -0.147001,0.2690003 -0.2539994,0.3759987 -0.108,0.1060007 -0.2340019,0.192 -0.378,0.2530016 -0.1450016,0.061002 -0.2980006,0.092999 -0.4639998,0.092999 -0.1669984,0 -0.3189996,-0.032013 -0.4640001,-0.092999 -0.1450016,-0.061002 -0.2709997,-0.1470013 -0.378,-0.253002 -0.108,-0.1069984 -0.1939994,-0.2319987 -0.2550009,-0.3759987 -0.061999,-0.144 -0.094001,-0.2960013 -0.094001,-0.462 0,-0.1649991 0.032013,-0.3170003 0.094001,-0.461 0.061001,-0.144 0.1470009,-0.2690003 0.2550009,-0.3759987 0.1069984,-0.1069984 0.2330003,-0.192 0.378,-0.2530016 0.1450016,-0.061999 0.2969991,-0.094001 0.4640001,-0.094001 z m 0,-0.9860002 c -0.1989996,0 -0.3920001,0.026003 -0.5800002,0.077 C 6.2780006,5.0279986 6.1060019,5.103 5.9450004,5.1970006 c -0.1610003,0.096 -0.3080013,0.2100019 -0.4420003,0.3410003 -0.132,0.1330016 -0.2469996,0.2799988 -0.3440012,0.4400001 -0.092999,0.1599988 -0.168,0.3299982 -0.219001,0.5170001 -0.051999,0.1869997 -0.078002,0.3790001 -0.078002,0.576 0,0.1980019 0.026003,0.39 0.080001,0.576 0.051001,0.1869997 0.1260019,0.3580007 0.2199987,0.5180002 C 5.2559966,8.325 5.370996,8.4710032 5.502996,8.605001 c 0.1339993,0.1300007 0.2810003,0.2450003 0.4420002,0.339001 0.1610003,0.092999 0.3329991,0.168 0.5199999,0.2179993 0.1880013,0.053998 0.3810002,0.080001 0.5800003,0.080001 0.200999,0 0.3939998,-0.026003 0.582,-0.080001 0.1850007,-0.049999 0.3560016,-0.125 0.5170001,-0.217999 C 8.3049968,8.8500016 8.4519977,8.735002 8.5869968,8.6050013 8.7179952,8.471002 8.8329949,8.3250026 8.9299965,8.1650016 9.0239971,8.0050028 9.0989981,7.8340019 9.1499952,7.6470014 c 0.051001,-0.1860019 0.077,-0.378 0.077,-0.576 0,-0.2000012 -0.026003,-0.3920001 -0.077,-0.5780001 C 9.0989943,6.308001 9.0239933,6.1380016 8.9299965,5.9780013 8.8329987,5.8180026 8.7179952,5.6710017 8.5869968,5.5380012 8.4519958,5.4070028 8.3049949,5.2930009 8.1439965,5.1970009 7.9829962,5.1030003 7.8119952,5.0279993 7.6239966,4.9779999 7.4359953,4.926999 7.2429968,4.9009996 7.0449968,4.9009996 Z M 3.5740002,3.1299999 H 20.426001 c 0.049,0 0.101998,0.013002 0.161,0.041998 0.057,0.03001 0.109999,0.067 0.161,0.1119988 0.049,0.046001 0.089,0.099001 0.123999,0.1579993 0.03201,0.058001 0.048,0.1169991 0.048,0.1780007 V 20.379998 c 0,0.061 -0.01599,0.12 -0.048,0.178 -0.035,0.059 -0.075,0.111999 -0.123999,0.158 -0.051,0.045 -0.104001,0.082 -0.161,0.111998 -0.059,0.02899 -0.111999,0.042 -0.161,0.042 H 3.5740002 c -0.048,0 -0.1010003,-0.013 -0.1599987,-0.042 -0.056999,-0.03001 -0.1099994,-0.067 -0.1610003,-0.111998 -0.048,-0.046 -0.089,-0.099 -0.1239988,-0.158 -0.032013,-0.058 -0.048,-0.116999 -0.048,-0.178 V 3.6199968 c 0,-0.061002 0.015987,-0.12 0.048,-0.1780007 C 3.1640004,3.3829981 3.2050014,3.3299974 3.2530012,3.2839968 3.3040022,3.2389978 3.3570024,3.2019958 3.4140015,3.171998 3.4729995,3.143009 3.5260002,3.13 3.5740002,3.1299999 Z m 0,-0.9870002 c -0.1280012,0 -0.2570003,0.015987 -0.3829999,0.049999 -0.1260019,0.032013 -0.2439988,0.080002 -0.351001,0.145002 C 2.7299992,2.3990022 2.6279992,2.4760026 2.5369991,2.5640013 2.4429993,2.652 2.3649993,2.751001 2.2979992,2.8600026 c -0.067,0.1099993 -0.1179999,0.2269984 -0.1549999,0.3549997 -0.034998,0.1280012 -0.054,0.264 -0.054,0.4050001 V 20.380003 c 0,0.140999 0.019,0.277002 0.054,0.405 0.037002,0.128001 0.088,0.245 0.1549999,0.355 0.067,0.109001 0.1450001,0.207998 0.2389999,0.296001 0.091,0.088 0.1930001,0.164999 0.3030002,0.226001 0.1069985,0.065 0.2249991,0.113 0.348,0.144 0.1260019,0.035 0.255001,0.051 0.3860002,0.051 H 20.426 c 0.132,0 0.260001,-0.01599 0.387,-0.051 0.123001,-0.03099 0.241002,-0.079 0.348,-0.144 0.11,-0.061 0.212002,-0.137999 0.303001,-0.226001 0.094,-0.088 0.171999,-0.187 0.238999,-0.296001 0.067,-0.11 0.118,-0.226999 0.154998,-0.355 0.035,-0.128001 0.054,-0.264 0.054,-0.405 V 3.6200024 c 0,-0.140999 -0.01901,-0.2770015 -0.054,-0.4050001 C 21.820996,3.087001 21.769999,2.9700019 21.703,2.8600026 21.636,2.751001 21.557998,2.6520038 21.464001,2.5640013 21.373002,2.4760026 21.271,2.3990022 21.161,2.3380007 c -0.106998,-0.065 -0.224999,-0.1130004 -0.351001,-0.1450016 -0.126002,-0.034016 -0.255001,-0.049999 -0.384,-0.049999 z" /></svg>
<div>
<p>planimetria.png</p>
<p>3,4 MB</p>
</div>
<span class="ita-upload-percent">64%</span>
<button type="submit" name="elimina" value="1" formaction="#" class="ita-upload-remove" aria-label="Elimina planimetria.png"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5,4V3.5C15.5,2.7,14.8,2,14,2h-4C9.2,2,8.5,2.7,8.5,3.5V4H3v1h2v15.5C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V5 h2V4H15.5z M9.5,3.5C9.5,3.2,9.7,3,10,3h4c0.3,0,0.5,0.2,0.5,0.5V4h-5V3.5z M18,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C6.2,21,6,20.8,6,20.5V5h12V20.5z" /><rect x="11.5" y="8" width="1" height="10" /><rect x="8" y="8" width="1" height="10" /><rect x="15" y="8" width="1" height="10" /></svg></button>
</div>
<progress value="64" max="100" aria-label="Caricamento di planimetria.png"></progress>
</li>
<li class="ita-upload-error">
<div>
<svg class="ita-upload-file shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 2H14.7L19 6.3V16H18V7H15.5C14.6716 7 14 6.32843 14 5.5V3H6.5C6.22386 3 6 3.22386 6 3.5V16H5V3.5C5 2.67157 5.67157 2 6.5 2ZM17.3 6L15 3.7V5.5C15 5.77614 15.2239 6 15.5 6H17.3Z" /><path d="m 17.402288,17.08612 0.89376,1.773332 0.915039,-1.773332 h 1.014347 l -1.390293,2.461385 1.390293,2.362079 h -1.08528 l -0.893759,-1.666932 -0.91504,1.666932 h -1.014346 l 1.390293,-2.312426 -1.390293,-2.511038 z" /><path d="m 15.983627,21.831557 q -0.751893,0.163147 -1.354826,0.163147 -0.602933,0 -0.964692,-0.14896 -0.36176,-0.14896 -0.567467,-0.475253 -0.205706,-0.326293 -0.283733,-0.76608 -0.07803,-0.439786 -0.07803,-1.106559 0,-1.397386 0.390133,-1.943573 0.397227,-0.553279 1.454133,-0.553279 0.610026,0 1.411573,0.19152 l -0.02837,0.780266 q -0.702239,-0.1064 -1.170399,-0.1064 -0.461066,0 -0.65968,0.12768 -0.198613,0.120587 -0.29792,0.46816 -0.09221,0.347573 -0.09221,1.184586 0,0.837013 0.19152,1.163306 0.198613,0.3192 0.780266,0.3192 0.588747,0 1.248426,-0.09931 z" /><path d="m 9.3017075,20.774651 q 0.2127999,0.368853 0.7873595,0.368853 0.57456,0 0.780267,-0.368853 0.212799,-0.375946 0.212799,-1.248426 0,-0.879573 -0.212799,-1.276799 -0.2128,-0.397227 -0.780267,-0.397227 -0.5674663,0 -0.7802662,0.397227 -0.2127998,0.397226 -0.2127998,1.276799 0,0.87248 0.2057065,1.248426 z m 2.3337055,0.624213 q -0.44688,0.59584 -1.546346,0.59584 -1.099466,0 -1.5534391,-0.59584 -0.4468798,-0.602933 -0.4468798,-1.879732 0,-1.2768 0.4468798,-1.893919 Q 8.989601,17.001 10.089067,17.001 q 1.099466,0 1.546346,0.624213 0.453973,0.617119 0.453973,1.893919 0,1.276799 -0.453973,1.879732 z" /><path d="M 5.4003726,21.909584 H 3.776 V 17.08612 h 1.6243726 q 0.624213,0 1.0285328,0.134773 0.4043198,0.12768 0.624213,0.432693 0.2269866,0.29792 0.3121066,0.709333 0.08512,0.40432 0.08512,1.056906 0,0.652587 -0.078027,1.08528 -0.078027,0.4256 -0.2979199,0.766079 -0.2127999,0.333387 -0.624213,0.48944 -0.4114131,0.14896 -1.0498125,0.14896 z m 1.0285328,-1.915199 q 0.014187,-0.226987 0.014187,-0.624213 0,-0.40432 -0.028373,-0.645493 -0.028373,-0.241173 -0.1347732,-0.439787 -0.1064,-0.198613 -0.3191999,-0.269546 -0.2057065,-0.07803 -0.560373,-0.07803 H 4.7548795 v 3.121065 h 0.6454931 q 0.5319997,0 0.7731729,-0.269546 0.2057066,-0.219893 0.2553599,-0.794453 z" /></svg>
<div>
<p>delega-firmata.docx</p>
<p>Formato non ammesso: usa PDF</p>
</div>
<svg class="ita-upload-status shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,18.3h1.2v-1.8h-1.2V18.3z M22,7.9v8.3L16.1,22H7.9L2,16.2V7.9L7.9,2h8.2L22,7.9z M21,8.3L15.7,3H8.3L3,8.3v7.5L8.3,21h7.4l5.3-5.2V8.3z" /></svg><span class="sr-only">Errore</span>
<button type="submit" name="elimina" value="2" formaction="#" class="ita-upload-remove" aria-label="Elimina delega-firmata.docx"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5,4V3.5C15.5,2.7,14.8,2,14,2h-4C9.2,2,8.5,2.7,8.5,3.5V4H3v1h2v15.5C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V5 h2V4H15.5z M9.5,3.5C9.5,3.2,9.7,3,10,3h4c0.3,0,0.5,0.2,0.5,0.5V4h-5V3.5z M18,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C6.2,21,6,20.8,6,20.5V5h12V20.5z" /><rect x="11.5" y="8" width="1" height="10" /><rect x="8" y="8" width="1" height="10" /><rect x="15" y="8" width="1" height="10" /></svg></button>
</div>
</li>
<li>
<div>
<svg class="ita-upload-file shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M6.5 2H14.7L19 6.3V20.5C19 21.3284 18.3284 22 17.5 22H6.5C5.67157 22 5 21.3284 5 20.5V3.5C5 2.67157 5.67157 2 6.5 2ZM17.3 6L15 3.7V5.5C15 5.77614 15.2239 6 15.5 6H17.3ZM17.5 21H6.5C6.22386 21 6 20.7761 6 20.5V3.5C6 3.22386 6.22386 3 6.5 3H14V5.5C14 6.32843 14.6716 7 15.5 7H18V20.5C18 20.7761 17.7761 21 17.5 21ZM8.11635 17.1101C8.20668 17.2907 8.34658 17.453 8.55474 17.529C8.76156 17.6045 8.96631 17.5694 9.13467 17.5C9.45298 17.3689 9.77004 17.0635 10.0607 16.713C10.3934 16.312 10.7438 15.7864 11.0818 15.2032C11.404 15.1073 11.7405 15.0235 12.079 14.9547C12.421 14.8852 12.7584 14.8324 13.0786 14.7976C13.3783 15.18 13.6888 15.51 13.9894 15.7473C14.269 15.9681 14.5917 16.1506 14.923 16.1639C15.0988 16.171 15.2745 16.1299 15.4325 16.0265C15.5873 15.9252 15.7027 15.7789 15.7871 15.61C15.8776 15.4291 15.9317 15.2395 15.9248 15.0478C15.9175 14.8495 15.8456 14.6734 15.7247 14.5291C15.4987 14.2596 15.1286 14.1298 14.7647 14.0644C14.3846 13.996 13.9248 13.9832 13.4299 14.0145C13.267 13.7858 13.1063 13.5385 12.953 13.2797C12.7683 12.9681 12.5981 12.6465 12.45 12.3287C12.6998 11.6687 12.8869 11.044 12.9703 10.5341C13.006 10.3158 13.0245 10.1078 13.0175 9.92061C13.0107 9.73789 12.9788 9.5467 12.8906 9.38227C12.7948 9.20377 12.635 9.06437 12.4138 9.01706C12.2116 8.97383 12.004 9.01757 11.8124 9.09419C11.4352 9.24509 11.2366 9.56348 11.1612 9.91728C11.0888 10.2571 11.1214 10.6533 11.208 11.0537C11.2957 11.459 11.4459 11.9012 11.6375 12.3486C11.4993 12.6941 11.3434 13.0509 11.1752 13.4072C10.9856 13.8088 10.7829 14.2039 10.5758 14.5757C10.024 14.7565 9.51032 14.9743 9.09323 15.2207C8.72273 15.4395 8.39486 15.7002 8.19704 16.0069C7.98645 16.3334 7.92189 16.7212 8.11635 17.1101ZM9.47464 15.8665C9.61383 15.7842 9.76769 15.7046 9.93324 15.6282C9.77971 15.855 9.62861 16.0592 9.48349 16.2342C9.20385 16.5713 8.98575 16.7502 8.84897 16.8066C8.83339 16.813 8.82173 16.8166 8.81344 16.8187C8.80693 16.8101 8.79793 16.7962 8.78717 16.7747C8.73161 16.6635 8.73392 16.5582 8.8273 16.4134C8.93347 16.2488 9.1467 16.0602 9.47464 15.8665ZM11.9296 14.2197C11.8111 14.2438 11.6923 14.2698 11.5737 14.2975C11.6697 14.1091 11.7632 13.9185 11.8534 13.7275C11.9286 13.5681 12.002 13.4076 12.0729 13.2471C12.1486 13.3874 12.2271 13.5261 12.3078 13.6621C12.3966 13.8121 12.4889 13.9602 12.5837 14.105C12.3664 14.137 12.1473 14.1755 11.9296 14.2197ZM14.4542 15.1588C14.3155 15.0492 14.1694 14.9108 14.0199 14.7491C14.2475 14.753 14.454 14.7705 14.6319 14.8025C14.949 14.8596 15.0981 14.9492 15.1499 15.011C15.1678 15.0324 15.1743 15.0499 15.1753 15.0751C15.1764 15.1068 15.1684 15.1705 15.1163 15.2746C15.0758 15.3557 15.0399 15.3871 15.0219 15.3989C15.0071 15.4086 14.9885 15.4159 14.9531 15.4145C14.862 15.4108 14.6947 15.3487 14.4542 15.1588ZM12.2301 10.4131C12.1903 10.6565 12.1219 10.9364 12.0301 11.2411C11.995 11.122 11.9651 11.0064 11.9411 10.8952C11.8647 10.5421 11.8539 10.2651 11.8947 10.0737C11.9325 9.89622 12.004 9.82535 12.091 9.79055C12.1657 9.76067 12.2119 9.75252 12.236 9.75059C12.2483 9.78097 12.2641 9.84222 12.2681 9.94849C12.2726 10.0699 12.2608 10.2251 12.2301 10.4131Z" /></svg>
<div>
<p>ricevuta-pagamento.pdf</p>
<p>180 KB</p>
</div>
<svg class="ita-upload-status shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg><span class="sr-only">Caricato</span>
<button type="submit" name="elimina" value="3" formaction="#" class="ita-upload-remove" aria-label="Elimina ricevuta-pagamento.pdf"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5,4V3.5C15.5,2.7,14.8,2,14,2h-4C9.2,2,8.5,2.7,8.5,3.5V4H3v1h2v15.5C5,21.3,5.7,22,6.5,22h11c0.8,0,1.5-0.7,1.5-1.5V5 h2V4H15.5z M9.5,3.5C9.5,3.2,9.7,3,10,3h4c0.3,0,0.5,0.2,0.5,0.5V4h-5V3.5z M18,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C6.2,21,6,20.8,6,20.5V5h12V20.5z" /><rect x="11.5" y="8" width="1" height="10" /><rect x="8" y="8" width="1" height="10" /><rect x="15" y="8" width="1" height="10" /></svg></button>
</div>
</li>
</ul>Foto del profilo
JPG o PNG, almeno 200×200 px
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-upload-avatar">
<span class="avatar"><span><img src="https://picsum.photos/id/64/200/200" alt="Foto del profilo attuale"></span></span>
<div>
<label class="ita-btn ita-btn-primary ita-btn-outline ita-btn-xs ita-upload-button"><input type="file" id="avatar-upload-6" accept="image/*" class="sr-only"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,20h-17C2.7,20,2,19.3,2,18.5v-10C2,7.7,2.7,7,3.5,7h4.3l1.5-2.3C9.6,4.3,10,4,10.5,4h3c0.5,0,0.9,0.3,1.2,0.7L16.2,7 h4.3C21.3,7,22,7.7,22,8.5v10C22,19.3,21.3,20,20.5,20z M3.5,8C3.2,8,3,8.2,3,8.5v10C3,18.8,3.2,19,3.5,19h17 c0.3,0,0.5-0.2,0.5-0.5v-10C21,8.2,20.8,8,20.5,8h-4.8l-1.8-2.8L13.5,5h-3l-0.4,0.2L8.3,8H3.5z M12,18c-2.8,0-5-2.2-5-5s2.2-5,5-5 s5,2.2,5,5S14.8,18,12,18z M12,9c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S14.2,9,12,9z M7,5H4v1h3V5z" /></svg>Cambia foto</label>
<p>JPG o PNG, almeno 200×200 px</p>
</div>
</div>Con JavaScript (opzionale)
La ricetta è solo CSS e funziona così com'è. Questi frammenti non sono inclusi nel pacchetto: mostrano come aggiungere il comportamento che richiede uno script, in JavaScript semplice o in React.
Elenco e anteprime dei file sceltijs
Aggiungi data-list="#id-della-lista" al campo file.
// Show the chosen files (name, size, image preview) under a file input or dropzone.
const fmt = (b) => (b < 1024 * 1024 ? `${Math.round(b / 1024)} KB` : `${(b / 1024 / 1024).toFixed(1).replace(".", ",")} MB`);
document.querySelectorAll("input[type=file][data-list]").forEach((input) => {
const out = document.querySelector(input.dataset.list); // e.g. data-list="#chosen"
input.addEventListener("change", () => {
out.replaceChildren(...[...input.files].map((f) => {
const li = document.createElement("li");
li.className = "flex items-center gap-3 border-b border-base-content/15 py-3";
if (f.type.startsWith("image/")) {
const img = Object.assign(document.createElement("img"), { src: URL.createObjectURL(f), alt: "" });
img.className = "size-12 rounded-sm object-cover";
img.onload = () => URL.revokeObjectURL(img.src);
li.append(img);
}
li.append(Object.assign(document.createElement("span"), { className: "flex-1 truncate font-semibold", textContent: f.name }));
li.append(Object.assign(document.createElement("span"), { className: "text-sm text-base-content/70", textContent: fmt(f.size) }));
return li;
}));
});
});Evidenziare l'area durante il trascinamentojs
// Highlight the dropzone while a file is dragged over it
// (CSS cannot see a drag in progress).
document.querySelectorAll(".ita-dropzone > input[type=file]").forEach((input) => {
const zone = input.parentElement;
const on = () => zone.classList.add("ita-dropzone-over");
const off = () => zone.classList.remove("ita-dropzone-over");
input.addEventListener("dragenter", on);
input.addEventListener("dragleave", off);
input.addEventListener("drop", off);
});Invio con barra di avanzamentojs
// Upload with a real progress bar: fetch() has no upload progress, XHR does.
function uploadFile(file, url, onProgress) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const body = new FormData();
body.append("file", file);
xhr.upload.addEventListener("progress", (e) => e.lengthComputable && onProgress(Math.round((e.loaded / e.total) * 100)));
xhr.addEventListener("load", () => (xhr.status < 300 ? resolve(xhr.response) : reject(new Error(xhr.statusText))));
xhr.addEventListener("error", () => reject(new Error("Errore di rete")));
xhr.open("POST", url);
xhr.send(body);
});
}
// usage: uploadFile(file, "/api/allegati", (p) => (progressEl.value = p));Componente Reacttsx
import { useState, type DragEvent } from "react";
type Row = { file: File; progress: number; error?: string };
export function FileUpload({ url, accept }: { url: string; accept?: string }) {
const [rows, setRows] = useState<Row[]>([]);
const [over, setOver] = useState(false);
const send = (files: FileList | null) => {
for (const file of files ?? []) {
setRows((r) => [...r, { file, progress: 0 }]);
const xhr = new XMLHttpRequest();
const update = (patch: Partial<Row>) => setRows((r) => r.map((x) => (x.file === file ? { ...x, ...patch } : x)));
xhr.upload.onprogress = (e) => update({ progress: Math.round((e.loaded / e.total) * 100) });
xhr.onload = () => update(xhr.status < 300 ? { progress: 100 } : { error: "Caricamento non riuscito" });
xhr.onerror = () => update({ error: "Errore di rete" });
const body = new FormData();
body.append("file", file);
xhr.open("POST", url);
xhr.send(body);
}
};
const drag = (e: DragEvent, on: boolean) => { e.preventDefault(); setOver(on); };
return (
<div className="flex max-w-xl flex-col gap-4">
<div onDragOver={(e) => drag(e, true)} onDragLeave={(e) => drag(e, false)}
onDrop={(e) => { drag(e, false); send(e.dataTransfer.files); }}
className={"ita-dropzone" + (over ? " ita-dropzone-over" : "")}>
<p className="ita-dropzone-title">Trascina qui i file</p>
<p className="ita-dropzone-text">oppure <span>selezionali dal dispositivo</span></p>
<input type="file" multiple accept={accept} aria-label="Scegli i file"
onChange={(e) => send(e.currentTarget.files)} />
</div>
<ul className="ita-upload-list" aria-label="File allegati" aria-live="polite">
{rows.map(({ file, progress, error }) => (
<li key={file.name + file.lastModified} className={error ? "ita-upload-error" : undefined}>
<div><div><p>{file.name}</p>{error && <p>{error}</p>}</div></div>
{!error && <progress value={progress} max={100} aria-label={`Caricamento di ${file.name}`} />}
</li>
))}
</ul>
</div>
);
}