Image-Uploader is a simple jQuery Drag & Drop Image Uploader plugin made to be used in forms, without AJAX.
This plugin uses the DataTransfer API. Therefore, is not a Cross Browser solution. Everything works fine on Chrome, though. See #3 for more details. If this is not a problem to you, feel free to enjoy the plugin.
Import the CSS file at the <head>:
<link type="text/css" rel="stylesheet" href="http://example.com/image-uploader.min.css">
Import the JS file at the end of the <body>, after the jQuery:
<script type="text/javascript" src="http://example.com/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/image-uploader.js"></script>
Create a form with enctype="multipart/form-data" attributte:
<form action="http://example.com/post" enctype="multipart/form-data"></form>
Inside the form, create a wrapper to the plugin:
<div class="input-images"></div>
Initialize it with jQuery
$('.input-images').imageUploader();
Type: string
Default: 'Drag & Drop files here or click to browse'
Informative label, telling the user what to do with the draggable area.
Type: {id: number, src: string}[]
Default: []
Array of objects representing images that are already stored, containing an identification for that image and the source.
Type: string
Default: 'images'
Name of the input that will be posted, containing the files list.
Type: string
Default: 'preloaded'
Name of the inputs that will be posted, containing the preloaded images identification.
Type: array
Default: ['.jpg', '.jpeg', '.png', '.gif', '.svg']
Array of strings with the allowed extensions. Enabled by default. To disable this validation, set it as undefined. If the uploaded file does not have one of these extensions, an alert will appear and the image will not be sent.
Type: array
Default: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
Array of strings with the allowed mime types. Enabled by default. To disable this validation, set it as undefined. If the uploaded file does not have one of these mime types, an alert will appear and the image will not be sent.
Type: int
Default: undefined
Value of the maximum file size allowed in bytes. Disabled by default. For a maximum size of 2 megabytes, you can set this option as 2 * 1024 * 1024 bytes. If the uploaded file does have more then allowed, an alert will appear and the image will not be sent.
Type: int
Default: undefined
Value of the maximum number of files allowed. Disabled by default. If the maximum number was reached, an alert will appear and the image will not be sent.
This project is licensed under the MIT License - see the LICENSE file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent