All Projects → blueberryapps → redux-file-upload

blueberryapps / redux-file-upload

Licence: MIT License
Redux-friendly file upload made easy

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to redux-file-upload

HerokuContainer
Dockerized ASP.NET Core Web API app in Heroku
Stars: ✭ 26 (-61.19%)
Mutual labels:  file-upload
gasper
Gasper is a CLI for safe, privacy-aware file storage based on Shamir's Secret Sharing
Stars: ✭ 37 (-44.78%)
Mutual labels:  file-upload
simpleDjangoProject
simpleDjangoProject
Stars: ✭ 30 (-55.22%)
Mutual labels:  file-upload
Meteor-Files-Demos
Demos for ostrio:files package
Stars: ✭ 51 (-23.88%)
Mutual labels:  file-upload
lolisafe
Blazing fast file uploader and awesome bunker written in node! 🚀
Stars: ✭ 181 (+170.15%)
Mutual labels:  file-upload
PiZilla
A lightweight, open-source file sharing web application for local networks.
Stars: ✭ 22 (-67.16%)
Mutual labels:  file-upload
autumn
Pluggable file server micro-service.
Stars: ✭ 27 (-59.7%)
Mutual labels:  file-upload
SimpleBatchUpload
Allows for basic, no-frills uploading of multiple files
Stars: ✭ 15 (-77.61%)
Mutual labels:  file-upload
form-data
Spec-compliant FormData implementation for Node.js
Stars: ✭ 73 (+8.96%)
Mutual labels:  file-upload
fileupload-nodejs
MongoDB file upload using NodeJS and Mongo GridFS
Stars: ✭ 54 (-19.4%)
Mutual labels:  file-upload
onion-form
React Redux form builder with great UX validations
Stars: ✭ 50 (-25.37%)
Mutual labels:  blueberry-opensource
IPS-BitTracker
Bit Torrent Tracker application for IPS 4.5x Community Suite
Stars: ✭ 18 (-73.13%)
Mutual labels:  file-upload
pavo
Server-side upload service for jQuery-File-Upload written in Golang
Stars: ✭ 78 (+16.42%)
Mutual labels:  file-upload
translation-engine
A Rails engine for sending and receiving translations from Translation Server
Stars: ✭ 14 (-79.1%)
Mutual labels:  blueberry-opensource
rustypaste
A minimal file upload/pastebin service.
Stars: ✭ 102 (+52.24%)
Mutual labels:  file-upload
feathers-example-fileupload
A feathers file upload example, using feathers-blob.
Stars: ✭ 58 (-13.43%)
Mutual labels:  file-upload
files
Laravel Enso file management add-on for smoothing out some of common cases found when working with files
Stars: ✭ 15 (-77.61%)
Mutual labels:  file-upload
react-hooks-file-upload
React Hooks File Upload example with Progress Bar using Axios, Bootstrap
Stars: ✭ 30 (-55.22%)
Mutual labels:  file-upload
archivebot
💾 A telegram bot for backing up and collecting all kinds of media.
Stars: ✭ 65 (-2.99%)
Mutual labels:  file-upload
vue3-dropzone
HTML5 drag-drop zone with vue3
Stars: ✭ 34 (-49.25%)
Mutual labels:  file-upload

redux-file-upload Dependency Status

Motivation

There aren't any simple yet customizable file uploader packages that would work nicely with Redux. redux-file-upload is here to fill the gap!

Install

npm install --save redux-file-upload

Please note - a middleware that passes dispatch to actions, e.g. redux-thunk, redux-promise-middleware, is required for this package to work properly.

API

The package exposes the following:

  • actions - you can use these to implement your own custom logic if you need (e.g. add more dropzones for a single uploader). Check the source code to see what actions are available.
  • reducer - add this to your composed reducer.
  • FileUpload - the main component (see its API below).
  • UploadingDocument - an immutable record representing the way a generic document is represented in store.
  • UploadingImage - an immutable record representing the way an image is represented in store.

FileUpload API

Below are the props you can pass to the file upload component.

allowedFileTypes

An array with filetypes that can be uploaded using the file upload. There are several that will be recognized automatically as images (jpg, jpeg, png, gif, tiff).

className

The component will be wrapped in a div with this class.

data

Object with any additional data that will be sent along with the files to the endpoint.

dropzoneActiveStyle

Style used when user hovers over the dropzone.

dropzoneId (required)

Each file uploader on the package needs a unique ID. This value is also used as an identifier in the reducer unless the identifier prop is specified (see below).

identifier

If specified, uploaded files will be organized in the store using this value. Specifying the same value for multiple file upload components allows you to have multiple dropzones for the same file upload on one page.

multiple

Specifies whether the file upload allows more than one file being added at one time.

url (required)

The URL to which the files will be POSTed.

You can also pass something as children to the component (for example an upload button).

Example

import { FileUpload } from 'redux-file-upload'

<FileUpload
  allowedFileTypes={['jpg', 'pdf']}
  data={{ type: 'picture' }}
  dropzoneId="fileUpload"
  url="https:/url.org/api/docs/upload"
>
  <button>
    Click or drag here
  </button>
</FileUpload>

Browser compatibility

The component should work in all modern browsers including IE11+.

License

MIT 2016

Made with love by

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].