Refactor code

README.md

@@ -35,13 +35,16 @@ Before you begin, make sure you have the following software installed:
 
 - Node.js: [https://nodejs.org/](https://nodejs.org/)
 - Vue CLI: [https://cli.vuejs.org/](https://cli.vuejs.org/)
+```
+> npm install -D sass
+```
 
 ### Installation
 
 To use this library, you can install it via npm:
 
 ```
-npm install file-upload-frontend
+> npm install file-upload-frontend
 ```
 
 Make sure to check the library's documentation for any additional setup or configuration steps.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopassoftware/file-upload-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Show the preview of file and manage files data to upload",
   "main": "src/main.ts",
   "repository": {

src/components/SingleFile.vue

@@ -113,7 +113,7 @@ export default {
       }
     },
     uploadingFunction() {
-      this.$emit('file', this.file.previewUrl)
+      this.$emit('file', this.file)
       this.$emit('uploading', true)
       this.flag = 1
     },
@@ -158,9 +158,10 @@ export default {
         }
       }
       this.file.previewName = file.name
+      reader.onerror = (error) => {
+        console.error(`Error reading file ${file.name}: ${error}`)
+      }
       reader.readAsDataURL(file)
-
-      this.$emit('file', file)
     },
     handleDragOver(event: any) {
       if (this.isUploading) {

src/examples/LongSquareView.vue

@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import placeHolderImage from '../assets/images/placeholder.png'
+import placeHolderImage from '../assets/images/placeholder.png' // add placeholder image on this location or you can update file path
 
 export default {
   name: 'IndexView',
@@ -108,25 +108,28 @@ export default {
       placeHolderImage,
       received: {} as Object,
       receivedArray: [],
+      // it's a required thing to pass in component
       isSingleFileUploading: false,
       isMultipleFileUploading: false
     }
   },
   methods: {
     receiveFile(file: any) {
-      this.received = file
+      this.received = file // here you will get the file from preview
     },
     receiveFilesArray(array: []) {
-      this.receivedArray = array
+      this.receivedArray = array // here you will get all the files from preview
     },
     singleFileUploadingStatus(isUploading: any) {
       this.isSingleFileUploading = isUploading
+      // remove setTimeout and add your uploading logic here, when you successfully uploaded all the files, update the value of isUploading = false
       setTimeout(() => {
         this.isSingleFileUploading = !isUploading
       }, 5000)
     },
     multipleFileUploadingStatus(isUploading: any) {
       this.isMultipleFileUploading = isUploading
+      // remove setTimeout and add your uploading logic here, when you successfully uploaded all the files, update the value of isUploading = false
       setTimeout(() => {
         this.isMultipleFileUploading = !isUploading
       }, 5000)

src/examples/RoundView.vue

@@ -111,7 +111,7 @@
 </template>
 
 <script lang="ts">
-import placeHolderImage from '../assets/images/placeholder.png'
+import placeHolderImage from '../assets/images/placeholder.png'  // add placeholder image on this location or you can update file path
 
 export default {
   name: 'IndexView',
@@ -120,25 +120,28 @@ export default {
       placeHolderImage,
       received: {} as Object,
       receivedArray: [],
+      // it's a required thing to pass in component
       isSingleFileUploading: false,
       isMultipleFileUploading: false
     }
   },
   methods: {
     receiveFile(file: any) {
-      this.received = file
+      this.received = file // here you will get the file from preview
     },
     receiveFilesArray(array: []) {
-      this.receivedArray = array
+      this.receivedArray = array // here you will get all the files from preview
     },
     singleFileUploadingStatus(isUploading: any) {
       this.isSingleFileUploading = isUploading
+      // remove setTimeout and add your uploading logic here, when you successfully uploaded all the files, update the value of isUploading = false
       setTimeout(() => {
         this.isSingleFileUploading = !isUploading
       }, 5000)
     },
     multipleFileUploadingStatus(isUploading: any) {
       this.isMultipleFileUploading = isUploading
+      // remove setTimeout and add your uploading logic here, when you successfully uploaded all the files, update the value of isUploading = false
       setTimeout(() => {
         this.isMultipleFileUploading = !isUploading
       }, 5000)

src/examples/SquareView.vue

@@ -111,7 +111,7 @@
 </template>
 
 <script lang="ts">
-import placeHolderImage from '../assets/images/placeholder.png'
+import placeHolderImage from '../assets/images/placeholder.png'  // add placeholder image on this location or you can update file path
 
 export default {
   name: 'IndexView',
@@ -120,25 +120,28 @@ export default {
       placeHolderImage,
       received: {} as Object,
       receivedArray: [],
+      // it's a required thing to pass in component
       isSingleFileUploading: false,
       isMultipleFileUploading: false
     }
   },
   methods: {
     receiveFile(file: any) {
-      this.received = file
+      this.received = file // here you will get the file from preview
     },
     receiveFilesArray(array: []) {
-      this.receivedArray = array
+      this.receivedArray = array // here you will get all the files from preview
     },
     singleFileUploadingStatus(isUploading: any) {
       this.isSingleFileUploading = isUploading
+      // remove setTimeout and add your uploading logic here, when you successfully uploaded all the files, update the value of isUploading = false
       setTimeout(() => {
         this.isSingleFileUploading = !isUploading
       }, 5000)
     },
     multipleFileUploadingStatus(isUploading: any) {
       this.isMultipleFileUploading = isUploading
+      // remove setTimeout and add your uploading logic here, when you successfully uploaded all the files, update the value of isUploading = false
       setTimeout(() => {
         this.isMultipleFileUploading = !isUploading
       }, 5000)