Pārlūkot izejas kodu

docs: Talk about using a custom file input, instead of the file-input plugin (#1765)

* Talk about using a custom file input, instead of file-input plugin

* move to the end, handle restriction errors instead of ignoring
Artur Paikin 5 gadi atpakaļ
vecāks
revīzija
a7d7bbd710
1 mainītis faili ar 39 papildinājumiem un 1 dzēšanām
  1. 39 1
      website/src/docs/fileinput.md

+ 39 - 1
website/src/docs/fileinput.md

@@ -9,7 +9,7 @@ category: 'Sources'
 tagline: even more plain and simple, just a button
 ---
 
-`@uppy/file-input` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browser's file selector.
+`@uppy/file-input` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browsers file selector.
 
 ```js
 const FileInput = require('@uppy/file-input')
@@ -91,3 +91,41 @@ strings: {
   chooseFiles: 'Choose files'
 }
 ```
+
+## Custom file input
+
+If you don’t like the look/feel of the button rendered by `@uppy/file-input`, feel free to forgo the plugin and use your own custom button on a page, like so:
+
+```html
+<input type="file" id="my-file-input">
+```
+
+Then add this JS to attach it to Uppy:
+
+```js
+const uppy = Uppy(...)
+const fileInput = document.querySelector('#my-file-input')
+
+fileInput.addEventListener('change', (event) => {
+  const files = Array.from(event.target.files)
+
+  files.forEach((file) => {
+    try {
+      uppy.addFile({
+        source: 'file input',
+        name: file.name,
+        type: file.type,
+        data: file
+      })
+    } catch (err) {
+      if (err.isRestriction) {
+        // handle restrictions
+        console.log('Restriction error:', err)
+      } else {
+        // handle other errors
+        console.error(err)
+      }
+    }
+  })
+})
+```