Flex Uploader is a simple file uploader component with a flexible design. It allows users to upload images easily. This README provides an overview of the HTML structure and how to initialize the uploader using JavaScript.
-
Include the necessary CSS and JavaScript files in your HTML document:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex Uploader</title> <style> body { margin: 0; padding: 1rem; font-family: sans-serif; } </style> <link rel="stylesheet" href="/dist/css/flex-uploader.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"> </head> <body> <!-- Your HTML content here --> <script src="/dist/js/flex-uploader.js"></script> <script> // init uploader new FlexUploader("drop-area", "input-file", "img-view"); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
-
Add the following HTML structure for the file uploader:
<p>Example:</p> <label for="input-file" id="drop-area" class="drop-area"> <input type="file" name="image" id="input-file" accept="image/*" hidden> <div id="img-view" class="img-view"> <img src="../dist/images/gallery-export.svg" id="img" width="50"> <p id="img-info">Choose Image To Upload</p> </div> </label>
-
Include the following HTML snippet for reference in your documentation:
<p>HTML:</p> <pre><code class="html"><label for="input-file" id="change-this-drop-area" class="drop-area"> <input type="file" name="image" id="change-this-input-file" accept="image/*" hidden> <div id="change-this-img-view" class="img-view"> <img src="../dist/images/gallery-export.svg" id="img" width="50"> <p id="img-info">Choose Image To Upload</p> </div> </label></code></pre>
-
Initialize the Flex Uploader in your JavaScript:
<p>JS:</p> <pre><code class="js">new FlexUploader("drop-area", "input-file", "img-view");</code></pre>
This project is licensed under the MIT License.