@cocreate/file 1.17.4 → 1.18.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.18.0](https://github.com/CoCreate-app/CoCreate-file/compare/v1.17.5...v1.18.0) (2024-08-24)
+
+
+### Bug Fixes
+
+* handle file.id when setFile() rendering. ([f9a561b](https://github.com/CoCreate-app/CoCreate-file/commit/f9a561b325ae0b8fe964b11d192c09ba2d144e4f))
+
+
+### Features
+
+* import file from url ([c073276](https://github.com/CoCreate-app/CoCreate-file/commit/c073276894009a04fdf59e3bebabbd34bea3f55b))
+
+## [1.17.5](https://github.com/CoCreate-app/CoCreate-file/compare/v1.17.4...v1.17.5) (2024-06-19)
+
+
+### Bug Fixes
+
+* getFileId uses pathname as id ([be330a5](https://github.com/CoCreate-app/CoCreate-file/commit/be330a54324ae878a8afadc68bdae1684e944b45))
+* observer target selector ([50dc031](https://github.com/CoCreate-app/CoCreate-file/commit/50dc0318b7c9c02c2d610fe86158d47e6277e667))
+* replace selected file if multiple false ([d419dc3](https://github.com/CoCreate-app/CoCreate-file/commit/d419dc38f223d1d809bcf014dd2fadb0a629fae7))
+
 ## [1.17.4](https://github.com/CoCreate-app/CoCreate-file/compare/v1.17.3...v1.17.4) (2024-06-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/file",
-  "version": "1.17.4",
+  "version": "1.18.0",
   "description": "A versatile, configurable headless file uploader supporting local and server operations. Accessible via a JavaScript API and HTML5 attributes, it provides seamless file reading, writing, and uploading with fallbacks to the standard HTML5 file input API. Ideal for developers needing robust file management in headless environments.",
   "keywords": [
     "file-uploader",

package/src/client.js

@@ -108,12 +108,21 @@ async function init(elements) {
 
 async function fileEvent(event) {
     try {
-        const input = event.target;
+        const input = event.currentTarget;
+        let multiple = input.multiple
+        if (!multiple) {
+            multiple = input.getAttribute('multiple');
+            if (multiple !== null && multiple !== "false") {
+                multiple = true;
+            } else {
+                multiple = false;
+            }
+        }
+
         let selected = inputs.get(input) || new Map()
         let files = input.files;
         if (!files || !files.length) {
             event.preventDefault()
-            const multiple = input.multiple
             if (input.hasAttribute('directory')) {
                 let handle = await window.showDirectoryPicker();
                 let file = {
@@ -130,6 +139,14 @@ async function fileEvent(event) {
                 }
 
                 file.handle = handle
+
+                if (!multiple) {
+                    for (let [id] of selected) {
+                        Files.delete(id);
+                    }
+                    selected.clear();
+                }
+
                 selected.set(file.id, file)
                 Files.set(file.id, file)
 
@@ -169,6 +186,13 @@ async function fileEvent(event) {
                 console.log('Duplicate file has been selected. This could be in error as the browser does not provide a clear way of checking duplictaes')
             }
 
+            if (!multiple) {
+                for (let [id] of selected) {
+                    Files.delete(id);
+                }
+                selected.clear();
+            }
+
             selected.set(files[i].id, files[i])
             Files.set(files[i].id, files[i])
         }
@@ -220,14 +244,11 @@ async function getDirectoryHandles(handle, name) {
 
 async function getFileId(file) {
 
-    if (file.id = file.path || file.webkitRelativePath) {
+    if (file.id = file.pathname) {
         return file.id;
     } else {
-        const { name, size, type, lastModified } = file;
-        const key = `${name}${size}${type}${lastModified}`;
-
-        file.id = key
-        return key;
+        file.id = `${file.name}${file.size}${file.type}${file.lastModified}`;
+        return file.id;
     }
 }
 
@@ -325,6 +346,8 @@ function setFiles(element, files) {
 
     let selected = inputs.get(element) || new Map()
     for (let i = 0; i < files.length; i++) {
+        if (!files[i].id)
+            files[i].id = files[i].pathname
         files[i].input = element
         selected.set(files[i].id, files[i])
         Files.set(files[i].id, files[i])
@@ -534,7 +557,7 @@ async function upload(element, data) {
                         }
 
                         // Append the first segment to start
-                        appendSegmfent(0);
+                        appendSegment(0);
                     });
 
 
@@ -780,6 +803,58 @@ async function exportFile(data) {
     link.remove();
 }
 
+// TODO: handled by import? if value is a valid url get file by url?
+async function importURL(action) {
+    try {
+        let element = action.element
+        let url = element.getAttribute('url')
+        if (!url) {
+            element = action.form.querySelector('[import-url]')
+            if (!element)
+                return
+            url = element.getValue()
+            if (!url)
+                return
+
+        }
+
+        const urlObject = new URL(url);
+        const filename = urlObject.pathname.split('/').pop();
+
+        const file = {
+            src: url,
+            name: filename,
+            directory: '/',
+            path: '/',
+            pathname: '/' + filename
+        };
+
+        await getCustomData(file)
+
+        let data = await Crud.socket.send({
+            method: 'importUrl',
+            file,
+            broadcast: false,
+            broadcastClient: false
+        })
+
+        let queriedElements = queryElements({ element, prefix: 'import-url' })
+        if (queriedElements) {
+            for (let queriedElement of queriedElements)
+                queriedElement.setValue(data.file)
+
+        }
+
+        document.dispatchEvent(new CustomEvent(action.name, {
+            detail: {}
+        }));
+
+    } catch (error) {
+        console.error('Error importing file from URL:', error);
+        throw error;
+    }
+}
+
 async function fileRenderAction(action) {
     const element = action.element
 
@@ -877,7 +952,7 @@ async function Delete(file) {
 Observer.init({
     name: 'CoCreateFileAddedNodes',
     observe: ['addedNodes'],
-    target: 'input[type="file"]',
+    target: '[type="file"]',
     callback: mutation => init(mutation.target)
 
 });
@@ -886,13 +961,13 @@ Observer.init({
     name: 'CoCreateFileAttributes',
     observe: ['attributes'],
     attributeName: ['type'],
-    target: 'input[type="file"]',
+    target: '[type="file"]',
     callback: mutation => init(mutation.target)
 });
 
 Actions.init([
     {
-        name: ["upload", "download", "saveLocally", "import", "export"],
+        name: ["upload", "download", "saveLocally", "asveAs", "import", "export", "importUrl"],
         callback: (action) => {
             if (action.name === 'upload')
                 upload(action.element)
@@ -902,6 +977,8 @@ Actions.init([
                 Export(action.element)
             } else if (action.name === 'import') {
                 Import(action.element)
+            } else if (action.name === 'importUrl') {
+                importURL(action)
             } else {
                 // Something...
             }

package/src/server.js

@@ -334,7 +334,7 @@ module.exports = async function file(CoCreateConfig, configPath, match) {
         let binary = fs.readFileSync(path);
         let content = new Buffer.from(binary).toString(readType);
 
-        return content
+        return content;
     }
 
     /**