added new preview images, now handles all file-types, added tests

johndatserakis · Sep 29, 2017 · a890b47 · a890b47
1 parent 72f0097
commit a890b47
Show file tree

Hide file tree

Showing 12 changed files with 4,108 additions and 854 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,10 +1,17 @@
 {
   "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions", "safari >= 7"]
-      },
-      "modules": false
-    }]
+    [
+        "env", {
+            "targets": {
+                "browsers": ["last 2 versions", "safari >= 7"]
+            },
+            "modules": false
+        }
+    ]
   ],
+  "env": {
+      "test": {
+        "presets": [["env"]]
+      }
+    }
 }
diff --git a/README.md b/README.md
@@ -8,19 +8,19 @@
 
 # file-upload-with-preview
 
-This is a simple frontend utility to help the image-upload process on your website. It is written in pure JavaScript, has no dependencies, and is a tiny 3.75 kB (gzipped). You can check out the live demo [here](https://promosis.github.io/file-upload-with-preview/).
+This is a simple frontend utility to help the file-upload process on your website. It is written in pure JavaScript, has no dependencies, and is a tiny 3.75 kB (gzipped). You can check out the live demo [here](https://promosis.github.io/file-upload-with-preview/).
 
 For the most part, browsers do a good job of handling image-uploads. That being said - we find that the ability to show our users a preview of their upload can go a long way in increasing the confidence in their upload.
 
-`file-upload-with-preview` aims to address the issue of showing a preview of a user's uploaded image - along with providing a cancel-buttom functionality that allows a user to clear their upload - in a simple to use package.
+**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 uploaded .jpg, .jpeg, and .png images. Shows a *success-image* in the case of uploaded .pdf files - so the user knows their image was uploaded successfully.
+- Shows the actual image preview in the case of uploaded .jpg, .jpeg, and .png images. Shows a *success-image* in the case of uploaded .pdf files, uploaded videos, and other uploaded file types - so the user knows their image was collected successfully.
 - Shows the image name in the input bar.
-- Allows user to clear their upload.
+- 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.
-- Framework agnostic.
-- For every image you want just initialize another `FileUploadWithPreview` object with its own `uniqueId` - this way you can have multiple image uploads on the same page.
+- Framework agnostic - to access the uploaded file just use the `cachedFile` property of your `FileUploadWithPreview` object.
+- For every file you want just initialize another `FileUploadWithPreview` object with its own `uniqueId` - this way you can have multiple file-uploads on the same page.
 
 ## Installation
 
@@ -33,35 +33,41 @@ yarn add file-upload-with-preview
 ```
 Or you can include it through the browser at the bottom of your page:
 
-```bash
+```html
 <script src="https://unpkg.com/file-upload-with-preview"></script>
 ```
 
 ## Usage
 
 When installed through npm or yarn:
 
-```bash
+```javascript
+# using require
 const FileUploadWithPreview = require('file-upload-with-preview')
+
+# using import
+import FileUploadWithPreview from 'file-upload-with-preview'
+
+# initialize a new FileUploadWithPreview object
 const upload = new FileUploadWithPreview('myUniqueUploadId')
 ```
 ...or through the browser:
 
-```bash
+```html
 <script>
 	var upload = new FileUploadWithPreview('myUniqueUploadId')
 </script>
 ```
 
 You'll also want to include the css in your `<head></head>`:
 
-```bash
+```html
 <link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview/dist/file-upload-with-preview.min.css">
 ```
 
 The javascript looks for a specific set of HTML elements to display the file input, label, image preview, and clear-button. Make sure to populate the `custom-file-container` element with the uniqueId:
 
-```bash
+```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>
 
@@ -74,10 +80,10 @@ The javascript looks for a specific set of HTML elements to display the file inp
 </div>
 ```
 
-Then when you're ready to use the user's file for an API call or whatever, just access the user's uploaded file in the `cachedImage` property of your initialized object like this:
+Then when you're ready to use the user's file for an API call or whatever, just access the user's uploaded file in the `cachedFile` property of your initialized object like this:
 
 ```javascript
-upload.cachedImage
+upload.cachedFile
 ```
 
 ## Full Example
@@ -118,16 +124,34 @@ upload.cachedImage
 </html>
 ```
 
+In this example we set the `MAX_FILE_SIZE` value to `10485760` (10MB) and the accepted images to `*` (everything) - adjust those settings to whatever you like. For example, if you'd like to limit uploads to only images and pdf, use the following:
+
+`<input type="file" class="custom-file-container__custom-file__custom-file-input" accept="application/pdf,image/*">`
+
 ## Testing
 
-This project uses Jest for testing. Tests will be addeded shortly.
+Use `npm run test` to run the tests.
+
+## Development
+
+Clone the repo, then use the following to work on the project locally:
+
+```bash
+npm install
+
+# watch changes
+npm run watch
+
+# when done working
+npm run build
+```
 
 ## Other
 
 Go ahead and fork the project! Submit an issue if needed. Have fun!
 
 ## License
 
-Copywrite 2017 Promosis
+Copywrite 2017 [Promosis](https://promosis.com)
 
 [MIT](http://opensource.org/licenses/MIT)
diff --git a/dist/file-upload-with-preview.css b/dist/file-upload-with-preview.css
@@ -19,8 +19,6 @@
       height: calc(2.25rem + 2px);
       margin: 0;
       opacity: 0; }
-      .custom-file-container__custom-file__custom-file-input:hover {
-        cursor: pointer; }
     .custom-file-container__custom-file__custom-file-control {
       box-sizing: border-box;
       position: absolute;
@@ -31,16 +29,12 @@
       height: calc(2.25rem + 2px);
       padding: .5rem .75rem;
       overflow: hidden;
-      line-height: 1.25;
-      color: #495057;
-      pointer-events: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
+      line-height: 1.5;
+      color: #333;
       user-select: none;
       background-color: #fff;
       background-clip: padding-box;
-      border: 1px solid rgba(51, 51, 51, 0.15);
+      border: 1px solid #c0c0af;
       border-radius: .25rem; }
     .custom-file-container__custom-file__custom-file-control:empty::after {
       box-sizing: border-box;
@@ -55,15 +49,15 @@
       height: calc(2.25rem + 2px);
       padding: .5rem .75rem;
       line-height: 1.25;
-      color: #495057;
+      color: #333;
       background-color: #EDEDE8;
-      border-left: 1px solid rgba(51, 51, 51, 0.15); }
+      border-left: 1px solid #c0c0af; }
     .custom-file-container__custom-file__custom-file-control::before {
       box-sizing: border-box;
       content: "Browse"; }
   .custom-file-container__image-preview {
     box-sizing: border-box;
-    transition: all 1.0s ease-out;
+    transition: all 0.6s ease;
     margin-top: 20px;
     margin-bottom: 40px;
     height: 250px;

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
@@ -34,10 +34,24 @@
                 color: #3f7ebd;
             }
 
+            /*Pre, Code*/
+
+            pre {
+                font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
+            }
+
+            pre {
+                padding: .2rem .4rem;
+                font-size: 90%;
+                color: #333;
+                background-color:#EDEDE8;
+                border-radius: .25rem
+            }
+
             /*Header*/
 
             .header-container {
-                margin-top: 20px;
+                margin-top: 30px;
                 padding-left: 10px;
                 padding-right: 10px;
                 display: flex;
@@ -53,12 +67,13 @@
 
             .header-container__header-content {
                 font-size: 2.5rem;
-                margin-bottom: 40px;
+                margin-bottom: 30px;
                 margin-top: 0;
                 text-align: center;
             }
 
-            .header-container__link {
+            .header-container__code {
+                margin-bottom: 10px;
             }
 
             /*Upload Container*/
@@ -122,6 +137,11 @@
             <h1 class="header-container__header-content">
                 file-upload-with-preview
             </h1>
+
+            <div class="header-container__code">
+                <pre>npm install --save 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>
         </div>
 
@@ -133,7 +153,7 @@ <h1 class="header-container__header-content">
 
                 <label class="custom-file-container__custom-file" >
                     <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
-                    <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="application/pdf,image/*">
+                    <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*">
                     <span class="custom-file-container__custom-file__custom-file-control"></span>
                 </label>
                 <div class="custom-file-container__image-preview"></div>
@@ -144,7 +164,7 @@ <h1 class="header-container__header-content">
 
                 <label class="custom-file-container__custom-file" >
                     <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
-                    <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="application/pdf,image/*">
+                    <input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*">
                     <span class="custom-file-container__custom-file__custom-file-control"></span>
                 </label>
                 <div class="custom-file-container__image-preview"></div>
@@ -166,14 +186,14 @@ <h1 class="header-container__header-content">
             var firstUpload = new FileUploadWithPreview('myFirstImage')
             var firstUploadInfoButton = document.querySelector('.upload-info-button--first');
             firstUploadInfoButton.addEventListener('click', function(){
-                console.log('First upload:', firstUpload, firstUpload.cachedImage);
+                console.log('First upload:', firstUpload, firstUpload.cachedFile);
             })
 
             //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.cachedImage)
+                console.log('Second upload:', secondUpload, secondUpload.cachedFile)
             })
         </script>