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.

license

mit