react-images-uploader alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-images-uploader alternatives based on common mentions on social networks and blogs.
-
react-pdf
Display PDFs in your React app as easily as if they were images. -
react-joyride
Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. -
typography
A powerful toolkit for building websites with beautiful typography. -
react-resizable-and-movable
Resizable and movable component for React. -
react-designer
Easy to configure, lightweight, editable vector graphics in your react components. -
react-resizable-box
Resizable component for React. #reactjs. -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
react-facebook
Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. -
react-avatar
Universal React avatar component makes it possible to generate avatars based on user information. -
react-svg-buttons
Configurable animated SVG buttons for react. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
react-dnr
Dragable and Resizable window build with React.js. -
material-color-hash
Hash strings to Material UI colors. -
react-avatar-generator
Allows users to create random kaleidoscopes to be used as avatars. -
react-filter-control
The React filterbuilder component for building the filter criteria in the UI. -
react-headings
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. -
react-color-scroll
Change and blend new colors on the background as you scroll. -
captcha-image
Allows you to generate a random captcha image with options. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
Get performance insights in less than 4 minutes
Do you think we are missing an alternative of react-images-uploader or a related project?
README
React Images Uploader
React.js component for uploading images to the server
Examples
Example for multiple images:
import React, { Component } from 'react';
import ImagesUploader from 'react-images-uploader';
import 'react-images-uploader/styles.css';
import 'react-images-uploader/font.css';
export default class MyUploader extends Component {
render() {
return (
<ImagesUploader
url="http://localhost:9090/multiple"
optimisticPreviews
onLoadEnd={(err) => {
if (err) {
console.error(err);
}
}}
label="Upload multiple images"
/>
);
}
}
Example for one picture:
import React, { Component } from 'react';
import ImagesUploader from 'react-images-uploader';
import 'react-images-uploader/styles.css';
import 'react-images-uploader/font.css';
export default class MyUploader extends Component {
render() {
return (
<ImagesUploader
url="http://localhost:9090/notmultiple"
optimisticPreviews
multiple={false}
onLoadEnd={(err) => {
if (err) {
console.error(err);
}
}}
label="Upload a picture"
/>
);
}
}
Example server (Node.js, Express)
you need to install cors-prefetch-middleware and images-upload-middleware from npm.
import express from 'express';
import corsPrefetch from 'cors-prefetch-middleware';
import imagesUpload from 'images-upload-middleware';
const app = express();
app.use('/static', express.static('./server/static'));
app.use(corsPrefetch);
app.post('/multiple', imagesUpload(
'./server/static/multipleFiles',
'http://localhost:9090/static/multipleFiles',
true
));
app.post('/notmultiple', imagesUpload(
'./server/static/files',
'http://localhost:9090/static/files'
));
app.listen(9090, () => {
console.log('Listen: 9090');
});
Other servers
Props
url: string
- server url;classNamespace: string
- namespace for all classNames (default: 'iu-'
);inputId: string
- id and name for hidden input type file. Used for htmlFor in label (default: 'filesInput'
);label: string
- label text;images: Array
- an array of references to the already uploaded images;disabled: boolean
;onLoadStart: function()
- callback, which is called when the download starts;onLoadEnd: function(error: { message: string, ... }, response?: JSON)
Error messages:
invalid response type
- additional params: response, fileName (imagesUploader);server error
- additional params: status (response status), fileName (imagesUploader);exceeded the number
- if there ismax
property and files count > max;file type error
- additional params: type (file type), fileName (imagesUploader);
deleteImage: function(key: number)
- callback which is called when the image has been deleted from the list;clickImage: function(key: number)
- callback which is called when the image preview is clicked;optimisticPreviews: boolean
- enables optimistic previewsdefault: false
;multiple: boolean
- allows to upload a bunch of images !default: true
!;image: string
- this property works only when multiple: false! already loaded picture;notification: string
- this property works only with multiple: false! notification text;max: number
- the maximum number of pictures for a single upload;color: string
- color for text and svgdefault: '#142434'
;disabledColor: string
- color for text and svg in disabled modedefault: '#bec3c7'
;borderColor: string
- border colordefault: '#a9bac8'
;disabledBorderColor: string
- border color in disabled modedefault: '#bec3c7'
;notificationBgColor: string
- background color for notificationdefault: 'rgba(0, 0, 0, 0.3)'
;notificationColor: string
- text and svg color for notificationdefault: '#fafafa'
;deleteElement: string|element
- element for removing images;plusElement: string|element
- element for adding images;classNames: { container: string, label: string, deletePreview: string, loadContainer: string, dropzone: string, pseudobutton: string, pseudobuttonContent: string, imgPreview: string, fileInput: string, emptyPreview: string, filesInputContainer: string, notification: string, }
styles: { container: Object, label: Object, deletePreview: Object, loadContainer: Object, dropzone: Object, pseudobutton: Object, pseudobuttonContent: Object, imgPreview: Object, fileInput: Object, emptyPreview: Object, filesInputContainer: Object, notification: Object, }