@cocreate/file - npm Package Compare versions

Comparing version 1.17.0 to 1.17.1

CHANGELOG.md

@@ -0,1 +1,11 @@
+## [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)
@@ -2,0 +12,0 @@

package.json

 {
   "name": "@cocreate/file",
-  "version": "1.17.0",
+  "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 uploader",
+    "file-uploader",
     "headless",
-    "HTML5 attributes",
-    "server upload",
-    "customizable uploader",
-    "file upload API",
-    "no UI upload",
-    "background file upload",
-    "programmatic file upload",
-    "headless file management",
+    "html5-attributes",
+    "server-upload",
+    "customizable-uploader",
+    "file-upload-api",
+    "no-ui-upload",
+    "background-file-upload",
+    "programmatic-file-upload",
+    "headless-file-management",
     "cocreate",
@@ -17,0 +17,0 @@ "low-code-framework",

src/client.js

@@ -153,3 +153,8 @@ /********************************************************************************
                 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)
@@ -177,3 +182,3 @@ files[i].size = handle.size
             if (input.renderValue)
-                input.renderValue(Array.from(selected.values()))
+                input.renderValue(Array.from(selected.values()));
 
@@ -231,3 +236,3 @@ const isImport = input.getAttribute('import')
 
-async function getFiles(fileInputs) {
+async function getFiles(fileInputs, readAs) {
     const files = [];
@@ -242,4 +247,9 @@
             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 }
@@ -258,2 +268,3 @@ fileObject.size = file.size
 async function getCustomData(file) {
+    // TODO: Consider potential replacment of file_id, perhaps supporting selector  
     let form = document.querySelector(`[file_id="${file.id}"]`);
@@ -276,9 +287,11 @@ if (form) {
 // 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') {
@@ -330,2 +343,3 @@ readAs = 'readAsDataURL';
 
+// TODO: Could this benifit from media processing to save results locally
 async function save(element, action, data) {
@@ -420,22 +434,21 @@ try {
     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);
-            let key = getAttribute('key')
-            if (Data.type === 'key')
-                Data.type = 'object'
+            let object = input.getAttribute('object') || ''
+            let key = input.getAttribute('key')
 
-            Data.method = Data.type + '.update'
-            if (Data.array)
+            Data.broadcastBrowser = false
+            Data.method = 'object.update'
+            if (!Data.array)
                 Data.array = 'files'
@@ -449,3 +462,3 @@
                 directory = directory[directory.length - 1];
-                if (!path.endswith('/'))
+                if (!path.endsWith('/'))
                     path += '/'
@@ -455,2 +468,8 @@ } else
 
+            if (!Data.host)
+                Data.host = ['*']
+
+            if (!Data.public)
+                Data.public = true
+
             if (input.getFilter) {
@@ -466,46 +485,159 @@ Data.$filter = await input.getFilter()
 
-            let files = await getFiles(input)
+            // 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].pathname = path + files[i].name
                 files[i].directory = directory
 
+                // let fileObject = { ...file }
+                // fileObject.size = file.size
+                // await getCustomData(fileObject)
 
-                if (files[i].size > segmentSize) {
-                    let { streamConfig, segments } = await processFile(files[i], null, segmentSize);
-                    files[i].src = streamConfig
-                    for (let j = 0; j < segments.length; j++) {
-                        segments[j].path = path
-                        segments[j].pathname = path + '/' + segments[j].name
-                        segments[j].directory = directory
 
-                        Data.$filter.query.pathname = segments[j].pathname
-                        Crud.send({
-                            ...Data,
-                            object: segments[j],
-                            upsert: true
+                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);
+                    //         //         })
+                    //         // });
+                    //     }
+                    // });
+
                 }
-            }
 
-            let object = input.getAttribute('object')
-            if (key) {
-                Data[Data.type] = { _id: object, [key]: files }
-            } else {
-                Data[Data.type] = files
-            }
+                // 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 = ['*']
 
-            // Data.$filter.query.pathname = files[i].pathname
+                //     playlist.segments[j].src = segments[j].pathname
+                //     Data.$filter.query.pathname = segments[j].pathname
+                //     Crud.send({
+                //         ...Data,
+                //         object: segments[j],
+                //         upsert: true
+                //     });
+                // }
 
-            let response = await Crud.send({
-                ...Data,
-                upsert: true
-            });
+                // } else {
+                //     files[i] = { ...files[i], ...await readFile(files[i].src) }
+                // }
 
-            data.push(response)
-            if (response && (!object || object !== response.object)) {
-                Elements.setTypeValue(element, response);
+                // 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);
+                // }
+
             }
@@ -574,2 +706,3 @@ }
             for (let i = 0; i < data.length; i++) {
+                // TODO: if _id exist use update method
                 data[i].method = data[i].type + '.create'
@@ -576,0 +709,0 @@ data[i] = await Crud.send(data[i])

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

152147

increased by6.26%

Lines of code

1358

increased by8.55%

No dependency changes