Image uploader is a lightweight JavaScript plugin that simplifies the process of uploading images in your website. It provides a responsive, customizable interface with clear visual feedback for image uploading tasks.

This plugin supports various image file types such as jpg, png, webp, jpeg, and jfif, and includes options for controlling the maximum file size. It is an easy-to-use, accessible, and highly configurable tool for handling image uploads.

There are two ways to use the plugin, to add html structure to your web page or let the plugin generate it.

To add the image uploader plugin into your project, you will need to include CSS and JS files that are situated in the JS/Plugins/Image-Uploader and CSS/Plugins/Image-Uploader directories.

Make sure that "null-components" CSS file is included in your project to ensure the proper styling of the image uploader.

Plugin options:

id (String): The ID of the image uploader. (This is required for both HTML structure and generateHTML option)

allowedExtensions (Array of Strings): Specifies the file types that are allowed to be uploaded.

size (Number): The maximum file size (in megabytes) that can be uploaded.

generateHTML (Object): A set of options for generating the HTML structure of the uploader.

The generateHTML object can have the following properties:

container (HTMLElement): The DOM node where the uploader HTML should be appended.

fileName (String): The name attribute for the file input.

imageSource (String): The URL of the initial image to be displayed.

chooseFile (Boolean): Whether to display the "Choose a file" button.

Example 1 : Using HTML structure:

<!--image uploader -->

    <div class="null-image-uploader-container null-padding-20 null-box-shadow null-border-radius" id="image"> <!-- unique id -->

        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10 null-cursor-pointer"
            for="null-default-image-input">
            Image :
        </label><!--End null-color-main-->

        <div class="null-image-uploader null-cursor-pointer null-background-white null-display-flex null-align-items-center null-justify-content-center null-position-relative">

            <div class="null-image-container null-display-flex null-align-items-center null-justify-content-center">

                <img data-null-image-uploader="null-image" id="null-image" src=""> <!-- initial image -->

            </div><!--End null-image-container-->


            <div class="null-image-icon-container">

                <div class="null-color-main null-flex">

                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="80px" width="80px"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z">
                        </path>
                    </svg>

                </div><!--End null-color-main-->

                <div>No file chosen, yet!</div>

            </div><!--End null-image-icon-container-->


        </div><!--End null-image-uploader-->

        <div id="null-image-name" class="null-margin-top-10 null-margin-bottom-10">
            <span>Image Name:</span>
            <span data-null-image-uploader="null-image-check" class="null-font-size-13">No image uploaded</span>
        </div><!-- End null-image-name -->

        <input id="null-default-image-input" type="file" name="image" hidden />

        <a data-null-image-uploader="null-custom-image-button" 
            class="null-flex null-background-main null-color-white null-cursor-pointer null-font-size-16 null-border-radius">
            Choose a file 
        </a><!--End null-custom-image-button-->


    </div><!--End null-image-uploader-container-->

<!--image uploader -->

const uploader = new NullImageUploader('image', {
    allowedExtensions: ["jpg", "png"],
    size: 3 // in Mb
}
);

Example 2: You can remove choose file button from HTML structure:

<!--image uploader -->

<div class="null-box-shadow null-border-radius">

    <div class="null-image-uploader-container null-padding-20 null-box-shadow null-border-radius" id="image"> <!-- unique id -->

        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10 null-cursor-pointer"
            for="null-default-image-input">
            Image :
        </label><!--End null-color-main-->

        <div class="null-image-uploader null-cursor-pointer null-background-white null-display-flex null-align-items-center null-justify-content-center null-position-relative">

            <div class="null-image-container null-display-flex null-align-items-center null-justify-content-center">

                <img data-null-image-uploader="null-image" id="null-image" src=""> <!-- initial image -->

            </div><!--End null-image-container-->


            <div class="null-image-icon-container">

                <div class="null-color-main null-flex">

                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="80px" width="80px"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z">
                        </path>
                    </svg>

                </div><!--End null-color-main-->

                <div>No file chosen, yet!</div>

            </div><!--End null-image-icon-container-->


        </div><!--End null-image-uploader-->

        <div id="null-image-name" class="null-margin-top-10 null-margin-bottom-10">
            <span>Image Name:</span>
            <span data-null-image-uploader="null-image-check" class="null-font-size-13">No image uploaded</span>
        </div><!-- End null-image-name -->

        <input id="null-default-image-input" type="file" name="image" hidden />

    </div><!--End null-image-uploader-container-->


</div><!--End null-box-shadow -->

<!--image uploader -->

const uploader = new NullImageUploader('image', {
    allowedExtensions: ["jpg", "png", "webp", "jpeg", "jfif"],
    size: 3 // in Mb
}
);

Example 3: Add initial image using HTML structure:

<!--image uploader -->

    <div class="null-image-uploader-container null-padding-20 null-box-shadow null-border-radius" id="image"> <!-- unique id -->

        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10 null-cursor-pointer"
            for="null-default-image-input">
            Image :
        </label><!--End null-color-main-->

        <div class="null-image-uploader null-cursor-pointer null-background-white null-display-flex null-align-items-center null-justify-content-center null-position-relative">

            <div class="null-image-container null-display-flex null-align-items-center null-justify-content-center">

                <img data-null-image-uploader="null-image" id="null-image" src="https://null-js.com/website/images/null-js.webp"> <!-- initial image -->

            </div><!--End null-image-container-->


            <div class="null-image-icon-container">

                <div class="null-color-main null-flex">

                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="80px" width="80px"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z">
                        </path>
                    </svg>

                </div><!--End null-color-main-->

                <div>No file chosen, yet!</div>

            </div><!--End null-image-icon-container-->


        </div><!--End null-image-uploader-->

        <div id="null-image-name" class="null-margin-top-10 null-margin-bottom-10">
            <span>Image Name:</span>
            <span data-null-image-uploader="null-image-check" class="null-font-size-13">No image uploaded</span>
        </div><!-- End null-image-name -->

        <input id="null-default-image-input" type="file" name="image" hidden />

        <a data-null-image-uploader="null-custom-image-button" 
            class="null-flex null-background-main null-color-white null-cursor-pointer null-font-size-16 null-border-radius">
            Choose a file 
        </a><!--End null-custom-image-button-->


    </div><!--End null-image-uploader-container-->

<!--image uploader -->

const uploader = new NullImageUploader('image', {
    allowedExtensions: ["jpg", "png"],
    size: 3 // in Mb
}
);

Example 4: Using generateHTML:

<div id="ImageContainer"></div>

const uploader = new NullImageUploader('image', {
    allowedExtensions: ["jpg", "png", "webp", "jpeg", "jfif"],
    size: 3, // in Mb
    generateHTML: {
        container: document.getElementById("ImageContainer"), // The DOM node where the uploader HTML should be appended.
        fileName: "image", // The name attribute for the file input.
    }
}
);

Example 5: Remove choose file button using generateHTML:

<div id="ImageContainer"></div>

const uploader = new NullImageUploader('image', {
  allowedExtensions: ["jpg", "png", "webp", "jpeg", "jfif"],
  size: 3, // in Mb
  generateHTML: {
    container: document.getElementById("ImageContainer"), // The DOM node where the uploader HTML should be appended.
    fileName: "image", // The name attribute for the file input.
    chooseFile: false, // Whether to display the "Choose a file" button.
  }
}
);

Example 6: Add initial image using generateHTML:

<div id="ImageContainer"></div>

const uploader = new NullImageUploader('image', {
  allowedExtensions: ["jpg", "png", "webp", "jpeg", "jfif"],
  size: 3, // in Mb
  generateHTML: {
    container: document.getElementById("ImageContainer"), // The DOM node where the uploader HTML should be appended.
    fileName: "image", // The name attribute for the file input.
    chooseFile: false, // Whether to display the "Choose a file" button.
    imageSource: "https://null-js.com/website/images/null-js.webp" // The URL of the initial image to be displayed.
  }
}
);