MN-File Upload jQuery Plugin

Author : mahmoud-nb
Last update : 02-06-2017
Last version : 1.1

MN-File Upload is a jquery plugin that allows you to customize your HTML file inputs by using HTML and CSS classes. The plugin also allows you to preview the loaded images and fire your custom code before or after file loaded.

1. Fast and Lightweight (~1K)
2. Easy to use and integrate into any Website
3. Easy to personalize style by applying a consistent style to your theme
4. preview of uploaded images
5. Many options to customize by your needs

• jQuery Library

Supported jQuery versions

• jQuery >= 1.9
• jQuery = 2.x
• jQuery = 3.x

Include necessary JS and CSS files

The only dependency required is jQuery.

<script src='JS_DIR/jquery-1.9.min.js' ></script>

add included js and css files to your project

<script src="JS_DIR/jquery.mn-file.js" ></script>

<link rel="stylesheet" href="CSS_DIR/jquery.mn-file.css" >

HTML

Replace your input FileUpload

<input type="file" name="inputName"  />

by the flowing HTML code

<div class="customFile" data-controlMsg="Choose a file">
  <span class="selectedFile">No file selected</span>
  <input type="file" name="inputName"  />
</div>

call the plugin with your custom options

<script>
  $(function() {
    $("[type=file]").mnFileInput({
      display: "left",
      noFileSelectedMsg: "No file selected",
      afterChange: function(){
        // your code
      }
    }});
  });
</script>

display

Default Value : left

Define the display mode of input FileUpload
'left' : upload button is on the left side
'right' : upload button is on the right side
'button' : Show button only

controlMsg

Default Value : 'Choose a file'

Define the value of upload button

noFileSelectedMsg

Default Value : 'No file selected'

To display the name of the loaded file or if no file is selected

beforeChange 'function'

Function called before file uploaded

afterChange 'function'

Function called after file uploaded

afterPreview 'function'

function called after preview image loaded

        <div class="customFile">
          <span class="selectedFile">No file selected</span>
          <input type="file" name="inputName"  />
        </div>

        <script>
        // Javascript
        $(function() {
          /* This is basic - uses default settings */
          $("[type=file]").mnFileInput();
        });</script>

  <div class="customFile" data-controlMsg="Browse">
    <span class="selectedFile">jpg, png and gif</span>
    <input type="file" name="inputName"  />
  </div>




  <script>
  // Javascript
  $(function() {
    $("[type=file]").mnFileInput();
  });</script>

  <div class="customFile" >
    <span class="selectedFile"></span>
    <input type="file" name="inputName"  />
  </div>

  <script>
  // Javascript
  $(function() {
    $("[type=file]").mnFileInput({
      controlMsg : "Browse",
      noFileSelectedMsg : "jpg, png and gif"
    });
  });</script>

        <div class="customFile" data-display="right" data-controlMsg="Choose a file">
          <span class="selectedFile">No file selected</span>
          <input type="file" name="inputName"  />
        </div>

        <script>
        // Javascript
        $(function() {
          $("[type=file]").mnFileInput();
        });</script>

width preview

You just need to set the selector of an image to use for the preview

        <div class="customFile" data-controlMsg="Choose a file">
          <span class="selectedFile">No file selected</span>
          <input type="file" name="inputName" class="widthPreview" />
        </div>
        ...
        <div class="previewContainer">
          <img class="preview" src="" alt="Image preview..." />
        </div>

        <script>
        // Javascript
        $(function() {
          /* This is basic - uses default settings */
          $(".widthPreview").mnFileInput({
            'preview': '.preview'
          });
        });</script>

No file selected

Callbacks

        <div class="customFile" data-controlMsg="Choose a file">
          <span class="selectedFile">No file selected</span>
          <input type="file" name="inputName" class="widthCallback" />
        </div>

        <div class="previewContainer">
          <img class="preview2" src="" alt="Image preview..." />
        </div>

        <script>
        // Javascript
        $(function() {
          /* This is basic - uses default settings */
          $(".widthCallback").mnFileInput({
            'preview': '.preview2',
            'beforeChange' : function(e){
              alert('beforeChange');
              $('.preview2').hide();
            },
            'afterChange' : function(e){
              alert('afterChange:' + e.target.value);
            },
            afterPreview: function(e){
              console.log('afterPreview');
              $('.preview2').fadeIn(3000);
            }
          });
        });</script>

No file selected

You can add your own CSS to customize the colors, fonts, and sizes of your file fields

• jQuery https://jquery.com/
• JavaScript code prettifier https://github.com/google/code-prettify
• Bootstrap http://getbootstrap.com/

• Improve documentation
• Comment the source code
• Remove unnecessary code

• Initial release