file.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826
  1. ---
  2. title: File upload
  3. layout: documentation
  4. doc-tab: form
  5. doc-subtab: file
  6. file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
  7. variables:
  8. - name: $file-border-color
  9. value: transparent
  10. - name: $file-radius
  11. value: $radius
  12. - name: $file-cta-background-color
  13. value: $white-ter
  14. - name: $file-cta-color
  15. value: $grey-dark
  16. - name: $file-cta-hover-color
  17. value: $grey-darker
  18. - name: $file-cta-active-color
  19. value: $grey-darker
  20. - name: $file-name-border-color
  21. value: $file-cta-background-color
  22. - name: $file-name-border-style
  23. value: solid
  24. - name: $file-name-border-width
  25. value: 1px 1px 1px 0
  26. - name: $file-name-max-width
  27. value: 16em
  28. ---
  29. {% capture file %}
  30. <div class="file">
  31. <label class="file-label">
  32. <input class="file-input" type="file" name="resume">
  33. <span class="file-cta">
  34. <span class="file-icon">
  35. <i class="fa fa-upload"></i>
  36. </span>
  37. <span class="file-label">
  38. Choose a file…
  39. </span>
  40. </span>
  41. </label>
  42. </div>
  43. {% endcapture %}
  44. {% capture file_name %}
  45. <div class="file has-name">
  46. <label class="file-label">
  47. <input class="file-input" type="file" name="resume">
  48. <span class="file-cta">
  49. <span class="file-icon">
  50. <i class="fa fa-upload"></i>
  51. </span>
  52. <span class="file-label">
  53. Choose a file…
  54. </span>
  55. </span>
  56. <span class="file-name">
  57. {{ page.file_name }}
  58. </span>
  59. </label>
  60. </div>
  61. {% endcapture %}
  62. {% capture file_name_right %}
  63. <div class="file has-name is-right">
  64. <label class="file-label">
  65. <input class="file-input" type="file" name="resume">
  66. <span class="file-cta">
  67. <span class="file-icon">
  68. <i class="fa fa-upload"></i>
  69. </span>
  70. <span class="file-label">
  71. Choose a file…
  72. </span>
  73. </span>
  74. <span class="file-name">
  75. {{ page.file_name }}
  76. </span>
  77. </label>
  78. </div>
  79. {% endcapture %}
  80. {% capture file_name_fullwidth %}
  81. <div class="file has-name is-fullwidth">
  82. <label class="file-label">
  83. <input class="file-input" type="file" name="resume">
  84. <span class="file-cta">
  85. <span class="file-icon">
  86. <i class="fa fa-upload"></i>
  87. </span>
  88. <span class="file-label">
  89. Choose a file…
  90. </span>
  91. </span>
  92. <span class="file-name">
  93. {{ page.file_name }}
  94. </span>
  95. </label>
  96. </div>
  97. {% endcapture %}
  98. {% capture file_boxed %}
  99. <div class="file is-boxed">
  100. <label class="file-label">
  101. <input class="file-input" type="file" name="resume">
  102. <span class="file-cta">
  103. <span class="file-icon">
  104. <i class="fa fa-upload"></i>
  105. </span>
  106. <span class="file-label">
  107. Choose a file…
  108. </span>
  109. </span>
  110. </label>
  111. </div>
  112. {% endcapture %}
  113. {% capture file_boxed_name %}
  114. <div class="file has-name is-boxed">
  115. <label class="file-label">
  116. <input class="file-input" type="file" name="resume">
  117. <span class="file-cta">
  118. <span class="file-icon">
  119. <i class="fa fa-upload"></i>
  120. </span>
  121. <span class="file-label">
  122. Choose a file…
  123. </span>
  124. </span>
  125. <span class="file-name">
  126. {{ page.file_name }}
  127. </span>
  128. </label>
  129. </div>
  130. {% endcapture %}
  131. {% capture file_colors %}
  132. <div class="field">
  133. <div class="file is-primary">
  134. <label class="file-label">
  135. <input class="file-input" type="file" name="resume">
  136. <span class="file-cta">
  137. <span class="file-icon">
  138. <i class="fa fa-upload"></i>
  139. </span>
  140. <span class="file-label">
  141. Primary file…
  142. </span>
  143. </span>
  144. </label>
  145. </div>
  146. </div>
  147. <div class="field">
  148. <div class="file is-info has-name">
  149. <label class="file-label">
  150. <input class="file-input" type="file" name="resume">
  151. <span class="file-cta">
  152. <span class="file-icon">
  153. <i class="fa fa-upload"></i>
  154. </span>
  155. <span class="file-label">
  156. Info file…
  157. </span>
  158. </span>
  159. <span class="file-name">
  160. {{ page.file_name }}
  161. </span>
  162. </label>
  163. </div>
  164. </div>
  165. <div class="field">
  166. <div class="file is-warning is-boxed">
  167. <label class="file-label">
  168. <input class="file-input" type="file" name="resume">
  169. <span class="file-cta">
  170. <span class="file-icon">
  171. <i class="fa fa-cloud-upload"></i>
  172. </span>
  173. <span class="file-label">
  174. Warning file…
  175. </span>
  176. </span>
  177. </label>
  178. </div>
  179. </div>
  180. <div class="field">
  181. <div class="file is-danger has-name is-boxed">
  182. <label class="file-label">
  183. <input class="file-input" type="file" name="resume">
  184. <span class="file-cta">
  185. <span class="file-icon">
  186. <i class="fa fa-cloud-upload"></i>
  187. </span>
  188. <span class="file-label">
  189. Danger file…
  190. </span>
  191. </span>
  192. <span class="file-name">
  193. {{ page.file_name }}
  194. </span>
  195. </label>
  196. </div>
  197. </div>
  198. {% endcapture %}
  199. {% capture file_sizes %}
  200. <div class="field">
  201. <div class="file is-small">
  202. <label class="file-label">
  203. <input class="file-input" type="file" name="resume">
  204. <span class="file-cta">
  205. <span class="file-icon">
  206. <i class="fa fa-upload"></i>
  207. </span>
  208. <span class="file-label">
  209. Small file…
  210. </span>
  211. </span>
  212. </label>
  213. </div>
  214. </div>
  215. <div class="field">
  216. <div class="file">
  217. <label class="file-label">
  218. <input class="file-input" type="file" name="resume">
  219. <span class="file-cta">
  220. <span class="file-icon">
  221. <i class="fa fa-upload"></i>
  222. </span>
  223. <span class="file-label">
  224. Normal file…
  225. </span>
  226. </span>
  227. </label>
  228. </div>
  229. </div>
  230. <div class="field">
  231. <div class="file is-medium">
  232. <label class="file-label">
  233. <input class="file-input" type="file" name="resume">
  234. <span class="file-cta">
  235. <span class="file-icon">
  236. <i class="fa fa-upload"></i>
  237. </span>
  238. <span class="file-label">
  239. Medium file…
  240. </span>
  241. </span>
  242. </label>
  243. </div>
  244. </div>
  245. <div class="field">
  246. <div class="file is-large">
  247. <label class="file-label">
  248. <input class="file-input" type="file" name="resume">
  249. <span class="file-cta">
  250. <span class="file-icon">
  251. <i class="fa fa-upload"></i>
  252. </span>
  253. <span class="file-label">
  254. Large file…
  255. </span>
  256. </span>
  257. </label>
  258. </div>
  259. </div>
  260. {% endcapture %}
  261. {% capture file_sizes_name %}
  262. <div class="field">
  263. <div class="file is-small has-name">
  264. <label class="file-label">
  265. <input class="file-input" type="file" name="resume">
  266. <span class="file-cta">
  267. <span class="file-icon">
  268. <i class="fa fa-upload"></i>
  269. </span>
  270. <span class="file-label">
  271. Small file…
  272. </span>
  273. </span>
  274. <span class="file-name">
  275. {{ page.file_name }}
  276. </span>
  277. </label>
  278. </div>
  279. </div>
  280. <div class="field">
  281. <div class="file has-name">
  282. <label class="file-label">
  283. <input class="file-input" type="file" name="resume">
  284. <span class="file-cta">
  285. <span class="file-icon">
  286. <i class="fa fa-upload"></i>
  287. </span>
  288. <span class="file-label">
  289. Normal file…
  290. </span>
  291. </span>
  292. <span class="file-name">
  293. {{ page.file_name }}
  294. </span>
  295. </label>
  296. </div>
  297. </div>
  298. <div class="field">
  299. <div class="file is-medium has-name">
  300. <label class="file-label">
  301. <input class="file-input" type="file" name="resume">
  302. <span class="file-cta">
  303. <span class="file-icon">
  304. <i class="fa fa-upload"></i>
  305. </span>
  306. <span class="file-label">
  307. Medium file…
  308. </span>
  309. </span>
  310. <span class="file-name">
  311. {{ page.file_name }}
  312. </span>
  313. </label>
  314. </div>
  315. </div>
  316. <div class="field">
  317. <div class="file is-large has-name">
  318. <label class="file-label">
  319. <input class="file-input" type="file" name="resume">
  320. <span class="file-cta">
  321. <span class="file-icon">
  322. <i class="fa fa-upload"></i>
  323. </span>
  324. <span class="file-label">
  325. Large file…
  326. </span>
  327. </span>
  328. <span class="file-name">
  329. {{ page.file_name }}
  330. </span>
  331. </label>
  332. </div>
  333. </div>
  334. {% endcapture %}
  335. {% capture file_sizes_boxed %}
  336. <div class="field">
  337. <div class="file is-small is-boxed">
  338. <label class="file-label">
  339. <input class="file-input" type="file" name="resume">
  340. <span class="file-cta">
  341. <span class="file-icon">
  342. <i class="fa fa-upload"></i>
  343. </span>
  344. <span class="file-label">
  345. Small file…
  346. </span>
  347. </span>
  348. </label>
  349. </div>
  350. </div>
  351. <div class="field">
  352. <div class="file is-boxed">
  353. <label class="file-label">
  354. <input class="file-input" type="file" name="resume">
  355. <span class="file-cta">
  356. <span class="file-icon">
  357. <i class="fa fa-upload"></i>
  358. </span>
  359. <span class="file-label">
  360. Normal file…
  361. </span>
  362. </span>
  363. </label>
  364. </div>
  365. </div>
  366. <div class="field">
  367. <div class="file is-medium is-boxed">
  368. <label class="file-label">
  369. <input class="file-input" type="file" name="resume">
  370. <span class="file-cta">
  371. <span class="file-icon">
  372. <i class="fa fa-upload"></i>
  373. </span>
  374. <span class="file-label">
  375. Medium file…
  376. </span>
  377. </span>
  378. </label>
  379. </div>
  380. </div>
  381. <div class="field">
  382. <div class="file is-large is-boxed">
  383. <label class="file-label">
  384. <input class="file-input" type="file" name="resume">
  385. <span class="file-cta">
  386. <span class="file-icon">
  387. <i class="fa fa-upload"></i>
  388. </span>
  389. <span class="file-label">
  390. Large file…
  391. </span>
  392. </span>
  393. </label>
  394. </div>
  395. </div>
  396. {% endcapture %}
  397. {% capture file_centered %}
  398. <div class="field">
  399. <div class="file is-centered is-boxed is-success has-name">
  400. <label class="file-label">
  401. <input class="file-input" type="file" name="resume">
  402. <span class="file-cta">
  403. <span class="file-icon">
  404. <i class="fa fa-upload"></i>
  405. </span>
  406. <span class="file-label">
  407. Centered file…
  408. </span>
  409. </span>
  410. <span class="file-name">
  411. {{ page.file_name }}
  412. </span>
  413. </label>
  414. </div>
  415. </div>
  416. {% endcapture %}
  417. {% capture file_right %}
  418. <div class="field">
  419. <div class="file is-right is-info">
  420. <label class="file-label">
  421. <input class="file-input" type="file" name="resume">
  422. <span class="file-cta">
  423. <span class="file-icon">
  424. <i class="fa fa-upload"></i>
  425. </span>
  426. <span class="file-label">
  427. Right file…
  428. </span>
  429. </span>
  430. <span class="file-name">
  431. {{ page.file_name }}
  432. </span>
  433. </label>
  434. </div>
  435. </div>
  436. {% endcapture %}
  437. {% capture file_sizes_boxed_name %}
  438. <div class="field">
  439. <div class="file is-small is-boxed has-name">
  440. <label class="file-label">
  441. <input class="file-input" type="file" name="resume">
  442. <span class="file-cta">
  443. <span class="file-icon">
  444. <i class="fa fa-upload"></i>
  445. </span>
  446. <span class="file-label">
  447. Small file…
  448. </span>
  449. </span>
  450. <span class="file-name">
  451. {{ page.file_name }}
  452. </span>
  453. </label>
  454. </div>
  455. </div>
  456. <div class="field">
  457. <div class="file is-boxed has-name">
  458. <label class="file-label">
  459. <input class="file-input" type="file" name="resume">
  460. <span class="file-cta">
  461. <span class="file-icon">
  462. <i class="fa fa-upload"></i>
  463. </span>
  464. <span class="file-label">
  465. Normal file…
  466. </span>
  467. </span>
  468. <span class="file-name">
  469. {{ page.file_name }}
  470. </span>
  471. </label>
  472. </div>
  473. </div>
  474. <div class="field">
  475. <div class="file is-medium is-boxed has-name">
  476. <label class="file-label">
  477. <input class="file-input" type="file" name="resume">
  478. <span class="file-cta">
  479. <span class="file-icon">
  480. <i class="fa fa-upload"></i>
  481. </span>
  482. <span class="file-label">
  483. Medium file…
  484. </span>
  485. </span>
  486. <span class="file-name">
  487. {{ page.file_name }}
  488. </span>
  489. </label>
  490. </div>
  491. </div>
  492. <div class="field">
  493. <div class="file is-large is-boxed has-name">
  494. <label class="file-label">
  495. <input class="file-input" type="file" name="resume">
  496. <span class="file-cta">
  497. <span class="file-icon">
  498. <i class="fa fa-upload"></i>
  499. </span>
  500. <span class="file-label">
  501. Large file…
  502. </span>
  503. </span>
  504. <span class="file-name">
  505. {{ page.file_name }}
  506. </span>
  507. </label>
  508. </div>
  509. </div>
  510. {% endcapture %}
  511. {% include subnav-form.html %}
  512. <section class="section">
  513. <div class="container">
  514. <h1 class="title">File upload</h1>
  515. <h2 class="subtitle">
  516. A custom <strong>file upload</strong> input, without JavaScript
  517. </h2>
  518. {%
  519. include meta.html
  520. experimental=true
  521. since="0.5.1"
  522. colors=true
  523. sizes=true
  524. variables=true
  525. %}
  526. <hr>
  527. <div class="content">
  528. <p>
  529. The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code>&lt;input type="file"&gt;</code>. It comprises several sub-elements:
  530. </p>
  531. <ul>
  532. <li>
  533. <code>.file</code> the main <strong>container</strong>
  534. <ul>
  535. <li>
  536. <code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
  537. <ul>
  538. <li>
  539. <code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
  540. </li>
  541. <li>
  542. <code>.file-cta</code> the upload <strong>call-to-action</strong>
  543. <ul>
  544. <li>
  545. <code>.file-icon</code> an optional <strong>upload</strong> icon
  546. </li>
  547. <li>
  548. <code>.file-label</code> the "Choose a file…" text
  549. </li>
  550. </ul>
  551. </li>
  552. <li>
  553. <code>.file-name</code> a container for the <strong>chosen file</strong> name
  554. </li>
  555. </ul>
  556. </li>
  557. </ul>
  558. </li>
  559. </ul>
  560. </div>
  561. <div class="columns">
  562. <div class="column">
  563. <div class="bd-example">
  564. {{ file }}
  565. </div>
  566. </div>
  567. <div class="column highlight-full">
  568. {% highlight html %}{{ file }}{% endhighlight %}
  569. </div>
  570. </div>
  571. {% include heading.html name="Modifiers" %}
  572. <div class="columns">
  573. <div class="column">
  574. <div class="content">
  575. <p>
  576. With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
  577. </p>
  578. </div>
  579. <div class="bd-example">
  580. {{ file_name }}
  581. </div>
  582. </div>
  583. <div class="column highlight-full">
  584. {% highlight html %}{{ file_name }}{% endhighlight %}
  585. </div>
  586. </div>
  587. <div class="columns">
  588. <div class="column">
  589. <div class="content">
  590. <p>
  591. You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
  592. </p>
  593. </div>
  594. <div class="bd-example">
  595. {{ file_name_right }}
  596. </div>
  597. </div>
  598. <div class="column highlight-full">
  599. {% highlight html %}{{ file_name_right }}{% endhighlight %}
  600. </div>
  601. </div>
  602. <div class="columns">
  603. <div class="column">
  604. <div class="content">
  605. <p>
  606. You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
  607. </p>
  608. </div>
  609. <div class="bd-example">
  610. {{ file_name_fullwidth }}
  611. </div>
  612. </div>
  613. <div class="column highlight-full">
  614. {% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
  615. </div>
  616. </div>
  617. <div class="columns">
  618. <div class="column">
  619. <div class="content">
  620. <p>
  621. You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
  622. </p>
  623. </div>
  624. <div class="bd-example">
  625. {{ file_boxed }}
  626. </div>
  627. </div>
  628. <div class="column highlight-full">
  629. {% highlight html %}{{ file_boxed }}{% endhighlight %}
  630. </div>
  631. </div>
  632. <div class="columns">
  633. <div class="column">
  634. <div class="content">
  635. <p>
  636. You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
  637. </p>
  638. </div>
  639. <div class="bd-example">
  640. {{ file_boxed_name }}
  641. </div>
  642. </div>
  643. <div class="column highlight-full">
  644. {% highlight html %}{{ file_boxed_name }}{% endhighlight %}
  645. </div>
  646. </div>
  647. {% include heading.html name="Colors" %}
  648. <div class="columns">
  649. <div class="column">
  650. <div class="content">
  651. <p>
  652. You can style the file element by appending one of the <strong>9 color modifiers</strong>:
  653. </p>
  654. <ul>
  655. {% for color in site.colors %}
  656. <li>
  657. <code>is-{{ color }}</code>
  658. </li>
  659. {% endfor %}
  660. </ul>
  661. </div>
  662. <div class="bd-example">
  663. {{ file_colors }}
  664. </div>
  665. </div>
  666. <div class="column">
  667. {% highlight html %}{{ file_colors }}{% endhighlight %}
  668. </div>
  669. </div>
  670. {% include heading.html name="Sizes" %}
  671. <div class="content">
  672. <p>
  673. You can append one of <strong>3 additional sizes</strong>:
  674. </p>
  675. <ul>
  676. <li>
  677. <code>.is-small</code>
  678. </li>
  679. <li>
  680. <code>.is-medium</code>
  681. </li>
  682. <li>
  683. <code>.is-large</code>
  684. </li>
  685. </ul>
  686. </div>
  687. <div class="columns">
  688. <div class="column">
  689. <div class="bd-example">
  690. {{ file_sizes }}
  691. </div>
  692. </div>
  693. <div class="column">
  694. {% highlight html %}{{ file_sizes }}{% endhighlight %}
  695. </div>
  696. </div>
  697. <div class="columns">
  698. <div class="column">
  699. <div class="bd-example">
  700. {{ file_sizes_name }}
  701. </div>
  702. </div>
  703. <div class="column">
  704. {% highlight html %}{{ file_sizes_name }}{% endhighlight %}
  705. </div>
  706. </div>
  707. <div class="columns">
  708. <div class="column">
  709. <div class="bd-example">
  710. {{ file_sizes_boxed }}
  711. </div>
  712. </div>
  713. <div class="column">
  714. {% highlight html %}{{ file_sizes_boxed }}{% endhighlight %}
  715. </div>
  716. </div>
  717. <div class="columns">
  718. <div class="column">
  719. <div class="bd-example">
  720. {{ file_sizes_boxed_name }}
  721. </div>
  722. </div>
  723. <div class="column">
  724. {% highlight html %}{{ file_sizes_boxed_name }}{% endhighlight %}
  725. </div>
  726. </div>
  727. {% include heading.html name="Alignment" %}
  728. <div class="content">
  729. <p>
  730. You can <strong>align</strong> the file input:
  731. </p>
  732. <ul>
  733. <li>
  734. to the <strong>center</strong> with the <code>is-centered</code> modifier
  735. </li>
  736. <li>
  737. to the <strong>right</strong> with the <code>is-right</code> modifier
  738. </li>
  739. </ul>
  740. </div>
  741. <div class="columns">
  742. <div class="column">
  743. <div class="bd-example">
  744. {{ file_centered }}
  745. </div>
  746. </div>
  747. <div class="column">
  748. {% highlight html %}{{ file_centered }}{% endhighlight %}
  749. </div>
  750. </div>
  751. <div class="columns">
  752. <div class="column">
  753. <div class="bd-example">
  754. {{ file_right }}
  755. </div>
  756. </div>
  757. <div class="column">
  758. {% highlight html %}{{ file_right }}{% endhighlight %}
  759. </div>
  760. </div>
  761. {% include heading.html name="JavaScript" %}
  762. <div class="content">
  763. <p>
  764. A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
  765. <br>
  766. User <a href="https://github.com/chintanbanugaria"><strong>@chintanbanugaria</strong></a> on GitHub <a href="https://github.com/jgthms/bulma/issues/280#issuecomment-294099510">has provided</a> a simple solution <a href="https://jsfiddle.net/chintanbanugaria/uzva5byy/">on JSFiddle</a>.
  767. </p>
  768. </div>
  769. {% include variables.html element=true %}
  770. </div>
  771. </section>