Skip to content

jUpload is a jQuery package for managing files. Dynamically add and remove files before upload. Custom file validation

Notifications You must be signed in to change notification settings

Kristi47/j_upload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 

Repository files navigation

j_upload

jUpload is a jQuery package for managing files. Dynamically add and remove files before upload. Custom file validation.

Installation

Use the package manager npm to install j_upload.

npm install j_upload

Include the script from the node_modules to your html file.
Or download the j_upload.js file directly from git and include it.

Basic Usage

Call j_upload() on the form selector to initialize it.

$("#form-id").j_upload()

Chain it with submit() function of jQuery to handle form submission

$("#form-id").j_upload().submit(function(event){
    ...
});

Custom Usage

j_upload function takes an Object as argument. Full Object example below:

 $("#form-id").j_upload({
            message_element: "ul",
            message_element_item: "li",
            preview_element: "ul",
            preview_element_item: "li",
            remove_link_label: "Remove",
            remove_link_style: "j_remove_link",
            enable_validation:true,
            validation:{
                photos:{
                    file_size:5,
                    file_type:['.pdf', '.txt'],
                    file_count: 3
                },
                videos:{
                    file_size:25,
                    file_type:[]
                },
                image:{
                    file_size:3,
                    file_count:50
                },
                product:{
                    file_size:2,
                    file_type:[],
                    file_count:15
                }
            }
        }).submit(function(event){
            ...
        })
  • message_element - define html tag that will contain file validation error messages
 message_element: "ul"
 message_element: "div"
  • message_element_item - define html tag that will contain a single file validation error message
 message_element: "li"
 message_element: "span"
  • preview_element - define html tag that will contain multiple files preview, (name, extension, size)
 preview_element: "ul"
  • preview_element_item - define html tag for a single file preview
 preview_element_item: "li"
  • remove_link_label - define label for removing file (ex: X or 'Remove', tag)
 remove_link_label: "X"
 remove_link_label: "Remove"
 remove_link_label: "<img src='remove_icon.png'/>"
  • remove_link_style - define the css class for removing link
  • enable_validation - enables default file validation (default: false)
    • file_size: 2MB (default) - max size for single file
    • file_type: [] (default) - empty array allows all type of file, define types ['.txt', '.pdf']
    • file_count: 5 (default) - max number of files for multiple file input
 enable_validation: true
  • validation - nested object to define custom validation for different input files, use input name to define custom validation rules for specific element
photos:{
    file_size:5,
    file_type:['.pdf', '.txt'],
    file_count: 3
},
videos:{
    file_size:25,
    file_type:[]
}
  • photos - is the name of html input element
  • videos - is the name of html input element

Functions

  • j_prepareFormData() - return a FormData Object which will be used in HTTP Request, See example below.
  • j_isValid() - returns a boolean to indicate if the form has passed the validation rules.
$("#form-id").j_upload({
     enable_validation:true
}).submit(function(event){
    event.preventDefault();
    
    var formData = j_prepareFormData(this);
    
    if(!j_isValid()){
        console.log("Form is not valid");
        return;
    }
    
    $.ajax({
       ...
    });
});

Contributing

Pull requests are welcome. Please open an issue first to discuss what you would like to change.

License

MIT

About

jUpload is a jQuery package for managing files. Dynamically add and remove files before upload. Custom file validation

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published