Bumped to v3.0.0. Completed rewrite of library. Added new event and h…

…andling. Added options object. Concept of `showMultiple` is now true by default. Other changes - please see updated changelog.
johndatserakis · Sep 24, 2018 · 466f6fc · 466f6fc
1 parent 0c18646
commit 466f6fc
Show file tree

Hide file tree

Showing 11 changed files with 345 additions and 291 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # CHANGELOG.md
 
+## 3.0.0
+
+- Rewrite of the library code. Made the handling of multiple images a bit more clear. Tried to clean up the logic and set properties only a single time when needed. Should all be a bit more clear now.
+- Showing the grid of images in the case of multiple is now the default setting. To stop that, pass
+`{showMultiple: false}` when initializing the class.
+- All further options are now set up to be passed in a single `options` object during initialization. This will be good for any further additions.
+- Restructured how the `imageSelected` event is done as to make it a bit easier to use - see updated documentation on how to use that event.
+- `custom-file-container__image-preview__active` was changed to `custom-file-container__image-preview--active` to be inline with BEM style.
+- Added overflow to multiple image pane, so when there's a ton of images it doesn't just keep growing in height.
+
 ## 2.1.2 (2018-09-21)
 
 Merged in #12 from @firstor - support for .gifs in both single and multiple previews.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<p align="center"><a href="" target="_blank"><img width="200" src="static/file-upload-with-preview.png"></a></p>
+<p align="center"><a href="" target="_blank"><img src="static/file-upload-with-preview-animated.gif"></a></p>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/file-upload-with-preview"><img src="https://img.shields.io/npm/v/file-upload-with-preview.svg" alt="NPM Version"></a>
@@ -17,7 +17,7 @@ For the most part, browsers do a good job of handling image-uploads. That being
 **file-upload-with-preview** aims to address the issue of showing a preview of a user's uploaded image in a simple to use package.
 
 ### Features
-- Shows the actual image preview in the case of a single uploaded .jpg, .jpeg, or .png image. Shows a *success-image* in the case of an uploaded .pdf file, uploaded video, or other uploaded file - so the user knows their image was collected successfully. In the case of multiple selcted files, the user will be shown a *success-image* that indicates multiple files were selected.
+- Shows the actual image preview in the case of a single uploaded .jpg, .jpeg, .gif, or .png image. Shows a *success-image* in the case of an uploaded .pdf file, uploaded video, or other uploaded file - so the user knows their image was collected successfully. In the case of multiple selcted files, the users selected images will be shown in a grid (with the options to instead show a single *success-image* that indicates multiple files were selected).
 - Shows the image name in the input bar. Shows the count of selected images in the case of multiple selections within the same input.
 - Allows the user to clear their upload.
 - Looks great - styling based on Bootstrap 4's [custom file-upload](https://getbootstrap.com/docs/4.0/components/forms/#file-browser) style.
@@ -28,7 +28,7 @@ For the most part, browsers do a good job of handling image-uploads. That being
 
 ```bash
 # npm
-npm install --save file-upload-with-preview
+npm i file-upload-with-preview
 
 # yarn
 yarn add file-upload-with-preview
@@ -77,7 +77,7 @@ The JavaScript looks for a specific set of HTML elements to display the file inp
 
 ```html
 <div class="custom-file-container" data-upload-id="myFirstImage">
-    <label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>
+    <label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>
     <label class="custom-file-container__custom-file" >
         <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*" multiple>
         <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
@@ -103,23 +103,48 @@ upload.clearPreviewImage(); // clear all selected images
 You may also want to capture the event that an image is selected:
 
 ```javascript
-upload.imageSelected = function(event) {
-    var files = upload.cachedFileArray;
-    // handle files
-};
+window.addEventListener('fileUploadWithPreview:imageSelected', function(e) {
+    // e.detail.id
+    // e.detail.cachedFileArray
+    // Use e.detail.id to match up to your specific input
+    if (e.detail.id === 'mySecondImage') {
+        console.log(e.detail.cachedFileArray)
+    }
+})
 ```
 
 #### Note
 
 The `cachedFileArray` property is always an array. So if you are only allowing the user to upload a single file, you can access that file at `cachedFileArray[0]` - otherwise just send the entire array to your backend to handle it normally.
 
-### Show multiple
-An optional second boolean parameter can be set to `true` to allow a group of images to be uploaded and displayed in an image grid.  You'll also need to add the `multiple` parameter to the html input element so that users can select multiple images at a time.
+Make sure to set `multiple` on your input if you want to allow the user to select multiple images.
 
-```javascript
-const upload = new FileUploadWithPreview('myUniqueUploadId', true)
-```
-<p align="center"><a href="" target="_blank"><img width="200" src="static/multiple-file-upload-with-preview.png"></a></p>
+### Properties
+
+| name | type | description |
+|---|---|---|
+| uploadId | String | The id you set for the instance |
+| options.showMultiple | Boolean | Show the grid when there's multiple images. Default `true` |
+| cachedFileArray | Array | The current selected files |
+| selectedFilesCount | Number | The count of the currently selected files |
+| el | Element | The main container for the instance |
+| input | Element | The main container for the instance |
+| inputLabel | Element | The label for the image name/count |
+| imagePreview | Element | The display panel for the images |
+| clearButton | Element | The button to reset the instance |
+
+### Methods
+
+| method | parameters | description |
+|---|---|---|
+| selectImage | none | Open the image browser |
+| clearPreviewImage | none | Clear the `cachedFileArray` |
+
+### Events
+
+| event | parameters | description |
+|---|---|---|
+| fileUploadWithPreview:imageSelected | e.detail.id, e.detail.cachedFileArray, e.detail.selectedFilesCount | Triggered each time file/files are selected. Delivers the `uploadId`, updated `cachedFilesArray`, and `selectedFilesCount` for the event. |
 
 ### Full Example
 
@@ -138,7 +163,7 @@ const upload = new FileUploadWithPreview('myUniqueUploadId', true)
         ...
 
         <div class="custom-file-container" data-upload-id="myUniqueUploadId">
-            <label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>
+            <label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>
 
             <label class="custom-file-container__custom-file" >
                 <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*" multiple>
@@ -184,6 +209,7 @@ Clone the repo, then use the following to work on the project locally:
 npm install
 
 # watch changes
+# (Open the index.html to work real-time. Refresh browser to test changes.)
 npm run watch
 
 # when done working
@@ -198,4 +224,4 @@ Go ahead and fork the project! Submit an issue if needed. Have fun!
 
 Copywrite 2017 [Promosis](https://promosis.com)
 
-[MIT](http://opensource.org/licenses/MIT)
+[MIT](http://opensource.org/licenses/MIT)
diff --git a/dist/file-upload-with-preview.css b/dist/file-upload-with-preview.css
@@ -57,7 +57,7 @@
       content: "Browse"; }
   .custom-file-container__image-preview {
     box-sizing: border-box;
-    transition: all 0.6s ease;
+    transition: all 0.2s ease;
     margin-top: 20px;
     margin-bottom: 40px;
     height: 250px;
@@ -66,7 +66,8 @@
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
-    background-color: #fff; }
+    background-color: #fff;
+    overflow: scroll; }
   .custom-file-container__image-multi-preview {
     box-sizing: border-box;
     transition: all 0.6s ease;
@@ -77,4 +78,5 @@
     float: left;
     margin: 1.858736059%;
     width: 29.615861214%;
-    height: 100px; }
+    height: 90px;
+    box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.25); }
diff --git a/dist/file-upload-with-preview.js b/dist/file-upload-with-preview.js
diff --git a/dist/file-upload-with-preview.min.css b/dist/file-upload-with-preview.min.css
diff --git a/dist/file-upload-with-preview.min.js b/dist/file-upload-with-preview.min.js
diff --git a/index.html b/index.html
@@ -139,7 +139,7 @@ <h1 class="header-container__header-content">
             </h1>
 
             <div class="header-container__code">
-                <pre>npm install --save file-upload-with-preview</pre>
+                <pre>npm i file-upload-with-preview</pre>
             </div>
 
             <a href="https://github.com/promosis/file-upload-with-preview" target="_blank" class="header-container__link">View the source code on GitHub</a>
@@ -149,7 +149,7 @@ <h1 class="header-container__header-content">
         <div class="demo-upload-container">
 
             <div class="custom-file-container" data-upload-id="myFirstImage">
-                <label>Upload (Single File) <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>
+                <label>Upload (Single File) <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>
                 <label class="custom-file-container__custom-file" >
                     <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="image/*">
                     <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
@@ -159,7 +159,7 @@ <h1 class="header-container__header-content">
             </div>
 
             <div class="custom-file-container" data-upload-id="mySecondImage">
-                <label>Upload (Allow Multiple) <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>
+                <label>Upload (Allow Multiple) <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>
                 <label class="custom-file-container__custom-file" >
                     <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*" multiple>
                     <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
@@ -180,19 +180,30 @@ <h1 class="header-container__header-content">
 
         <script src="dist/file-upload-with-preview.js"></script>
         <script>
-            //First upload
-            // var firstUpload = new FileUploadWithPreview('myFirstImage')
-            // var firstUploadInfoButton = document.querySelector('.upload-info-button--first');
-            // firstUploadInfoButton.addEventListener('click', function(){
-            //     console.log('First upload:', firstUpload, firstUpload.cachedFileArray);
-            // })
-
-            //Second upload
+            // First upload
+            var firstUpload = new FileUploadWithPreview('myFirstImage')
+            var firstUploadInfoButton = document.querySelector('.upload-info-button--first');
+            firstUploadInfoButton.addEventListener('click', function(){
+                console.log('First upload:', firstUpload, firstUpload.cachedFileArray);
+            })
+
+            // Second upload
             var secondUpload = new FileUploadWithPreview('mySecondImage')
             var secondUploadInfoButton = document.querySelector('.upload-info-button--second');
             secondUploadInfoButton.addEventListener('click', function(){
                 console.log('Second upload:', secondUpload, secondUpload.cachedFileArray)
             })
+
+            // General event listener
+            window.addEventListener('fileUploadWithPreview:imageSelected', function(e) {
+                // e.detail.uploadId
+                // e.detail.cachedFileArray
+                // e.detail.selectedFilesCount
+                // Use `e.detail.uploadId` to match up to your specific input
+                if (e.detail.uploadId === 'mySecondImage') {
+                    console.log(e.detail.cachedFileArray)
+                }
+            })
         </script>
 
     </body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "file-upload-with-preview",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "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.",
   "author": "Promosis",
   "contributors": [