@cocreate/file 1.14.2 → 1.15.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.15.0](https://github.com/CoCreate-app/CoCreate-file/compare/v1.14.2...v1.15.0) (2024-02-05)
+
+
+### Bug Fixes
+
+* Removed https://cdn.cocreate.app/latest/CoCreate.min.css ([e0ae28d](https://github.com/CoCreate-app/CoCreate-file/commit/e0ae28de52a02ee58947093f6dad3dd9dfee93e8))
+* renderValue ([4e3308a](https://github.com/CoCreate-app/CoCreate-file/commit/4e3308a157ee2257bc1eb603ddc1484b5579cac8))
+* typo renderValue condition ([65ba50f](https://github.com/CoCreate-app/CoCreate-file/commit/65ba50fe6a84e02bad033f423d39a0ab22fdb766))
+
+
+### Features
+
+* setValue() ([44d4012](https://github.com/CoCreate-app/CoCreate-file/commit/44d40127823d7ccdf8286943b435eeff939e6e2f))
+
 ## [1.14.2](https://github.com/CoCreate-app/CoCreate-file/compare/v1.14.1...v1.14.2) (2024-01-17)
 
 

package/demo/index.html

@@ -32,10 +32,26 @@
             <button actions="upload">upload</button>
         </form>
 
+        <div
+            type="file"
+            array="test"
+            object=""
+            key="image"
+            accept="image/*"
+            placeholder="Upload Image or Video Thumbnail"
+            class="floating-label min-height:40px active"
+            render-selector="[template]"
+            active>
+            <div template>
+                <img src="{{image.src}}" alt="image" width="100%" />
+            </div>
+        </div>
+
         <form>
             <input
                 type="file"
                 directory
+                realtime="false"
                 render-selector="document; [template]" />
 
             <button actions="saveLocally">saveLocally</button>

package/docs/index.html

@@ -21,11 +21,6 @@
             property="og:image"
             content="https://cdn.cocreate.app/docs/file.png" />
 
-        <!-- CoCreate CSS -->
-        <link
-            rel="stylesheet"
-            href="https://cdn.cocreate.app/latest/CoCreate.min.css"
-            type="text/css" />
         <link
             rel="stylesheet"
             href="../index.css"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/file",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "description": "A headless file uploader that uses HTML5 attributes for customization. Allows easy upload of files to server.",
   "keywords": [
     "file",

package/src/client.js

@@ -26,7 +26,7 @@ import Observer from '@cocreate/observer';
 import Crud from '@cocreate/crud-client';
 import Elements from '@cocreate/elements';
 import Actions from '@cocreate/actions';
-import render from '@cocreate/render';
+import { render } from '@cocreate/render';
 import { queryElements } from '@cocreate/utils';
 import '@cocreate/element-prototype';
 
@@ -42,38 +42,67 @@ const Files = new Map();
  *      - If a single element is provided, it initializes that element (assuming it is of type "file").
  *      - If an array of elements is provided, each element in the array is initialized.
  */
-function init(elements) {
+async function init(elements) {
     if (!elements)
         elements = document.querySelectorAll('[type="file"]')
     else if (!Array.isArray(elements))
         elements = [elements]
     for (let i = 0; i < elements.length; i++) {
-        if (elements[i].tagName !== 'INPUT') {
-            // TODO: create input and append to div if input dos not exist
-            // check if input exist
-            let input = document.createElement("input");
-            input.type = "file";
-            input.setAttribute('hidden', '')
-            elements[i].appendChild(input);
+        let nestedInput, isInput = elements[i].tagName === 'INPUT'
+        if (!isInput) {
+            nestedInput = elements[i].querySelector('input[type="file"]')
         }
 
         elements[i].getValue = async () => await getFiles([elements[i]])
         elements[i].getFiles = async () => await getFiles([elements[i]])
+        elements[i].setValue = (files) => setFiles(elements[i], files);
+        elements[i].renderValue = (files) => setFiles(elements[i], files);
 
-        // elements[i].setValue = (value) => pickr.setColor(value);
+        // if (elements[i].renderValue) {
+        //     let data = await elements[i].getValue()
+        //     if (data)
+        //         elements[i].setValue(data)
+        // }
 
         if (elements[i].hasAttribute('directory')) {
-            if (window.showDirectoryPicker)
+            if (!isInput && window.showDirectoryPicker)
                 elements[i].addEventListener("click", fileEvent);
             else if ('webkitdirectory' in elements[i]) {
                 elements[i].webkitdirectory = true
-                elements[i].addEventListener("change", fileEvent)
+                if (!isInput && !nestedInput) {
+                    nestedInput = document.createElement("input");
+                    nestedInput.type = "file";
+                    nestedInput.setAttribute('hidden', '')
+                    elements[i].appendChild(nestedInput);
+                }
+
+                if (nestedInput) {
+                    elements[i].addEventListener("click", function () {
+                        nestedInput.click()
+                    });
+                    nestedInput.addEventListener("change", fileEvent);
+                } else
+                    elements[i].addEventListener("change", fileEvent);
             } else
                 console.error("Directory selection not supported in this browser.");
-        } else if (window.showOpenFilePicker)
+        } else if (!isInput && window.showOpenFilePicker)
             elements[i].addEventListener("click", fileEvent);
-        else
-            elements[i].addEventListener("change", fileEvent);
+        else {
+            if (!isInput && !nestedInput) {
+                nestedInput = document.createElement("input");
+                nestedInput.type = "file";
+                nestedInput.setAttribute('hidden', '')
+                elements[i].appendChild(nestedInput);
+            }
+
+            if (nestedInput) {
+                elements[i].addEventListener("click", function () {
+                    nestedInput.click()
+                });
+                nestedInput.addEventListener("change", fileEvent);
+            } else
+                elements[i].addEventListener("change", fileEvent);
+        }
     }
 }
 
@@ -82,7 +111,7 @@ async function fileEvent(event) {
         const input = event.target;
         let selected = inputs.get(input) || new Map()
         let files = input.files;
-        if (!files.length) {
+        if (!files || !files.length) {
             event.preventDefault()
             const multiple = input.multiple
             if (input.hasAttribute('directory')) {
@@ -120,7 +149,7 @@ async function fileEvent(event) {
             }
 
             if (!files[i].src)
-                files[i] = await readFile(files[i])
+                await readFile(files[i])
 
             files[i].directory = handle.directory || '/'
             files[i].path = handle.path || '/'
@@ -140,15 +169,14 @@ async function fileEvent(event) {
             inputs.set(input, selected);
             console.log("Files selected:", selected);
 
-            if (!input.renderValue)
-                input.renderValue(selected.values())
+            if (input.renderValue)
+                input.renderValue(Array.from(selected.values()))
 
             const isImport = input.getAttribute('import')
             const isRealtime = input.getAttribute('realtime')
             if (isRealtime !== 'false' && (isImport || isImport == "")) {
                 Import(input)
             }
-
         }
     } catch (error) {
         if (error.name !== 'AbortError') {
@@ -201,9 +229,9 @@ async function getFiles(fileInputs) {
     for (let input of fileInputs) {
         const selected = inputs.get(input)
         if (selected) {
-            for (let file of selected.values()) {
+            for (let file of Array.from(selected.values())) {
                 if (!file.src)
-                    file = await readFile(file)
+                    await readFile(file)
 
                 file = await getCustomData({ ...file })
                 files.push(file)
@@ -214,7 +242,6 @@ async function getFiles(fileInputs) {
     return files
 }
 
-// gets file custom data
 async function getCustomData(file) {
     let form = document.querySelector(`[file_id="${file.id}"]`);
     if (form) {
@@ -226,10 +253,12 @@ async function getCustomData(file) {
             }
         }
     }
+
+    delete file.input;
+
     return file;
 }
 
-
 // This function reads the file and returns its src
 function readFile(file) {
     return new Promise((resolve) => {
@@ -244,7 +273,7 @@ function readFile(file) {
         } else if (['mp4', 'avi', 'mov', 'mpeg', 'flv'].includes(fileType[1])
             || fileType[0] === 'video') {
             readAs = 'readAsDataURL';
-        } if (['mp3', 'wav', 'wma', 'aac', 'ogg'].includes(fileType[1])
+        } else if (['mp3', 'wav', 'wma', 'aac', 'ogg'].includes(fileType[1])
             || fileType[0] === 'audio') { // updated condition
             readAs = 'readAsDataURL';
         } else if (fileType[1] === 'pdf') {
@@ -269,6 +298,24 @@ function readFile(file) {
     });
 }
 
+function setFiles(element, files) {
+    if (!files) return
+    if (!Array.isArray(files))
+        files = [files]
+    else if (!files.length)
+        return
+
+    let selected = inputs.get(element) || new Map()
+    for (let i = 0; i < files.length; i++) {
+        files[i].input = element
+        selected.set(files[i].id, files[i])
+        Files.set(files[i].id, files[i])
+    }
+    inputs.set(element, selected);
+    if (element.renderValue)
+        render({ source: element, data: Array.from(selected.values()) })
+}
+
 async function save(element, action, data) {
     try {
         if (!data)