[筆記] 哎呀!不小心刻了一套 React UI 元件庫 9 – Upload

近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Upload。

react logo


[ Repo ]:https://github.com/andy922200/practice-storybook-react


內容

原生的 html 元件 <input type=”file”> 就可以完成上傳,美化版本的邏輯是「隱藏原生元件,使用按鈕去觸發原生元件」

原生元件就可以限制單個或是多個附檔名,以及上傳單一或是多個檔案

若要預覽選取的檔案,有兩種做法。我這邊決定使用第二個,

  1. 將 FIle 透過 FileReader() 得到一個 base64 的 string,然後再將這個值放到 img 的 src 屬性
  2. 直接用 URL.createObjectURL(File) 方法,產生 blob 內容放到 img 的 src 屬性。不過每次重新生成前,要先將記憶體釋放以免造成 memory leak

至於清空選的檔案,可將 <input> 的 value 設為 empty or null;強迫產生一個新的 input element;form.reset() 方法來實現


屬性

  1. resetKey:當 input Value 改變時,此值會重新生成,也就會觸發 React 的更新機制,產生一個新的元件。相當於重設元件
  2. accept:限制檔案類型
  3. multiple:是否選擇多個檔案
  4. onChange:上傳檔案後,執行的 callback
  5. children:這裡指的是上傳的按鈕外觀

程式碼

https://github.com/andy922200/practice-storybook-react/commit/3c55606c9b1f60c15eec3df172713a7ccfdd022e


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Modal 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容需要引入 P
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Circle 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Bar 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Skeleton 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1.
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Spin 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數isLoading
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Pagination 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數pag
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tabs。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數themeColor – 主題配色
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。[ Repo ]:https://github.com/andy922200/practice-
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。[ Repo ]:https://github.com/andy922
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Dropdown 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容由於 Drop
按讚加入粉絲團

延伸閱讀