version 1.0.0

ahmadgamal99 · Sep 3, 2022 · 6ced14c · 6ced14c
1 parent 49d5bd3
commit 6ced14c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,56 @@
 # Multiple-Uploader.js
-This library is used to upload multiple images with previewing them realtime
+
+Multiple Uploader is a pure javaScript library that uploads multiple images with previewing them realtime. 
+
+It's fully configurable, can be styled according to your needs.
+
+<div align="center">
+  <img width="674" alt="Multiple Uploader Gif" src="https://s4.gifyu.com/images/multiple-uploader.gif">
+</div>
+
+## Quickstart
+
+After Downloading files just add these lines of code:
+
+```html
+
+<form action="" method="" enctype="multipart/form-data" ></form>
+
+<div class="multiple-uploader" id="multiple-uploader">
+  <div class="mup-msg">
+    <span class="mup-main-msg">click to upload images.</span>
+    <span class="mup-msg" id="max-upload-number">Upload up to 10 images</span>
+    <span class="mup-msg">Only images, pdf and psd files are allowed for upload</span>
+  </div>
+</div>
+
+<script src="./src/js/multiple-uploader.js"></script>
+<script>
+
+  let multipleUploader = new MultipleUploader().init({
+    maxUpload : 20, // maximum number of uploaded images
+    maxSize:2, // size in mega bytes
+    filesInpName:'images', // input name attribute that is sent to backend
+    formSelector: 'form', // form selector, you can provide the id of the form such as #myForm 
+  });
+
+  multipleUploader.clear(); // this function clears all uploaded images
+  
+</script>
+```
+
+
+---
+
+> ⚠️ **NOTE**: We are currently support uploading images only
+
+## Main features ✅
+
+- Image thumbnail previews.
+- Image sizes previews on hover.
+- Deleting uploaded images.
+- Set maximum size for the images.
+- Set maximum number of uploaded images.
+- Well tested.
+
+# MIT License
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 
-<form action="/test" method="post" ></form>
+<form action="" method="" enctype="multipart/form-data" ></form>
 
 <div class="multiple-uploader" id="multiple-uploader">
     <div class="mup-msg">
@@ -17,7 +17,7 @@
     </div>
 </div>
 
-<script src="./src/js/multiple-uploader.js"  ></script>
+<script src="./src/js/multiple-uploader.js"></script>
 <script>
 
     let multipleUploader = new MultipleUploader().init({

diff --git a/src/css/main.css b/src/css/main.css
@@ -1,12 +1,15 @@
+
+
 .multiple-uploader {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     border-radius: 15px;
     border: 2px dashed #858585;
     min-height: 150px;
-    margin: 10px 20px;
+    margin: 20px auto;
     cursor: pointer;
+    width: 80%;
 }
 
 .mup-msg {