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

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.

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){
 ...
});

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

• 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({
 ...
 });
});

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

MIT