alnorris / File Dialog
Trigger the upload file dialog directly from your code easily.
Stars: ✭ 51
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to File Dialog
Uploadcare Widget
Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
Stars: ✭ 183 (+258.82%)
Mutual labels: upload, file, dialog
ak-vue3
组件库包含了 AutoForm 自动表单、BackTop 返回顶部、Breadcrumb 面包屑、 Button 按钮、Cascader 级联选择器、Checkbox 多选框、Collapse 折叠面板、ColorPicker 颜色选择器、DataPicker 时间选择器、Dialog 弹层对话框、Alert 弹框、Echarts 图形图表、Form 表单、Input 输入框、Lazy 图片延时加载、Loading 加载等待、Menu 菜单、Pagination 分页、Progress 进度条、Radio 单选框、Select 选择器、Steps 步骤条、Swiper 图片轮播、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 提示、Tr…
Stars: ✭ 24 (-52.94%)
Mutual labels: upload, dialog
Uploader
A lightweight and very configurable jQuery plugin for file uploading using ajax(a sync); includes support for queues, progress tracking and drag and drop.
Stars: ✭ 1,042 (+1943.14%)
Mutual labels: upload, file
React Filepond
🔌 A handy FilePond adapter component for React
Stars: ✭ 1,024 (+1907.84%)
Mutual labels: upload, file
file-upload-with-preview
🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.
Stars: ✭ 406 (+696.08%)
Mutual labels: upload, file
File Upload With Preview
🖼 A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.
Stars: ✭ 352 (+590.2%)
Mutual labels: upload, file
ngx-dropzone
A highly configurable dropzone component for Angular.
Stars: ✭ 123 (+141.18%)
Mutual labels: upload, file
Cj Upload
Higher order React components for file uploading (with progress) react file upload
Stars: ✭ 589 (+1054.9%)
Mutual labels: upload, file
Chibisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✭ 657 (+1188.24%)
Mutual labels: upload, file
Aetherupload Laravel
A Laravel package to upload large files 上传大文件的Laravel扩展包
Stars: ✭ 835 (+1537.25%)
Mutual labels: upload, file
ic-firebase-uploader
This component is a multi-file uploader for firebase
Stars: ✭ 21 (-58.82%)
Mutual labels: upload, file
react-file-input-previews-base64
This package provides an easy to use, ready to go and customizable wrapper around file input, with option for image previews and returning file as base64 string.
Stars: ✭ 15 (-70.59%)
Mutual labels: upload, file
safe-svg
Enable SVG uploads and sanitize them to stop XML/SVG vulnerabilities in your WordPress website.
Stars: ✭ 129 (+152.94%)
Mutual labels: upload, file
mat-file-upload
A simple & configurable Angular Material file upload component.
Stars: ✭ 14 (-72.55%)
Mutual labels: upload, file
ShareX-CDN
Basic image, text & file uploader CDN for ShareX
Stars: ✭ 22 (-56.86%)
Mutual labels: upload, file
react-simple-file-input
Simple wrapper for the HTML input tag and HTML5 FileReader API
Stars: ✭ 29 (-43.14%)
Mutual labels: upload, file
PHP-FileUpload
Simple and convenient file uploads — secure by default
Stars: ✭ 53 (+3.92%)
Mutual labels: upload, file
file-dialog
Directly call the file browser dialog from your code, and get back the resulting array of FileList. Handy for when you need to post files via AJAX/Fetch. No more hacky hiding of <input type="file">
elements. Support for Callbacks & Promises!
- Supports ES6 Modules, CommonJS, AMD, and global
- Supports selecting multiple files and the file type 'accepts' attribute (see examples below)
- Support for all major browsers
- No jQuery needed, tiny (1.25 KB), with no dependencies
Install
Supports both CommonJS and ES6 Modules
npm install file-dialog
-
import fileDialog from 'file-dialog'
orconst fileDialog = require('file-dialog')
Note: If you want to support older browsers make sure you have babel enabled.
<script>
includes
Classic - Include minified file-dialog.min.js via
<script>
- Module is binded to the global variable
fileDialog
Examples
Get a File via a promise and POST to server via Fetch
fileDialog()
.then(file => {
const data = new FormData()
data.append('file', file[0])
data.append('imageName', 'flower')
// Post to server
fetch('/uploadImage', {
method: 'POST',
body: data
})
})
Allow user to select only an image file
fileDialog({ accept: 'image/*' })
.then(files => {
// files contains an array of FileList
})
Allow user to select only images or videos
fileDialog({ accept: ['image/*', 'video/*'] })
.then(files => {
// files contains an array of FileList
})
Allow user to select multiple image files at once
fileDialog({ multiple: true, accept: 'image/*' })
.then(files => {
// files contains an array of FileList
})
Classic callback version of the above
fileDialog({ multiple: true, accept: 'image/*' }, files => {
// files contains an array of FileList
})
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].