File Upload Plugin by anteikudevs
FileUpload
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
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.
this plugin is made using:
This plugin is specifically used in html not framework and is made to make it easier for users.
This is how to install and use this plugin.
-
Clone the repo
git clone https://github.com/AnteikuDevs/file-uploads.git
-
Load css
<link rel="stylesheet" href="./file-upload/file-upload.min.css"/>
-
Load script
<script src="./jquery.min.js"></script> <script src="./file-upload/file-upload.min.js"></script>
-
Use plugin
let FileData = new FileUpload('#selector');
-
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' } }
-
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,...", ] */
-
Set current data
FileData.setValue([ { id: 1, data: 'https://../image.jpg' } ])
-
Clear data
// delete all uploaded files or preview files on set value FileData.clearValue()
-
Get deleted data from setValue()
// this will generate the data id that has been set previously FileData.deletedIds /* result: [ 1, 2, ] */
-
Install from npm
npm install anteikudevs-file-upload
-
Use plugin
let FileData = new FileUpload('#selector');
-
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' } }
-
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,...", ] */
-
Set current data
FileData.setValue([ { id: 1, data: 'https://../image.jpg' } ])
-
Clear data
// delete all uploaded files or preview files on set value FileData.clearValue()
-
Get deleted data from setValue()
// this will generate the data id that has been set previously FileData.deletedIds /* result: [ 1, 2, ] */
- Add README.md
- Upload Files
- Upgrade Version
See the open issues for a full list of proposed features (and known issues).
Teguh Sugiarto - @teguhdevs
AnteikuDevs - @anteikudevs
Project Link: https://github.com/AnteikuDevs/file-uploads