Skip to content

Latest commit

 

History

History
100 lines (74 loc) · 2.72 KB

README.md

File metadata and controls

100 lines (74 loc) · 2.72 KB

JSFileHandler

================

Install Using NPM

npm i jsfilehandler

Usage

Example With An Upload Button

<head>
    <script>
      // Code must be inside an async function
        async function UploadFile() {

            // HTML Input Element that will upload files
            const fileUploaderElement = document.querySelector("#myFileInput");

            // Instantiates a new JSFileHandler object and pass the HTML Element that contains the file attached
            const jsFileHandler= new JSFileHandler(fileUploaderElement);

            // Generates a file object example below:
            /*  { FileName : String, FileType: String, 
                FileContent: Byte[], FileExtension: String, 
                FileSize : String, LastModifiedDate: String}
                */
            const fileObject = await jsFileHandler.GenerateFileObject();

        }
    </script>
</head>
<body>
    <input type="file" id="myFileInput">
    <button type="button" onclick="UploadFile();">Upload</button>
</body>

Example With No Upload Button

<head>
    <script>
      // Code must be inside an async function
        async function UploadFile(htmlElement) {

            // Instantiates a new JSFileHandler object and pass the HTML Element that contains the file attached
            const jsFileHandler = new JSFileHandler(htmlElement);

            // Generates a file object
            const fileObject = await jsFileHandler.GenerateFileObject();

        }
    </script>
</head>
<body>
    <input type="file" id="myFileInput" onchange="UploadFile(this)">
</body>

Example Of Generated File Object

The most important property would be the FileContent which is a byte[] that could be stored in the Database as varbinary.

image

Other Functions

DownloadFile() SaveToSessionStorage() GetFromSessionStorage() SaveToLocalStorage() GetFromLocalStorage()

    
<script>
    const jsFileHandler = new JSFileHandler(htmlElement);
    
    // Downloading a file is simple just pass in the FileCotent ByteArray and FileTyppe.
    jsFileHandler.DownloadFile({
        FileContent: someByteArrayVar,
        FileType: "image/png"
    });
    
    // Or ideally pass in the object created by the GenerateFileObject function
    const fileObject = await jsFileHandler.GenerateFileObject();
    jsFileHandler.DownloadFile(fileObject);
    
    // You can save the file object to session storage like in the example below
    jsFileHandler.SaveToSessionStorage("thisIsMyKey", fileObject)
    
    // Session Storage retrieval
     const myNewFileObject = jsFileHandler.GetFromSessionStorage("thisIsMyKey");
    
</script>