anteikudevs-file-upload

File Upload Plugin by anteikudevs

FileUpload
Explore the docs »

View Demo · Report Bug · Request Feature

About The Project

Plugins that might be useful for a developer -- I think this is it.

Here's why:

• Your time should be focused on creating something amazing. A project that solves a problem and helps others
• You shouldn't be doing the same tasks over and over like creating a README from scratch
• You should implement DRY principles to the rest of your life 😄

Of course, no one plugin will serve all projects since your needs may be different. So I'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks to all the people have contributed to expanding this plugin!

Use the README.md to get started.

Built With

this plugin is made using:

Getting Started

This plugin is specifically used in html not framework and is made to make it easier for users.

Installation and Usage

This is how to install and use this plugin.

Install from git

1. Clone the repo

   git clone https://github.com/AnteikuDevs/file-uploads.git

2. Load css

   <link rel="stylesheet" href="./file-upload/file-upload.min.css"/>

3. Load script

   <script src="./jquery.min.js"></script>
   <script src="./file-upload/file-upload.min.js"></script>

4. Use plugin

   let FileData = new FileUpload('#selector');

5. Use Config

   // while there are only a few custom config
   {
        accept: [ // not required
            "*",// default
            // other extension support
            "mp3"
            "wav"
            "mp4"
            "mkv"
            "gif"
            "jpg"
            "jpeg"
            "png"
            "webp"
            "svg"
            "xlsx"
            "xls"
            "csv"
            "pdf"
            "docx"
            "doc"
            "ppt"
            "pptx"
        ],
        // optional value
        maxSize: 5,// not required
        maxFile: 10,// not required, on MB
        lang: 'en',// no required, default en value is en and id only
        customs: { // not required, for the custom color
            primary: '#FF5900',
            secondary: '#FFF1EA',
            background: '#fff'
        }
    }

6. Get result data

   // get all data attribute
   FileData.getValue()
   /*
      result: [
         {
            data:"data:image/png;base64,...", // base64 data
            fileType: "image", // type of file
            id: "__fQQeANSCgBuDP", // id generated
            name: "anteikudevs.png", // filename
            size: 258.71, // file size
            type: "image/png" // type of file format
         }
      ]
   */
   
   // get all data base64 only
   FileData.getValue(base64Only = true)
   
   /*
      result: [
         "data:image/png;base64,...",
         "data:image/jpg;base64,...",
      ]
   */

7. Set current data

   FileData.setValue([
      {
         id: 1,
         data: 'https://../image.jpg'
      }
   ])

8. Clear data

   // delete all uploaded files or preview files on set value
   FileData.clearValue()

9. Get deleted data from setValue()

   // this will generate the data id that has been set previously
   FileData.deletedIds
   /*
      result: [
         1,
         2,
      ]
   */

Install from npm

1. Install from npm

   npm install anteikudevs-file-upload

2. Use plugin

   let FileData = new FileUpload('#selector');

3. Use Config

   // while there are only a few custom config
   {
        accept: [ // not required
            "*",// default
            // other extension support
            "mp3"
            "wav"
            "mp4"
            "mkv"
            "gif"
            "jpg"
            "jpeg"
            "png"
            "webp"
            "svg"
            "xlsx"
            "xls"
            "csv"
            "pdf"
            "docx"
            "doc"
            "ppt"
            "pptx"
        ],
        // optional value
        maxSize: 5,// not required
        maxFile: 10,// not required, on MB
        lang: 'en',// no required, default en value is en and id only
        customs: { // not required, for the custom color
            primary: '#FF5900',
            secondary: '#FFF1EA',
            background: '#fff'
        }
    }

4. Get result data

   // get all data attribute
   FileData.getValue()
   /*
      result: [
         {
            data:"data:image/png;base64,...", // base64 data
            fileType: "image", // type of file
            id: "__fQQeANSCgBuDP", // id generated
            name: "anteikudevs.png", // filename
            size: 258.71, // file size
            type: "image/png" // type of file format
         }
      ]
   */
   
   // get all data base64 only
   FileData.getValue(base64Only = true)
   
   /*
      result: [
         "data:image/png;base64,...",
         "data:image/jpg;base64,...",
      ]
   */

5. Set current data

   FileData.setValue([
      {
         id: 1,
         data: 'https://../image.jpg'
      }
   ])

6. Clear data

   // delete all uploaded files or preview files on set value
   FileData.clearValue()

7. Get deleted data from setValue()

   // this will generate the data id that has been set previously
   FileData.deletedIds
   /*
      result: [
         1,
         2,
      ]
   */

Roadmap

• [x] Add README.md
• [x] Upload Files
• [x] Upgrade Version

See the open issues for a full list of proposed features (and known issues).

Contact

Teguh Sugiarto - @teguhdevs
AnteikuDevs - @anteikudevs

Project Link: https://github.com/AnteikuDevs/file-uploads