{"id":15572925,"url":"https://github.com/ajaxray/bootstrap-file-field","last_synced_at":"2025-09-05T02:11:37.418Z","repository":{"id":58245515,"uuid":"59471325","full_name":"ajaxray/bootstrap-file-field","owner":"ajaxray","description":"jQuery plugin to enhance html file input to look like bootstrap button, showing image thumb and apply useful restrictions (e.g. file types, size, number of files etc.)","archived":false,"fork":false,"pushed_at":"2019-10-19T08:17:02.000Z","size":263,"stargazers_count":12,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-24T11:52:12.064Z","etag":null,"topics":["bootstrap-buttons","bootstrap3","file-upload","javascript","jquery-plugin"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ajaxray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-23T09:51:32.000Z","updated_at":"2021-01-31T18:27:48.000Z","dependencies_parsed_at":"2022-08-30T22:50:23.130Z","dependency_job_id":null,"html_url":"https://github.com/ajaxray/bootstrap-file-field","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ajaxray/bootstrap-file-field","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaxray%2Fbootstrap-file-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaxray%2Fbootstrap-file-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaxray%2Fbootstrap-file-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaxray%2Fbootstrap-file-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajaxray","download_url":"https://codeload.github.com/ajaxray/bootstrap-file-field/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajaxray%2Fbootstrap-file-field/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273699712,"owners_count":25152286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-buttons","bootstrap3","file-upload","javascript","jquery-plugin"],"created_at":"2024-10-02T18:08:41.288Z","updated_at":"2025-09-05T02:11:37.371Z","avatar_url":"https://github.com/ajaxray.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"Bootstrap File Field\n============================\n\njQuery plugin to enhance file fields with modern features and bootstrap design.\nSmart file selection features (e,g, showing thumbs, restricting size and file type etc.)\nwhile using generic form submission, **no ajax upload**.\n\nWhat it does?\n------------------\n\n* Display file upload field like Bootstrap buttons\n* Can display preview thumbs of selected images\n* Can restrict file types - allow only configured mime types\n* Can set maximum and/or minimum file size limit \n* Can set maximum and/or minimum total size limit\n* Can set maximum and/or minimum number of files can be selected \n* All restrictions are checked on client side using HTML5 File/FileList/FileReader APIs\n* Display user friendly errors if any restriction prevented file selection\n* Display name/list of selected files (if no error and preview is off)  \n\nCheck [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/), it's usability + simplicity!\n\n![Screenshot](/demo/bootstrap-file-field-2.jpg \"Bootstrap File Field Screenshot\")\n\nInstall\n------------------\n**Using bower** \n\n`bower install bootstrap-file-field --save`\n\n**Manual Download**  \n\n[Download The Zip](https://github.com/ajaxray/bootstrap-file-field/archive/master.zip) file and extract to appropriate directory.  \n\nThen Include the plugin css file  \n`\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"path/to/plugin-dir/src/css/bootstrap_file_field.css\"\u003e`  \nAnd the JS file  \n`\u003cscript type=\"text/javascript\" src=\"path/to/plugin-dir/src/js/bootstrap_file_field.js\"\u003e\u003c/script\u003e`\n\nRemember to include jQuery js and Bootstrap css files before plugin files. Also, the file paths may have to be adjusted based on your local setup.\n\n\nHow to use\n------------------\n\n**Initiating with data attribute, no customization**\n```\n\u003cinput type=\"file\" data-field-type=\"bootstrap-file-filed\" name=\"sample1\"\u003e\n```\n\n**Showing image preview, setting custom label, class and file types. Allows multiple.**\n```\n\u003cinput type=\"file\" name=\"sample3[]\"    \n    data-field-type=\"bootstrap-file-filed\"  \n    data-label=\"Select Image Files\"  \n    data-btn-class=\"btn-primary\"  \n    data-file-types=\"image/jpeg,image/png,image/gif\"  \n    data-preview=\"on\"  \n    multiple \u003e\n```\n\n**Allow PDF files only. Preview off**\n```\n\u003cinput type=\"file\" name=\"sample4[]\"  \n    data-field-type=\"bootstrap-file-filed\"  \n    data-label=\"Select PDF Files\"  \n    data-file-types=\"application/pdf\"  \n    multiple \u003e\n```\n\n**Initiating with javascript by class/selector. Select at most 2 images below 80kb each**\n\nHTML :  \n`\u003cinput type=\"file\" class=\"smart-file\" name=\"sample3[]\" multiple\u003e`    \nJavaScript :  \n```\n$('.smart-file').bootstrapFileField({   \n    maxNumFiles: 2,  \n    fileTypes: 'image/jpeg,image/png',  \n    maxFileSize: 80000 // 80kb in bytes  \n});\n```\n\nCheck the `demo/index.html` file (in downloaded source) or [this live demo](http://ajaxray.com/demo/BootstrapFileField/demo/) to see more examples in action (including all the above).\n\nSupported Restrictions\n-------------------------\n\nYou can add restrictions based on - \n\n* File Types (using mime types)\n* Maximum File Size\n* Minimum File Size\n* Maximum Total Size (for multiple selection)\n* Maximum number of files\n* Minimum number of files\n\n\nConfiguration options\n--------------------------------\n\nYou can activate plugin on a file field by adding attribute\n`data-field-type=\"bootstrap-file-field\"` or using javascript (see examples above).\nThen you can use the following settings keys (as parameter to javascript activation function)\nor data attributes to configure your file field.\n\n| What to configure| JS Settings Option| Data attribute| Default|\n| --- | --- | --- | --- |\n| Button label | label | data-label | Select File/Select Files |\n| Button class | btnClass | data-btn-class | btn-default |    \n| Preview thumb | preview | data-preview | off |    \n| Allowed file types  by [mime type](https://www.sitepoint.com/web-foundations/mime-types-complete-list/) (comma separated values) | fileTypes | data-file-types | *Ignored* |    \n| Maximum file size (in byte) | maxFileSize | data-max-file-size | *Ignored* |    \n| Minimum file size (in byte) | minFileSize | data-min-file-size | *Ignored* |    \n| Maximum total file size (M) | maxTotalSize | data-max-total-size | *Ignored* |    \n| Maximum number of files (M) | maxNumFiles | data-max-num-files | *Ignored* |    \n| Minimum number of files (M) | minNumFiles | data-min-num-files | *Ignored* |\n(M) = For multiple file selection \n\nInspired by: http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajaxray%2Fbootstrap-file-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajaxray%2Fbootstrap-file-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajaxray%2Fbootstrap-file-field/lists"}