Pull files from hidden file inputs into text inputs with ease

Usage no npm install needed!

<script type="module">
  import bureaucracy from 'https://cdn.skypack.dev/bureaucracy';



Pull files from hidden file inputs into text inputs with ease

If you want the hidden file inputs part, just absolutely position the file input behind a button skin. Many articles on the internet explain how to do this.


npm i bureaucracy -S


Creates a bureaucrat object that can submit files to an HTTP API endpoint. It takes a few options.

Option Description
validate Function that receives a File object and should indicate whether that file is valid
method HTTP method to use when posting the files. Defaults to PUT
endpoint HTTP endpoint to post the files to. Defaults to /api/files
fieldKey String setting file upload field key. Defaults to uploads
formData Object containing additional form parameters. Defaults to an empty object: {}

There are "common" validate functions for your convenience. These can be referenced by name on the validate option

Validator Description
'image' Files are expected to have a MIME type of image/gif, image/png, image/jpg, or image/jpeg


The files parameter expects an array of File or a FileList, like the ones you can pull from input.files, where input is an input element of type file.

The files are uploaded using a default uploads field key, but this can be customized using the fieldKey options parameter. Once your API has handled the uploaded files, a JSON response should be returned. The only requirement here is a results property that's an array describing the success of each file upload.

  "results": [
    { "can": "be_used"},
    ["as", "a", "result"]

This data can be useful for the front-end to react to successful file uploads on the success event.

var bureaucrat = create();
bureaucrat.on('success', uploadSuccess);

function uploadSuccess (results) {
  console.log('so many files were uploaded!');

The submission process emits a variety of events on the bureaucrat object, using the contra emitter API.

Event Arguments Description
started rawFiles A submission attempt has started for rawFiles
invalid allFiles Submitted files were invalid, a request won't be made
valid validFiles At least one submitted file was valid, a request will be made
error err An error err occurred during the HTTP API request
success results, body The file API call succeeded and yielded some results
ended err, results, body The HTTP API request process ended, emitted after both error and success

setup(fileinput, options?)

Reacts to change events on a file input by making a PUT /api/files request with the valid user-selected files as soon as the user is finished choosing their files.