Bureaucracy NPM

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.

install

npm i bureaucracy -S

`create(options?)`

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`

`bureaucrat.submit(files)`

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": [
    "anything",
    { "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);
bureaucrat.submit(uploadInput.files);

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.