File Select

File Select is a library to simplify using the File API.

Below are some simple examples to get you started.
For a complete README, checkout the repo @aslamhus/fileselect

Select and get files

Nice and simple

            
              const fileSelect = new FileSelect();
              fileSelect.select().then((fileList) => {
                // write names of files 
              })

Try it

Get Previews

getPreviews returns an IMG,VIDEO, or AUDIO element depending on the file type for each file in the fileList. The src of the element is an ObjectURL created from the selected file. Each element, except in the case of an AUDIO element, will revoke their ObjectURL when they load so your browser resources don't get overloaded. If you are creating previews of audio elements, please ensure you revoke the ObjectURL yourself.
For more info, read the MDN specification on ObjectURLs. 

            
              const fileSelect = new FileSelect();
              fileSelect.select().then((files) => {
                files.getPreviews().then(preview => {
                  document.body.append(...previews)
                })
              })

              // with async/await
              const selected = await fileSelect.select();
              const previews = await selected.getPreviews();
              document.body.append(...previews)

Try it

Try getting previews for movies, sound files, pdf or images

Read files and upload them

FileSelect supports conversion of files to base64 so they can be sent to a server. 

          
            const fileSelect = new FileSelect();
            fileSelect.select().then((files) => {
                files.readFiles().then(dataURLs => {
                  // send dataURLs to server
                })
            })

Restrict file type

By default, FileSelect allows all file types. In this example we restrict the selectable files to pdfs by passing the mimetype 'application/pdf' to the FileSelect constructor. 

            
              const fileSelect = new FileSelect('application/pdf');
              fileSelect.select().then((files) => {
               // do something with the files
              }).catch(error => {
                // write the error 
              })

Try it

Try uploading pdfs and non pdfs

Restrict to multiple file types

Allow pngs and jpegs

            
              const fileSelect = new FileSelect(['image/jpeg','image/png']);
              fileSelect.select().then((files) => {
               // do something with the files
              }).catch(error => {
                // write the error 
              })

Try it

Get icons

Helpful if you are building a file uploader and want to display the file type, See @aslamhus/fileicon for more information. 

            
              const fileSelect = new FileSelect();
              fileSelect.select().then((files) => {
                files.getIcons().then(icons => {
                  document.body.append(...icons)
                })
              })

Try it

Get icons with custom colors

          
            const fileSelect = new FileSelect('*', {
              colors : {
                bg: 'transparent',
                iconBg: 'darkblue',
                textBg: 'rgba(250,250,250,0.2)',
                text: '#FFF',
                outline: 'grey',
              },
              }
             });
            const files = await fileSelect.select();
            const icons = await files.getIcons();
            document.body.append(...icons)

Try it