@cocreate/file 1.16.0 → 1.17.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.17.1](https://github.com/CoCreate-app/CoCreate-file/compare/v1.17.0...v1.17.1) (2024-04-26)
+
+
+### Bug Fixes
+
+* condition to check input.ProcessFIle exists ([478d652](https://github.com/CoCreate-app/CoCreate-file/commit/478d65274f52ac8c0de9341ee5ca1766e0542f7f))
+* getFiles returns files as is without conversion ([ad57ce3](https://github.com/CoCreate-app/CoCreate-file/commit/ad57ce3895c4246268b49b192d69e2bae09cf0c7))
+* method set to static object.update ([27dbf8e](https://github.com/CoCreate-app/CoCreate-file/commit/27dbf8e717a4bc5ffd5c2f6a6bae28e081e8a7b2))
+* replaced keyword spaces with hyphens and lowercase letters only ([77f9d89](https://github.com/CoCreate-app/CoCreate-file/commit/77f9d896ded45e1341d58faa6973d58198a4e308))
+
+# [1.17.0](https://github.com/CoCreate-app/CoCreate-file/compare/v1.16.0...v1.17.0) (2024-03-18)
+
+
+### Bug Fixes
+
+* descriptions ([fe2cffc](https://github.com/CoCreate-app/CoCreate-file/commit/fe2cffc731ba9ffecbe6c5768ae43e242d9dea92))
+
+
+### Features
+
+* handle mediaSegmentation, define path ([4c8e478](https://github.com/CoCreate-app/CoCreate-file/commit/4c8e478bf7ff6a382c18bfbe7af60886af9e0d9e))
+
 # [1.16.0](https://github.com/CoCreate-app/CoCreate-file/compare/v1.15.2...v1.16.0) (2024-02-16)
 
 

package/README.md

@@ -1,14 +1,21 @@
 # CoCreate-file
 
-This is a configurable headless file uploader that utilizes HTML5 attributes for easy customization. With this module, users can easily upload files to a server without requiring a formal UI or browser interaction. By leveraging HTML5 attributes, it's easy to customize and fine-tune the behavior of the uploader to fit specific needs. This uploader is perfect for developers looking to implement file uploads in a headless environment. Take it for a spin in our [playground!](https://cocreate.app/docs/file)
+CoCreate-file is an advanced, configurable headless file uploader designed for comprehensive file management capabilities without a traditional user interface. Accessible via a JavaScript API and HTML5 attributes, it offers unparalleled flexibility in handling file operations on both local and server environments. Take it for a spin in our [playground!](https://cocreate.app/docs/file)
 
 ![minified](https://img.badgesize.io/https://cdn.cocreate.app/file/latest/CoCreate-file.min.js?style=flat-square&label=minified&color=orange)
 ![gzip](https://img.badgesize.io/https://cdn.cocreate.app/file/latest/CoCreate-file.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
 ![brotli](https://img.badgesize.io/https://cdn.cocreate.app/file/latest/CoCreate-file.min.js?compression=brotli&style=flat-square&label=brotli)
-![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-action?style=flat-square)
-![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-action?style=flat-square)
+![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-file?style=flat-square)
+![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-file?style=flat-square)
 ![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet)
 
+## Key Features
+
+-   **JavaScript API & HTML5 Customization**: Easily manage file uploads and operations through a powerful JavaScript API or by utilizing HTML5 attributes for easy integration and customization.
+-   **Local & Server File Operations**: Supports reading, writing, and uploading files both locally and to the server, catering to a wide range of application needs.
+-   **Graceful Fallbacks**: Implements graceful fallbacks to the standard HTML5 file input API, ensuring compatibility and functionality across different browsers and environments.
+-   **Headless File Management**: Designed for use in headless applications or scenarios where a UI is not required or desired, providing a clean, efficient backend solution for file management.
+
 ![CoCreate-file](https://cdn.cocreate.app/docs/CoCreate-file.gif)
 
 ## [Docs & Demo](https://cocreate.app/docs/file)

package/demo/index.html

@@ -18,7 +18,7 @@
         </form>
 
         <form>
-            <input type="file" />
+            <input type="file" path="/assets/test" />
             <button actions="upload">upload</button>
         </form>
 

package/demo/video-segmenting.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Video Segmenting | CoCreateJS</title>
+
+        <!-- CoCreate Favicon -->
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="../assets/favicon.ico" />
+        <link rel="manifest" href="/manifest.webmanifest" />
+    </head>
+    <body>
+        <input id="fileInput" type="file" accept="video/mp4" />
+
+        <script src="./video-segmenting.js"></script>
+        <!-- <script src="../dist/CoCreate-file.js"></script> -->
+        <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
+        <!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
+    </body>
+</html>

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@cocreate/file",
-  "version": "1.16.0",
-  "description": "A headless file uploader that uses HTML5 attributes for customization. Allows easy upload of files to server.",
+  "version": "1.17.1",
+  "description": "A versatile, configurable headless file uploader supporting both local and server file operations. Accessible via a JavaScript API and HTML5 attributes, it offers seamless file reading, writing, and uploading capabilities with graceful fallbacks to the standard HTML5 file input API. Ideal for developers requiring robust file management in headless or UI-less environments.",
   "keywords": [
-    "file",
+    "file-uploader",
+    "headless",
+    "html5-attributes",
+    "server-upload",
+    "customizable-uploader",
+    "file-upload-api",
+    "no-ui-upload",
+    "background-file-upload",
+    "programmatic-file-upload",
+    "headless-file-management",
     "cocreate",
     "low-code-framework",
-    "no-code-framework",
     "cocreatejs",
     "cocreatejs-component",
     "cocreate-framework",
-    "no-code",
     "low-code",
-    "collaborative-framework",
     "realtime",
     "realtime-framework",
-    "collaboration",
     "shared-editing",
     "html5-framework",
     "javascript-framework"

package/src/client.js

@@ -150,6 +150,11 @@ async function fileEvent(event) {
 
             if (!files[i].src)
                 await readFile(files[i])
+            // if (!files[i].src)
+            //     files[i].src = files[i]
+
+            // if (!files[i].src.name)
+            //     files[i].src = files[i]
 
             if (!files[i].size)
                 files[i].size = handle.size
@@ -173,7 +178,7 @@ async function fileEvent(event) {
             console.log("Files selected:", selected);
 
             if (input.renderValue)
-                input.renderValue(Array.from(selected.values()))
+                input.renderValue(Array.from(selected.values()));
 
             const isImport = input.getAttribute('import')
             const isRealtime = input.getAttribute('realtime')
@@ -226,7 +231,7 @@ async function getFileId(file) {
     }
 }
 
-async function getFiles(fileInputs) {
+async function getFiles(fileInputs, readAs) {
     const files = [];
 
     if (!Array.isArray(fileInputs))
@@ -236,8 +241,13 @@ async function getFiles(fileInputs) {
         const selected = inputs.get(input)
         if (selected) {
             for (let file of Array.from(selected.values())) {
-                if (!file.src)
-                    await readFile(file)
+                if (!file.src) {
+                    // if (readAs === 'blob')
+                    file.src = file
+                    // else
+                    //     await readFile(file, readAs)
+                }
+
                 let fileObject = { ...file }
                 fileObject.size = file.size
                 await getCustomData(fileObject)
@@ -251,6 +261,7 @@ async function getFiles(fileInputs) {
 }
 
 async function getCustomData(file) {
+    // TODO: Consider potential replacment of file_id, perhaps supporting selector  
     let form = document.querySelector(`[file_id="${file.id}"]`);
     if (form) {
         let elements = form.querySelectorAll('[file]');
@@ -268,13 +279,15 @@ async function getCustomData(file) {
 }
 
 // This function reads the file and returns its src
-function readFile(file) {
+function readFile(file, readAs) {
     return new Promise((resolve) => {
         const fileType = file.type.split('/');
-        let readAs;
 
         if (fileType[1] === 'directory') {
             return resolve(file)
+        } else if (readAs) {
+            if (readAs === 'blob')
+                return resolve(file)
         } else if (fileType[0] === 'image') {
             readAs = 'readAsDataURL';
         } else if (fileType[0] === 'video') {
@@ -321,6 +334,7 @@ function setFiles(element, files) {
         render({ source: element, data: Array.from(selected.values()) })
 }
 
+// TODO: Could this benifit from media processing to save results locally
 async function save(element, action, data) {
     try {
         if (!data)
@@ -410,48 +424,211 @@ async function upload(element, data) {
         element = [element]
 
     for (let i = 0; i < element.length; i++) {
-        const inputs = []
+        const fileInputs = []
         if (element[i].type === 'file')
-            inputs.push(element[i])
+            fileInputs.push(element[i])
         else if (element[i].tagName === 'form') {
-            let fileInputs = element[i].querySelectorAll('input[type="file"]')
-            inputs.push(...fileInputs)
+            fileInputs.push(...element[i].querySelectorAll('input[type="file"]'))
         } else {
             const form = element[i].closest('form')
             if (form)
-                inputs.push(...form.querySelectorAll('input[type="file"]'))
+                fileInputs.push(...form.querySelectorAll('input[type="file"]'))
         }
 
-        for (let input of inputs) {
+        for (let input of fileInputs) {
             let Data = Elements.getObject(input);
-            if (Data.type) {
-                if (input.getFilter)
-                    Data.$filter = await input.getFilter()
+            let object = input.getAttribute('object') || ''
+            let key = input.getAttribute('key')
+
+            Data.broadcastBrowser = false
+            Data.method = 'object.update'
+            if (!Data.array)
+                Data.array = 'files'
+
+            let path = input.getAttribute('path')
+            let directory = '/'
+
+            if (path) {
+                directory = path.split('/');
+                directory = directory[directory.length - 1];
+                if (!path.endsWith('/'))
+                    path += '/'
+            } else
+                path = directory = '/'
 
-                let files = await getFiles(input)
+            if (!Data.host)
+                Data.host = ['*']
 
-                let key = getAttribute('key')
-                if (Data.type === 'key')
-                    Data.type = 'object'
+            if (!Data.public)
+                Data.public = true
 
-                let object = input.getAttribute('object')
-                if (key) {
-                    Data[Data.type] = { _id: object, [key]: files }
-                } else {
-                    Data[Data.type] = files
+            if (input.getFilter) {
+                Data.$filter = await input.getFilter()
+                if (!Data.$filter.query)
+                    Data.$filter.query = {}
+            } else
+                Data.$filter = {
+                    query: {}
                 }
 
-                Data.method = Data.type + '.update'
-                let response = await Crud.send(Data)({
-                    array,
-                    object,
-                    upsert: true
-                });
 
-                data.push(response)
-                if (response && (!object || object !== response.object)) {
-                    Elements.setTypeValue(element, response);
+            // let files = await getFiles(input, 'blob')
+            let files
+            const selected = inputs.get(input)
+            if (selected) {
+                files = Array.from(selected.values())
+            }
+
+            let segmentSize = 10 * 1024 * 1024
+            for (let i = 0; i < files.length; i++) {
+                files[i].path = path
+                files[i].pathname = path + files[i].name
+                files[i].directory = directory
+
+                // let fileObject = { ...file }
+                // fileObject.size = file.size
+                // await getCustomData(fileObject)
+
+
+                if (input.processFile && files[i].size > segmentSize) {
+                    // let test = await input.processFile(files[i], null, segmentSize, null, null, null, input);
+                    let { playlist, segments } = await input.processFile(files[i], null, segmentSize);
+
+                    // Create a video element
+                    const videoElement = document.createElement('video');
+                    videoElement.setAttribute('controls', ''); // Add controls so you can play/pause
+                    videoElement.style.width = '100%';
+                    document.body.appendChild(videoElement);
+
+                    const mediaSource = new MediaSource();
+                    videoElement.src = URL.createObjectURL(mediaSource);
+
+                    mediaSource.addEventListener('sourceopen', () => {
+                        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
+
+                        sourceBuffer.addEventListener('updateend', () => {
+                            console.log('Append operation completed.');
+                            try {
+                                console.log('Buffered ranges:', sourceBuffer.buffered);
+                                // Append next segment here if applicable                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
+                            } catch (e) {
+                                console.error('Error accessing buffered property:', e);
+                            }
+                        });
+
+                        function appendSegment(index) {
+                            if (index >= segments.length) {
+                                console.log('All segments have been appended.');
+                                return;
+                            }
+
+                            if (!sourceBuffer.updating) {
+                                segments[index].src.arrayBuffer().then(arrayBuffer => {
+                                    console.log(`Appending segment ${index}`);
+                                    sourceBuffer.appendBuffer(arrayBuffer);
+                                    // Next segment will be appended on 'updateend' event
+                                }).catch(error => {
+                                    console.error(`Error reading segment[${index}] as ArrayBuffer:`, error);
+                                });
+                            }
+                        }
+
+                        // Append the first segment to start
+                        appendSegmfent(0);
+                    });
+
+
+                    // mediaSource.addEventListener('sourceopen', () => {
+                    //     const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"'); // avc1.4D401E, avc1.4D401F, avc1.4D4028, avc1.4D4020, avc1.4D4029, avc1.4D402A
+
+                    //     // Append the first segment to start
+                    //     if (!sourceBuffer.updating) {
+
+                    //         segments[0].src.arrayBuffer().then(arrayBuffer => {
+                    //             sourceBuffer.appendBuffer(arrayBuffer);
+
+                    //             // Wait for 3 seconds before logging the sourceBuffer state
+                    //             setTimeout(() => {
+                    //                 console.log(sourceBuffer);
+                    //             }, 3000); // 3000 milliseconds = 3 seconds
+
+                    //             sourceBuffer.addEventListener('updateend', () => {
+                    //                 console.log('Append operation completed.');
+                    //                 try {
+                    //                     console.log('Buffered ranges:', sourceBuffer.buffered);
+                    //                 } catch (e) {
+                    //                     console.error('Error accessing buffered property:', e);
+                    //                 }
+                    //                 // Proceed with additional operations here
+                    //             });
+
+                    //         }).catch(error => {
+                    //             console.error('Error reading segment[0] as ArrayBuffer:', error);
+                    //         });
+
+
+                    //         // segments[0].src.arrayBuffer().then(arrayBuffer => {
+                    //         //     sourceBuffer.appendBuffer(arrayBuffer);
+                    //         // })
+
+                    //         // let segmentLength = 0
+                    //         // sourceBuffer.addEventListener('updateend', () => {
+                    //         //     segmentLength += 1
+                    //         //     if (segments[segmentLength])
+                    //         //         segments[segmentLength].src.arrayBuffer().then(arrayBuffer => {
+                    //         //             console.log(sourceBuffer)
+                    //         //             // sourceBuffer.appendBuffer(arrayBuffer);
+                    //         //         })
+                    //         // });
+                    //     }
+                    // });
+
                 }
+
+                // files[i].src = playlist
+                // for (let j = 0; j < segments.length; j++) {
+                //     segments[j].path = path
+                //     segments[j].pathname = path + segments[j].name
+                //     segments[j].directory = directory
+                //     segments[j] = { ...segments[j], ...await readFile(segments[j].src) }
+                //     segments[j].public = true
+                //     segments[j].host = ['*']
+
+                //     playlist.segments[j].src = segments[j].pathname
+                //     Data.$filter.query.pathname = segments[j].pathname
+                //     Crud.send({
+                //         ...Data,
+                //         object: segments[j],
+                //         upsert: true
+                //     });
+                // }
+
+                // } else {
+                //     files[i] = { ...files[i], ...await readFile(files[i].src) }
+                // }
+
+                // if (!key) {
+                //     Data.object = { ...files[i] }
+                // } else {
+                //     Data.object = { [key]: { ...files[i] } }
+                // }
+
+                // if (object) {
+                //     Data.object._id = object // test
+                // }
+
+                // delete Data.object.input
+                // Data.$filter.query.pathname = files[i].pathname
+                // let response = await Crud.send({
+                //     ...Data,
+                //     upsert: true
+                // });
+
+                // console.log(response, 'tes')
+                // if (response && (!object || object !== response.object)) {
+                //     Elements.setTypeValue(element, response);
+                // }
+
             }
         }
 
@@ -515,6 +692,7 @@ async function Import(element, data) {
 
         if (data.length) {
             for (let i = 0; i < data.length; i++) {
+                // TODO: if _id exist use update method
                 data[i].method = data[i].type + '.create'
                 data[i] = await Crud.send(data[i])
             }