v. 2.1.51
A javascript library to simplify client-side handling of user-inputted files.
The class is a default export as FI so it must be imported and used as a module.
<script type='module' src='file-input.js'></script>and then it can be used in other type=module scripts by importing it like this:
import FI from '../dist/file-input.js';
const button = document.getElementById('fi-btn');
const dragarea = document.getElementById('dd');
const prev = document.getElementById('preview');
// Create a file-input instance that accepts only PNG and JPG files
new FI({accept: ["png", "jpg"]})
// Attach the input to the drag area and give it some styles on hover
.attachToDragarea(dragarea, 'ddupload-hover')
// Attach the input ot a button
.openOnClick(button)
// Show the image when a file is selected
.onFileSelect(async function(){
const file = this.getFile();
this.clearFiles();
const uri = await FI.getFileDataURI(file);
prev.innerHTML = `<p>${file.name}</p><img src='${uri}'>`;
})
// If they drag and drop something that isn't a png or jpg
.onBadFileDrop(function(files){
prev.innerHTML = `<p><i>${files[0].name}</i> is not an acceptable file type.</p>`;
});You can see this example live here.
Create an new instance of the file-input object.
const fi = new FI({
// Any file extensions that you want to allow in
// your file input or drag area. Omit this
// option to allow all files.
accept: ["png", "jpg"],
// Allow the user to choose more than one file if set
// to `true`. The default is `false`.
multi: false
});Get the first file (Blob) selected by the user.
var files = fi.getFile();Get an array of files (blobs) selected by the user.
var files = fi.getFiles();Clear all the user-selected files from the instance. This method is chainable as it returns the class instance.
fi.clearFiles();Register a callback function that will be called whenever files are added. The callback is not passed any arguments. Callbacks are bound to the class instance. The callback may be removed from the instance by passing it to fi.offFileSelect(fn). This method is chainable as it returns the class instance.
fi.onFileSelect(function(e){
console.log(e.detail.dragTarget) // The element that the files were dragged into, or undefined if not dragged
console.log(e.detail.newFiles) // All newly added files
console.log(e.detail.allFiles) // All current files in the FI instance
console.log(e.detail.context) // the FI instace (same as `this`)
console.log(this.getFiles()); // or e.detail.context.getFiles(), or e.detail.allFiles
});Register a callback function that will be called whenever a file is dropped that does not match the acceptable file types. The callback will be passed an array of the invalid files as the first and only argument. Callbacks are bound to the class instance. The callback may be removed from the instance by passing it to fi.offBadFileDrop(fn). This method is chainable as it returns the class instance.
fi.onBadFileDrop(function(files){
alert(`${files[0].name} is not an acceptable file type.`);
});Open the browser's file-select dialog and let the user choose a file (or files, if the multi option is set to true). The function resolves with an array of files that the user chose, which is not necessarily all the files in the input currently. If the user closes the dialog without selecting anything, the array will be empty. If skipCallbacks is set to true, any callbacks declared with onFileSelect are not called.
var files = await fi.open();Given an element as the first argument, it will allow the user drag and drop file(s) over that element to add them to the instance. If the second argument is given and it is a string, it will be added as a class name to the element while user is dragging into it, and removed when the drag operation is completed. If the second parameter is given and it is an object, all properties of that object will be added to the element during the drag operation. This method is chainable as it returns the class instance.
fi.attachToDragarea(document.getElementById('drag-area'), 'dragarea-hover');
// or...
fi.attachToDragarea(document.getElementById('drag-area'), {backgroundColor:'red'});
// or... (second paramter is optional)
fi.attachToDragarea(document.getElementById('drag-area'));Detaches any drag areas from the FI instance, and removes all event handlers.
fi.detachAllDragAreas();This is a convenience function that adds an onClick event listener to the element, which opens the file-chooser dialog when the element is clicked. This method is chainable as it returns the class instance.
fi.openOnClick(document.getElementById('file-chooser-button'));Remove all event listeners, detach all drag areas and clickables, and reset the instance to it's just-initialized state so that it can be safely garbage collected.
fi.destroy();Add support for file types that are not recognised out of the box with this method by passing the file extention as the first argument and the mime type string as the second. Alternativelty, the second argument may be an array of mime-type strings.
var extention = '.xxx';
var mimeType = 'text/xxx';
FI.addMimeType(extention, mimeType);
var fi = new FI({
accept: ["xxx"]
});Given a file, this static method will resolve with the raw text of the file.
var file = fi.getFile();
var text = await FI.getFileText(file);Given a file, this static method will resolve with a DataURI of the file.
var file = fi.getFile();
var uri = await FI.getFileDataURI(file);
div.innerHTML = `<img src='${datauri}'>`;File-input recognizes these extentions out of the box.
| Extension | Content-Type |
|---|---|
| .3dm | x-world/x-3dmf |
| .3dmf | x-world/x-3dmf |
| .a | application/octet-stream |
| .aab | application/x-authorware-bin |
| .aam | application/x-authorware-map |
| .aas | application/x-authorware-seg |
| .abc | text/vnd.abc |
| .acgi | text/html |
| .afl | video/animaflex |
| .ai | application/postscript |
| .aif | audio/aiff audio/x-aiff |
| .aifc | audio/aiff audio/x-aiff |
| .aiff | audio/aiff audio/x-aiff |
| .aim | application/x-aim |
| .aip | text/x-audiosoft-intra |
| .ani | application/x-navi-animation |
| .aos | application/x-nokia-9000-communicator-add-on-software |
| .aps | application/mime |
| .arc | application/octet-stream |
| .arj | application/arj application/octet-stream |
| .art | image/x-jg |
| .asf | video/x-ms-asf |
| .asm | text/x-asm |
| .asp | text/asp |
| .asx | application/x-mplayer2 video/x-ms-asf video/x-ms-asf-plugin |
| .au | audio/basic audio/x-au |
| .avi | application/x-troff-msvideo video/avi video/msvideo video/x-msvideo |
| .avs | video/avs-video |
| .bcpio | application/x-bcpio |
| .bin | application/mac-binary application/macbinary application/octet-stream application/x-binary application/x-macbinary |
| .bm | image/bmp |
| .bmp | image/bmp image/x-windows-bmp |
| .boo | application/book |
| .book | application/book |
| .boz | application/x-bzip2 |
| .bsh | application/x-bsh |
| .bz | application/x-bzip |
| .bz2 | application/x-bzip2 |
| .c | text/plain text/x-c |
| .c++ | text/plain |
| .cat | application/vnd.ms-pki.seccat |
| .cc | text/plain text/x-c |
| .ccad | application/clariscad |
| .cco | application/x-cocoa |
| .cdf | application/cdf application/x-cdf application/x-netcdf |
| .cer | application/pkix-cert application/x-x509-ca-cert |
| .cha | application/x-chat |
| .chat | application/x-chat |
| .class | application/java application/java-byte-code application/x-java-class |
| .com | application/octet-stream text/plain |
| .conf | text/plain |
| .cpio | application/x-cpio |
| .cpp | text/x-c |
| .cpt | application/mac-compactpro application/x-compactpro application/x-cpt |
| .crl | application/pkcs-crl application/pkix-crl |
| .crt | application/pkix-cert application/x-x509-ca-cert application/x-x509-user-cert |
| .csh | application/x-csh text/x-script.csh |
| .css | application/x-pointplus text/css |
| .csv | text/csv |
| .cxx | text/plain |
| .dcr | application/x-director |
| .deepv | application/x-deepv |
| .def | text/plain |
| .der | application/x-x509-ca-cert |
| .dif | video/x-dv |
| .dir | application/x-director |
| .dl | video/dl video/x-dl |
| .doc | application/msword |
| .dot | application/msword |
| .dp | application/commonground |
| .drw | application/drafting |
| .dump | application/octet-stream |
| .dv | video/x-dv |
| .dvi | application/x-dvi |
| .dwf | drawing/x-dwf (old) model/vnd.dwf |
| .dwg | application/acad image/vnd.dwg image/x-dwg |
| .dxf | application/dxf image/vnd.dwg image/x-dwg |
| .dxr | application/x-director |
| .el | text/x-script.elisp |
| .elc | application/x-bytecode.elisp (compiled elisp) application/x-elc |
| .env | application/x-envoy |
| .eps | application/postscript |
| .es | application/x-esrehber |
| .etx | text/x-setext |
| .evy | application/envoy application/x-envoy |
| .exe | application/octet-stream |
| .f | text/plain text/x-fortran |
| .f77 | text/x-fortran |
| .f90 | text/plain text/x-fortran |
| .fdf | application/vnd.fdf |
| .fif | application/fractals image/fif |
| .fli | video/fli video/x-fli |
| .flo | image/florian |
| .flx | text/vnd.fmi.flexstor |
| .fmf | video/x-atomic3d-feature |
| .for | text/plain text/x-fortran |
| .fpx | image/vnd.fpx image/vnd.net-fpx |
| .frl | application/freeloader |
| .funk | audio/make |
| .g | text/plain |
| .g3 | image/g3fax |
| .gif | image/gif |
| .gl | video/gl video/x-gl |
| .gsd | audio/x-gsm |
| .gsm | audio/x-gsm |
| .gsp | application/x-gsp |
| .gss | application/x-gss |
| .gtar | application/x-gtar |
| .gz | application/x-compressed application/x-gzip |
| .gzip | application/x-gzip multipart/x-gzip |
| .h | text/plain text/x-h |
| .hdf | application/x-hdf |
| .help | application/x-helpfile |
| .hgl | application/vnd.hp-hpgl |
| .hh | text/plain text/x-h |
| .hlb | text/x-script |
| .hlp | application/hlp application/x-helpfile application/x-winhelp |
| .hpg | application/vnd.hp-hpgl |
| .hpgl | application/vnd.hp-hpgl |
| .hqx | application/binhex application/binhex4 application/mac-binhex application/mac-binhex40 application/x-binhex40 application/x-mac-binhex40 |
| .hta | application/hta |
| .htc | text/x-component |
| .htm | text/html |
| .html | text/html |
| .htmls | text/html |
| .htt | text/webviewhtml |
| .htx | text/html |
| .ice | x-conference/x-cooltalk |
| .ico | image/x-icon |
| .idc | text/plain |
| .ief | image/ief |
| .iefs | image/ief |
| .iges | application/iges model/iges |
| .igs | application/iges model/iges |
| .ima | application/x-ima |
| .imap | application/x-httpd-imap |
| .inf | application/inf |
| .ins | application/x-internett-signup |
| .ip | application/x-ip2 |
| .isu | video/x-isvideo |
| .it | audio/it |
| .iv | application/x-inventor |
| .ivr | i-world/i-vrml |
| .ivy | application/x-livescreen |
| .jam | audio/x-jam |
| .jav | text/plain text/x-java-source |
| .java | text/plain text/x-java-source |
| .jcm | application/x-java-commerce |
| .jfif | image/jpeg image/pjpeg |
| .jfif-tbnl | image/jpeg |
| .jpe | image/jpeg image/pjpeg |
| .jpeg | image/jpeg image/pjpeg |
| .jpg | image/jpeg image/pjpeg |
| .jps | image/x-jps |
| .js | application/x-javascript |
| .jut | image/jutvision |
| .kar | audio/midi music/x-karaoke |
| .ksh | application/x-ksh text/x-script.ksh |
| .la | audio/nspaudio audio/x-nspaudio |
| .lam | audio/x-liveaudio |
| .latex | application/x-latex |
| .lha | application/lha application/octet-stream application/x-lha |
| .lhx | application/octet-stream |
| .list | text/plain |
| .lma | audio/nspaudio audio/x-nspaudio |
| .log | text/plain |
| .lsp | application/x-lisp text/x-script.lisp |
| .lst | text/plain |
| .lsx | text/x-la-asf |
| .ltx | application/x-latex |
| .lzh | application/octet-stream application/x-lzh |
| .lzx | application/lzx application/octet-stream application/x-lzx |
| .m | text/plain text/x-m |
| .m1v | video/mpeg |
| .m2a | audio/mpeg |
| .m2v | video/mpeg |
| .m3u | audio/x-mpequrl |
| .man | application/x-troff-man |
| .map | application/x-navimap |
| .mar | text/plain |
| .mbd | application/mbedlet |
| .mc$ | application/x-magic-cap-package-1.0 |
| .mcd | application/mcad application/x-mathcad |
| .mcf | image/vasa text/mcf |
| .mcp | application/netmc |
| .me | application/x-troff-me |
| .mht | message/rfc822 |
| .mhtml | message/rfc822 |
| .mid | application/x-midi audio/midi audio/x-mid audio/x-midi music/crescendo x-music/x-midi |
| .midi | application/x-midi audio/midi audio/x-mid audio/x-midi music/crescendo x-music/x-midi |
| .mif | application/x-frame application/x-mif |
| .mime | message/rfc822 www/mime |
| .mjf | audio/x-vnd.audioexplosion.mjuicemediafile |
| .mjpg | video/x-motion-jpeg |
| .mm | application/base64 application/x-meme |
| .mme | application/base64 |
| .mod | audio/mod audio/x-mod |
| .moov | video/quicktime |
| .mov | video/quicktime |
| .movie | video/x-sgi-movie |
| .mp2 | audio/mpeg audio/x-mpeg video/mpeg video/x-mpeg video/x-mpeq2a |
| .mp3 | audio/mpeg3 audio/x-mpeg-3 video/mpeg video/x-mpeg |
| .mpa | audio/mpeg video/mpeg |
| .mpc | application/x-project |
| .mpe | video/mpeg |
| .mpeg | video/mpeg |
| .mpg | audio/mpeg video/mpeg |
| .mpga | audio/mpeg |
| .mpp | application/vnd.ms-project |
| .mpt | application/x-project |
| .mpv | application/x-project |
| .mpx | application/x-project |
| .mrc | application/marc |
| .ms | application/x-troff-ms |
| .mv | video/x-sgi-movie |
| .my | audio/make |
| .mzz | application/x-vnd.audioexplosion.mzz |
| .nap | image/naplps |
| .naplps | image/naplps |
| .nc | application/x-netcdf |
| .ncm | application/vnd.nokia.configuration-message |
| .nif | image/x-niff |
| .niff | image/x-niff |
| .nix | application/x-mix-transfer |
| .nsc | application/x-conference |
| .nvd | application/x-navidoc |
| .o | application/octet-stream |
| .oda | application/oda |
| .omc | application/x-omc |
| .omcd | application/x-omcdatamaker |
| .omcr | application/x-omcregerator |
| .p | text/x-pascal |
| .p10 | application/pkcs10 application/x-pkcs10 |
| .p12 | application/pkcs-12 application/x-pkcs12 |
| .p7a | application/x-pkcs7-signature |
| .p7c | application/pkcs7-mime application/x-pkcs7-mime |
| .p7m | application/pkcs7-mime application/x-pkcs7-mime |
| .p7r | application/x-pkcs7-certreqresp |
| .p7s | application/pkcs7-signature |
| .part | application/pro_eng |
| .pas | text/pascal |
| .pbm | image/x-portable-bitmap |
| .pcl | application/vnd.hp-pcl application/x-pcl |
| .pct | image/x-pict |
| .pcx | image/x-pcx |
| .pdb | chemical/x-pdb |
| application/pdf | |
| .pfunk | audio/make audio/make.my.funk |
| .pgm | image/x-portable-graymap image/x-portable-greymap |
| .pic | image/pict |
| .pict | image/pict |
| .pkg | application/x-newton-compatible-pkg |
| .pko | application/vnd.ms-pki.pko |
| .pl | text/plain text/x-script.perl |
| .plx | application/x-pixclscript |
| .pm | image/x-xpixmap text/x-script.perl-module |
| .pm4 | application/x-pagemaker |
| .pm5 | application/x-pagemaker |
| .png | image/png |
| .pnm | application/x-portable-anymap image/x-portable-anymap |
| .pot | application/mspowerpoint application/vnd.ms-powerpoint |
| .pov | model/x-pov |
| .ppa | application/vnd.ms-powerpoint |
| .ppm | image/x-portable-pixmap |
| .pps | application/mspowerpoint application/vnd.ms-powerpoint |
| .ppt | application/mspowerpoint application/powerpoint application/vnd.ms-powerpoint application/x-mspowerpoint |
| .ppz | application/mspowerpoint |
| .pre | application/x-freelance |
| .prt | application/pro_eng |
| .ps | application/postscript |
| .psd | application/octet-stream |
| .pvu | paleovu/x-pv |
| .pwz | application/vnd.ms-powerpoint |
| .py | text/x-script.phyton |
| .pyc | applicaiton/x-bytecode.python |
| .qcp | audio/vnd.qcelp |
| .qd3 | x-world/x-3dmf |
| .qd3d | x-world/x-3dmf |
| .qif | image/x-quicktime |
| .qt | video/quicktime |
| .qtc | video/x-qtc |
| .qti | image/x-quicktime |
| .qtif | image/x-quicktime |
| .ra | audio/x-pn-realaudio audio/x-pn-realaudio-plugin audio/x-realaudio |
| .ram | audio/x-pn-realaudio |
| .ras | application/x-cmu-raster image/cmu-raster image/x-cmu-raster |
| .rast | image/cmu-raster |
| .rexx | text/x-script.rexx |
| .rf | image/vnd.rn-realflash |
| .rgb | image/x-rgb |
| .rm | application/vnd.rn-realmedia audio/x-pn-realaudio |
| .rmi | audio/mid |
| .rmm | audio/x-pn-realaudio |
| .rmp | audio/x-pn-realaudio audio/x-pn-realaudio-plugin |
| .rng | application/ringing-tones application/vnd.nokia.ringing-tone |
| .rnx | application/vnd.rn-realplayer |
| .roff | application/x-troff |
| .rp | image/vnd.rn-realpix |
| .rpm | audio/x-pn-realaudio-plugin |
| .rt | text/richtext text/vnd.rn-realtext |
| .rtf | application/rtf application/x-rtf text/richtext |
| .rtx | application/rtf text/richtext |
| .rv | video/vnd.rn-realvideo |
| .s | text/x-asm |
| .s3m | audio/s3m |
| .saveme | application/octet-stream |
| .sbk | application/x-tbook |
| .scm | application/x-lotusscreencam text/x-script.guile text/x-script.scheme video/x-scm |
| .sdml | text/plain |
| .sdp | application/sdp application/x-sdp |
| .sdr | application/sounder |
| .sea | application/sea application/x-sea |
| .set | application/set |
| .sgm | text/sgml text/x-sgml |
| .sgml | text/sgml text/x-sgml |
| .sh | application/x-bsh application/x-sh application/x-shar text/x-script.sh |
| .shar | application/x-bsh application/x-shar |
| .shtml | text/html text/x-server-parsed-html |
| .sid | audio/x-psid |
| .sit | application/x-sit application/x-stuffit |
| .skd | application/x-koan |
| .skm | application/x-koan |
| .skp | application/x-koan |
| .skt | application/x-koan |
| .sl | application/x-seelogo |
| .smi | application/smil |
| .smil | application/smil |
| .snd | audio/basic audio/x-adpcm |
| .sol | application/solids |
| .spc | application/x-pkcs7-certificates text/x-speech |
| .spl | application/futuresplash |
| .spr | application/x-sprite |
| .sprite | application/x-sprite |
| .src | application/x-wais-source |
| .ssi | text/x-server-parsed-html |
| .ssm | application/streamingmedia |
| .sst | application/vnd.ms-pki.certstore |
| .step | application/step |
| .stl | application/sla application/vnd.ms-pki.stl application/x-navistyle |
| .stp | application/step |
| .sv4cpio | application/x-sv4cpio |
| .sv4crc | application/x-sv4crc |
| .svf | image/vnd.dwg image/x-dwg |
| .svr | application/x-world x-world/x-svr |
| .swf | application/x-shockwave-flash |
| .t | application/x-troff |
| .talk | text/x-speech |
| .tar | application/x-tar |
| .tbk | application/toolbook application/x-tbook |
| .tcl | application/x-tcl text/x-script.tcl |
| .tcsh | text/x-script.tcsh |
| .tex | application/x-tex |
| .texi | application/x-texinfo |
| .texinfo | application/x-texinfo |
| .text | application/plain text/plain |
| .tgz | application/gnutar application/x-compressed |
| .tif | image/tiff image/x-tiff |
| .tiff | image/tiff image/x-tiff |
| .tr | application/x-troff |
| .tsi | audio/tsp-audio |
| .tsp | application/dsptype audio/tsplayer |
| .tsv | text/tab-separated-values |
| .turbot | image/florian |
| .txt | text/plain |
| .uil | text/x-uil |
| .uni | text/uri-list |
| .unis | text/uri-list |
| .unv | application/i-deas |
| .uri | text/uri-list |
| .uris | text/uri-list |
| .ustar | application/x-ustar multipart/x-ustar |
| .uu | application/octet-stream text/x-uuencode |
| .uue | text/x-uuencode |
| .vcd | application/x-cdlink |
| .vcs | text/x-vcalendar |
| .vda | application/vda |
| .vdo | video/vdo |
| .vew | application/groupwise |
| .viv | video/vivo video/vnd.vivo |
| .vivo | video/vivo video/vnd.vivo |
| .vmd | application/vocaltec-media-desc |
| .vmf | application/vocaltec-media-file |
| .voc | audio/voc audio/x-voc |
| .vos | video/vosaic |
| .vox | audio/voxware |
| .vqe | audio/x-twinvq-plugin |
| .vqf | audio/x-twinvq |
| .vql | audio/x-twinvq-plugin |
| .vrml | application/x-vrml model/vrml x-world/x-vrml |
| .vrt | x-world/x-vrt |
| .vsd | application/x-visio |
| .vst | application/x-visio |
| .vsw | application/x-visio |
| .w60 | application/wordperfect6.0 |
| .w61 | application/wordperfect6.1 |
| .w6w | application/msword |
| .wav | audio/wav audio/x-wav |
| .wb1 | application/x-qpro |
| .wbmp | image/vnd.wap.wbmp |
| .web | application/vnd.xara |
| .wiz | application/msword |
| .wk1 | application/x-123 |
| .wmf | windows/metafile |
| .wml | text/vnd.wap.wml |
| .wmlc | application/vnd.wap.wmlc |
| .wmls | text/vnd.wap.wmlscript |
| .wmlsc | application/vnd.wap.wmlscriptc |
| .word | application/msword |
| .wp | application/wordperfect |
| .wp5 | application/wordperfect application/wordperfect6.0 |
| .wp6 | application/wordperfect |
| .wpd | application/wordperfect application/x-wpwin |
| .wq1 | application/x-lotus |
| .wri | application/mswrite application/x-wri |
| .wrl | application/x-world model/vrml x-world/x-vrml |
| .wrz | model/vrml x-world/x-vrml |
| .wsc | text/scriplet |
| .wsrc | application/x-wais-source |
| .wtk | application/x-wintalk |
| .xbm | image/x-xbitmap image/x-xbm image/xbm |
| .xdr | video/x-amt-demorun |
| .xgz | xgl/drawing |
| .xif | image/vnd.xiff |
| .xl | application/excel |
| .xla | application/excel application/x-excel application/x-msexcel |
| .xlb | application/excel application/vnd.ms-excel application/x-excel |
| .xlc | application/excel application/vnd.ms-excel application/x-excel |
| .xld | application/excel application/x-excel |
| .xlk | application/excel application/x-excel |
| .xll | application/excel application/vnd.ms-excel application/x-excel |
| .xlm | application/excel application/vnd.ms-excel application/x-excel |
| .xls | application/excel application/vnd.ms-excel application/x-excel application/x-msexcel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xlt | application/excel application/x-excel |
| .xlv | application/excel application/x-excel |
| .xlw | application/excel application/vnd.ms-excel application/x-excel application/x-msexcel |
| .xm | audio/xm |
| .xml | application/xml text/xml |
| .xmz | xgl/movie |
| .xpix | application/x-vnd.ls-xpix |
| .xpm | image/x-xpixmap image/xpm |
| .x-png | image/png |
| .xsr | video/x-amt-showrun |
| .xwd | image/x-xwd image/x-xwindowdump |
| .xyz | chemical/x-pdb |
| .z | application/x-compress application/x-compressed |
| .zip | application/x-compressed application/x-zip-compressed application/zip multipart/x-zip |
| .zoo | application/octet-stream |
| .zsh | text/x-script.zsh |