Merge pull request #1 from abarta/master

Upstream

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.idea/

.npmignore

@@ -1,2 +1,3 @@
-.idea
+.idea/
 demo/
+node_modules/

README.md

@@ -7,6 +7,9 @@
 See live demo [here](https://abarta.github.io/vue2-multi-uploader/demo/).
 
 ### Latest
+PostData and other changes contributed by [SergioReis97](https://github.com/SergioReis97) via PR. Thanks!
+Message props contributed by [Mushood](https://github.com/Mushood) via PR. Thank you!
+
 Optional `maxItems` prop added to allow setting a maximum number of files allowed per upload.  
 Default `maxItems` is set to 30.
 
@@ -41,6 +44,31 @@ npm install --save vue2-multi-uploader
 | maxItems | Number     |    no | 30
 | method | String     |    no | POST
 | postMeta | String, Array, Object     |    no | -
+| postData |  Object  |    no | -
+| showHttpMessages | Boolean     |    no | true
+| postHeader |  Object     |    no | null
+
+### Message Props
+All text in the component is also configurable. Below is the list of available props that can be configured, if necessary. Default values are provided for each prop.
+
+| Prop name         | Type            | Required    | Default  
+| -------------     |:-------------:  | -----:      | -----:|
+| headerMessage     | String          |    no       | Add files
+| dropAreaPrimaryMessage  | String    |    no       | Drop multiple files here.
+| dropAreaSecondaryMessage | String   |    no       | or click to upload
+| fileNameMessage   | String          |    no       | Names
+| fileSizeMessage   | String          |    no       | Sizes
+| totalFileMessage  | String          |    no       | Total files:
+| totalUploadSizeMessage | String     |    no       | Total upload size:
+| removeFileMessage | String          |    no       | Remove files
+| uploadButtonMessage  | String       |    no       | Upload
+| cancelButtonMessage | String        |    no       | Cancel
+| fileUploadErrorMessage   | String   |    no       | An error has occurred
+| minFilesErrorMessage   | String     |    no       | Minimum files that need to be added to uploader
+| maxFilesErrorMessage  | String      |    no       | Maximum files that can be added to uploader
+| retryErrorMessage | String          |    no       | Please remove the files and try again.
+| httpMethodErrorMessage | String     |    no       | This HTTP method is not allowed. Please use either 'put' or     'post' methods.
+
 
 #### postURL
 Set your POST url in the postURL prop.
@@ -55,7 +83,7 @@ Example template to use:
 <multiple-file-uploader postURL="http://.." successMessagePath="" errorMessagePath=""></multiple-file-uploader>
 ```
 Minimum items to upload (optional)
-You can modify the minimum number of files required for the upload to take place by changing the value of minItems prop. Default is set to 1. 
+You can modify the minimum number of files required for the upload to take place by changing the value of minItems prop. Default is set to 1.
 Here is an example template for uploading a minimum of 5 items and a maximum of 10 items:
 ``` html
 <multiple-file-uploader postURL="http://.." successMessagePath="" errorMessagePath="" :minItems="5" :maxItems="10"></multiple-file-uploader>
@@ -67,6 +95,15 @@ Axios, ES6-Promise
 CSS style is not scoped so it's easy for you to overwrite your own style.
 Bootstrap CSS is used in demo but not required for the component.
 
+Class dropAreaDragging is active for giving some user feedback.
+Example:
+
+```
+.dropAreaDragging{
+   background-color:#ccc;
+}
+```
+
 ### LICENSE
 
 ---
@@ -91,4 +128,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue2-multi-uploader",
   "description": "Drag and drop multiple file uploader with Vue.js v2 and Axios",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "author": "Andrei Barta @ UPDIVISION",
   "main": "dist/build.js",
   "repository": {

src/MultipleFileUploader.vue

@@ -1,44 +1,43 @@
 <template>
     <div class="uploadBox">
-        <h3>Add files</h3>
+        <h3>{{headerMessage}}</h3>
         <form role="form" enctype="multipart/form-data" @submit.prevent="onSubmit">
             <div class="uploadBoxMain" v-if="!itemsAdded">
                 <div class="form-group">
-                    <div class="dropArea" @ondragover="onChange">
-                        Drop multiple files here.
+                    <div class="dropArea" @ondragover="onChange" :class="dragging ? 'dropAreaDragging' : ''" @dragenter="dragging=true" @dragend="dragging=false" @dragleave="dragging=false">
+                        <h3>{{dropAreaPrimaryMessage}}</h3>
                         <input type="file" id="items" name="items[]" required multiple @change="onChange">
-                        <p class="help-block">Space for your instructions</p>
+                        <p class="help-block">{{dropAreaSecondaryMessage}}</p>
                     </div>
                 </div>
             </div>
             <div class="uploadBoxMain" v-else>
-                <p><strong>Names</strong></p>
+                <p><strong>{{fileNameMessage}}</strong></p>
                 <ol>
                     <li v-for="name in itemsNames">{{name}}</li>
                 </ol>
-                <p><strong>Sizes</strong></p>
+                <p><strong>{{fileSizeMessage}}</strong></p>
                 <ol>
                     <li v-for="size in itemsSizes">{{size}}</li>
                 </ol>
-                <p><strong>Total files:</strong> {{itemsAdded}}</p>
-                <p><strong>Total upload size:</strong> {{itemsTotalSize}}</p>
-                <button @click="removeItems">Remove files</button>
-                <!-- Loader -->
+                <p><strong>{{totalFileMessage}}</strong> {{itemsAdded}}</p>
+                <p><strong>{{totalUploadSizeMessage}}</strong> {{itemsTotalSize}}</p>
+                <button @click="removeItems">{{removeFileMessage}}</button>
                 <div class="loader" v-if="isLoaderVisible">
                     <div class="loaderImg"></div>
                 </div>
-                <!-- End Loader -->
             </div>
             <div>
                 <button type="submit" class="btn btn-primary btn-black btn-round" :disabled="itemsAdded < minItems || itemsAdded > maxItems">
-                    Upload</button>
-                <button type="button" class="btn btn-default btn-round" @click="removeItems">Cancel</button>
+                    {{uploadButtonMessage}}
+                </button>
+                <button type="button" class="btn btn-default btn-round" @click="removeItems">{{cancelButtonMessage}}</button>
             </div>
             <br>
             <div class="successMsg" v-if="successMsg !== ''">{{successMsg}}</div>
-            <div class="errorMsg" v-if="errorMsg !== ''">An error has occurred:<br>{{errorMsg}}</div>
-            <div class="errorMsg" v-if="itemsAdded && itemsAdded < minItems">Minimum {{minItems}} files need to be added to uploader. Please remove the files and try again.</div>
-            <div class="errorMsg" v-if="itemsAdded && itemsAdded > maxItems">A maximum of {{maxItems}} files can be uploaded each time. Please remove the files and try again.</div>
+            <div class="errorMsg" v-if="errorMsg !== ''">{{fileUploadErrorMessage}}:<br>{{errorMsg}} <br>{{retryErrorMessage}}</div>
+            <div class="errorMsg" v-if="itemsAdded && itemsAdded < minItems">{{minFilesErrorMessage}}: {{minItems}}.  <br>{{retryErrorMessage}} </div>
+            <div class="errorMsg" v-if="itemsAdded && itemsAdded > maxItems">{{maxFilesErrorMessage}}: {{maxItems}}.  <br>{{retryErrorMessage}}</div>
         </form>
     </div>
 </template>
@@ -70,13 +69,85 @@ export default {
             type: [String, Array, Object],
             default: ''
         },
+        postData: {
+            type: [Object],
+            default: () => {}
+        },
+        postHeader:{
+          type: [Object],
+          default: () => {}
+        },
         successMessagePath: {
             type: String,
             required: true
         },
         errorMessagePath: {
             type: String,
             required: true
+        },
+        headerMessage: {
+          type: String,
+          default: 'Add files'
+        },
+        dropAreaPrimaryMessage: {
+          type: String,
+          default: 'Drop multiple files here'
+        },
+        dropAreaSecondaryMessage: {
+          type: String,
+          default: 'or click to upload'
+        },
+        fileNameMessage: {
+          type: String,
+          default: 'Names'
+        },
+        fileSizeMessage: {
+          type: String,
+          default: 'Sizes'
+        },
+        totalFileMessage: {
+          type: String,
+          default: 'Total files:'
+        },
+        totalUploadSizeMessage: {
+          type: String,
+          default: 'Total upload size:'
+        },
+        removeFileMessage: {
+          type: String,
+          default: 'Remove files'
+        },
+        uploadButtonMessage: {
+          type: String,
+          default: 'Upload'
+        },
+        cancelButtonMessage: {
+          type: String,
+          default: 'Cancel'
+        },
+        fileUploadErrorMessage: {
+          type: String,
+          default: 'An error has occurred'
+        },
+        minFilesErrorMessage: {
+          type: String,
+          default: 'Minimum files that need to be added to uploader'
+        },
+        maxFilesErrorMessage:  {
+          type: String,
+          default: 'Maximum files that can be added to uploader'
+        },
+        retryErrorMessage: {
+          type: String,
+          default: 'Please remove the files and try again.'
+        },
+        httpMethodErrorMessage: {
+          type: String,
+          default: "This HTTP method is not allowed. Please use either 'put' or 'post' methods."
+        },
+        showHttpMessages: {
+          type: Boolean,
+          default: true
         }
     },
 
@@ -85,6 +156,7 @@ export default {
      */
     data() {
         return {
+            dragging: false,
             items: [],
             itemsAdded: '',
             itemsNames: [],
@@ -132,6 +204,7 @@ export default {
             this.itemsNames = [];
             this.itemsSizes = [];
             this.itemsTotalSize = '';
+            this.dragging = false;
         },
 
         onSubmit() {
@@ -141,22 +214,31 @@ export default {
                 (typeof this.postMeta === 'object' && Object.keys(this.postMeta).length > 0)) {
                 this.formData.append('postMeta', this.postMeta);
             }
+            
+            if(typeof this.postData ==='object' && this.postData !== null && Object.keys(this.postData).length > 0){
+              for(var key in this.postData){
+                this.formData.append(key, this.postData[key]);
+              }
+            }
 
             if (this.method === 'put' || this.method === 'post' ) {
-                axios({method: this.method, url: this.postURL, data: this.formData})
+                axios({method: this.method, url: this.postURL, data: this.formData,headers:this.postHeader})
                     .then((response) => {
                         this.isLoaderVisible = false;
                         // Show success message
-                        this.successMsg = response + "." + this.successMessagePath;
+                        if(this.showHttpMessages)
+                          this.successMsg = response + "." + this.successMessagePath;
                         this.removeItems();
                     })
                     .catch((error) => {
                         this.isLoaderVisible = false;
-                        this.errorMsg = error + "." + this.errorMessagePath;
+                        if(this.showHttpMessages)
+                          this.errorMsg = error + "." + this.errorMessagePath;
                         this.removeItems();
                     });
             } else {
-                this.errorMsg = "This HTTP method is not allowed. Please use either 'put' or 'post' methods.";
+                if(this.showHttpMessages)
+                this.errorMsg = this.httpMethodErrorMessage;
                 this.removeItems();
             }
         },
@@ -249,4 +331,3 @@ export default {
     color: #3c763d;
 }
 </style>
-