@cocreate/file 1.19.2 → 1.19.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/demo/index.html +67 -67
- package/docs/index.html +336 -330
- package/package.json +8 -12
- package/src/client.js +11 -11
- package/webpack.config.js +64 -83
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
## [1.19.4](https://github.com/CoCreate-app/CoCreate-file/compare/v1.19.3...v1.19.4) (2025-04-30)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* added css-loader ([76ce0e7](https://github.com/CoCreate-app/CoCreate-file/commit/76ce0e743104f515419ef47dddc58c3d39cd8501))
|
|
7
|
+
* update query attributes ([52612c0](https://github.com/CoCreate-app/CoCreate-file/commit/52612c0e7ae552c0225cde2fe16118ef90338ae6))
|
|
8
|
+
* updated cocreate modules versions ([d27f8e8](https://github.com/CoCreate-app/CoCreate-file/commit/d27f8e8c6c82cc6cd0c4d7ef4baf186f81816a2a))
|
|
9
|
+
* webpack.config and devdependencies ([41c2a5a](https://github.com/CoCreate-app/CoCreate-file/commit/41c2a5a250ff4f00da8c0649ee4bae7fa4be56dc))
|
|
10
|
+
|
|
11
|
+
## [1.19.3](https://github.com/CoCreate-app/CoCreate-file/compare/v1.19.2...v1.19.3) (2025-04-11)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* fire action end event on elememt instead of document ([3e78905](https://github.com/CoCreate-app/CoCreate-file/commit/3e789054e65e87c4f988d2041dfe8687684ebff5))
|
|
17
|
+
* update observer observe param to type and and attributeName to attributeFilter ([524a05e](https://github.com/CoCreate-app/CoCreate-file/commit/524a05e0080c4473f28fc9e5bd1414479e313eb7))
|
|
18
|
+
|
|
1
19
|
## [1.19.2](https://github.com/CoCreate-app/CoCreate-file/compare/v1.19.1...v1.19.2) (2025-01-18)
|
|
2
20
|
|
|
3
21
|
|
package/demo/index.html
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>file | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<form>
|
|
16
|
+
<input type="file" import />
|
|
17
|
+
<button actions="import">import</button>
|
|
18
|
+
</form>
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
<form>
|
|
21
|
+
<input type="file" path="/assets/test" />
|
|
22
|
+
<button actions="upload">upload</button>
|
|
23
|
+
</form>
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
<form>
|
|
26
|
+
<input type="file" multiple />
|
|
27
|
+
<button actions="upload">upload</button>
|
|
28
|
+
</form>
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
<form>
|
|
31
|
+
<input type="file" directory />
|
|
32
|
+
<button actions="upload">upload</button>
|
|
33
|
+
</form>
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
35
|
+
<div
|
|
36
|
+
type="file"
|
|
37
|
+
array="test"
|
|
38
|
+
object=""
|
|
39
|
+
key="image"
|
|
40
|
+
accept="image/*"
|
|
41
|
+
placeholder="Upload Image or Video Thumbnail"
|
|
42
|
+
class="floating-label min-height:40px active"
|
|
43
|
+
render-query="[template]"
|
|
44
|
+
active>
|
|
45
|
+
<div template>
|
|
46
|
+
<img src="{{image.src}}" alt="image" width="100%" />
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
<form>
|
|
51
|
+
<input
|
|
52
|
+
type="file"
|
|
53
|
+
directory
|
|
54
|
+
realtime="false"
|
|
55
|
+
render-query="$document [template]" />
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
<button actions="saveLocally">saveLocally</button>
|
|
58
|
+
</form>
|
|
59
59
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
<div template file_id="{{id}}">
|
|
61
|
+
<button actions="createFile" value="tesing.js">createFile</button>
|
|
62
|
+
<button actions="deleteFile">deleteFile</button>
|
|
63
|
+
<button actions="createDirectory">createDirectory</button>
|
|
64
|
+
<button actions="deleteDirectory">deleteDirectory</button>
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
<input file="name" value="{{name}}" />
|
|
67
|
+
<input file="directory" value="{{directory}}" />
|
|
68
|
+
<input file="content-type" value="{{content-type}}" />
|
|
69
|
+
<textarea file="src" value-type="string">{{src}}</textarea>
|
|
70
|
+
<div>id: {{id}}</div>
|
|
71
|
+
</div>
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
<form>
|
|
74
|
+
<button actions="export" array="files">export</button>
|
|
75
|
+
</form>
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
<!-- <script src="../dist/CoCreate-file.js"></script> -->
|
|
78
|
+
<script src="../../../CoCreateJS/dist/CoCreate.js"></script>
|
|
79
|
+
<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
|
|
80
|
+
</body>
|
|
81
81
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -1,345 +1,351 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<meta
|
|
24
|
-
property="og:image"
|
|
25
|
-
content="https://cdn.cocreate.app/docs/file.png"
|
|
26
|
-
/>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>CoCreate-file Documentation | CoCreateJS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/png"
|
|
11
|
+
sizes="32x32"
|
|
12
|
+
href="https://cocreate.app/images/favicon.ico" />
|
|
13
|
+
<meta
|
|
14
|
+
name="description"
|
|
15
|
+
content="A convenient chain handler allows user to chain multiple components together. When one file is complete next one will start untill all file completed." />
|
|
16
|
+
<meta
|
|
17
|
+
name="keywords"
|
|
18
|
+
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
19
|
+
<meta name="robots" content="index,follow" />
|
|
20
|
+
<meta
|
|
21
|
+
property="og:image"
|
|
22
|
+
content="https://cdn.cocreate.app/docs/file.png" />
|
|
27
23
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</head>
|
|
24
|
+
<link
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
href="../index.css"
|
|
27
|
+
array="files"
|
|
28
|
+
object="60888216117c640e7596303f"
|
|
29
|
+
key="src"
|
|
30
|
+
type="text/css"
|
|
31
|
+
save="true" />
|
|
32
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
33
|
+
</head>
|
|
39
34
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
><i src="/assets/svg/github.svg"></i
|
|
126
|
-
></a>
|
|
127
|
-
</div>
|
|
35
|
+
<body>
|
|
36
|
+
<!-- Navbar -->
|
|
37
|
+
<nav
|
|
38
|
+
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
|
|
39
|
+
content_id="content"
|
|
40
|
+
scroll="sticky-nav,"
|
|
41
|
+
scroll-up="5"
|
|
42
|
+
scroll-down="5"
|
|
43
|
+
path="../"
|
|
44
|
+
src="../components/navbar.html"></nav>
|
|
45
|
+
<sidenav
|
|
46
|
+
id="menuL"
|
|
47
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
48
|
+
resizable
|
|
49
|
+
resize-query="[content_id='content']"
|
|
50
|
+
resize-property="margin-left"
|
|
51
|
+
resize-value="width">
|
|
52
|
+
<menu
|
|
53
|
+
array="files"
|
|
54
|
+
object="603717b07de7fb350ae9fec8"
|
|
55
|
+
key="src"></menu>
|
|
56
|
+
<div resize="right"></div>
|
|
57
|
+
</sidenav>
|
|
58
|
+
<main
|
|
59
|
+
class="padding-top:15px padding:15px@lg@xl"
|
|
60
|
+
content_id="content"
|
|
61
|
+
id="cocreate-file">
|
|
62
|
+
<div
|
|
63
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
|
|
64
|
+
<div class="display:flex align-items:center">
|
|
65
|
+
<h2>CoCreate-file</h2>
|
|
66
|
+
</div>
|
|
67
|
+
<div
|
|
68
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
|
|
69
|
+
<div
|
|
70
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
71
|
+
share-network="true"
|
|
72
|
+
share-text="A convenient chain handler allows user to chain multiple components together. When one file is complete next one will start untill all file completed."
|
|
73
|
+
share-title="CoCreate file"
|
|
74
|
+
share-height="600"
|
|
75
|
+
share-width="700"
|
|
76
|
+
share-media="https://cdn.cocreate.app/docs/file.png"
|
|
77
|
+
hover="display:block!important"
|
|
78
|
+
hover-query=".social-networks">
|
|
79
|
+
<div class="display:none social-networks">
|
|
80
|
+
<a
|
|
81
|
+
class="margin-right:15px"
|
|
82
|
+
share-network="twitter"
|
|
83
|
+
title="Share on twitter"
|
|
84
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
85
|
+
></a>
|
|
86
|
+
<a
|
|
87
|
+
class="margin-right:15px"
|
|
88
|
+
share-network="facebook"
|
|
89
|
+
title="Share on Facebook"
|
|
90
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
91
|
+
></a>
|
|
92
|
+
<a
|
|
93
|
+
class="margin-right:15px"
|
|
94
|
+
share-network="instagram"
|
|
95
|
+
title="Share on instagram"
|
|
96
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
97
|
+
></a>
|
|
98
|
+
</div>
|
|
99
|
+
<a
|
|
100
|
+
class="margin-right:15px"
|
|
101
|
+
share-network="share"
|
|
102
|
+
title="Share on share"
|
|
103
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
104
|
+
></a>
|
|
105
|
+
</div>
|
|
106
|
+
<a
|
|
107
|
+
class="margin-right:15px"
|
|
108
|
+
share-network="share"
|
|
109
|
+
title="Share on share"
|
|
110
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
111
|
+
></a>
|
|
112
|
+
</div>
|
|
113
|
+
<a
|
|
114
|
+
href="https://github.com/CoCreate-app/CoCreate-file"
|
|
115
|
+
target="_blank"
|
|
116
|
+
class=""
|
|
117
|
+
><i src="/assets/svg/github.svg"></i
|
|
118
|
+
></a>
|
|
119
|
+
</div>
|
|
128
120
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
</div>
|
|
121
|
+
<h1
|
|
122
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
|
|
123
|
+
A convenient chain handler allows user to chain multiple
|
|
124
|
+
CoCreate components together. When one file is complete next one
|
|
125
|
+
will start. The sequence goes untill all file completed.
|
|
126
|
+
Grounded on Vanilla javascript, easily configured using HTML5
|
|
127
|
+
attributes and/or JavaScript API.
|
|
128
|
+
</h1>
|
|
129
|
+
<div id="file-section" class="display:flex flex-wrap:wrap">
|
|
130
|
+
<div
|
|
131
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
|
|
132
|
+
<div
|
|
133
|
+
id="file-install"
|
|
134
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
135
|
+
scroll
|
|
136
|
+
scroll-intersect="color:dodgerblue"
|
|
137
|
+
scroll-query="#file-install-section">
|
|
138
|
+
<span
|
|
139
|
+
class="display:flex align-items:center width:fit-content"
|
|
140
|
+
hover="display:block!important"
|
|
141
|
+
hover-query="[href='#file-install']">
|
|
142
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
143
|
+
<a
|
|
144
|
+
class="margin-left:10px display:none"
|
|
145
|
+
href="#file-install"
|
|
146
|
+
><i src="/assets/svg/link.svg"></i
|
|
147
|
+
></a>
|
|
148
|
+
</span>
|
|
149
|
+
</div>
|
|
159
150
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
151
|
+
<pre><code class="language-bash">npm i @cocreate/file</code></pre>
|
|
152
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
153
|
+
Or you can use cdn link:
|
|
154
|
+
</p>
|
|
155
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/file/latest/CoCreate-file.min.js</script></code></pre>
|
|
165
156
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
157
|
+
<div
|
|
158
|
+
id="file-usage"
|
|
159
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
160
|
+
scroll
|
|
161
|
+
scroll-intersect="color:dodgerblue"
|
|
162
|
+
scroll-query="#file-usage-section">
|
|
163
|
+
<span
|
|
164
|
+
class="display:flex align-items:center width:fit-content"
|
|
165
|
+
hover="display:block!important"
|
|
166
|
+
hover-query="[href='#file-usage']">
|
|
167
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
168
|
+
<a
|
|
169
|
+
class="margin-left:10px display:none"
|
|
170
|
+
href="#file-usage"
|
|
171
|
+
><i src="/assets/svg/link.svg"></i
|
|
172
|
+
></a>
|
|
173
|
+
</span>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="">
|
|
176
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
177
|
+
This is file usage
|
|
178
|
+
</p>
|
|
186
179
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
180
|
+
<div class="flex-grow:1 min-width:300px width:100%">
|
|
181
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
182
|
+
</div>
|
|
183
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
184
|
+
This is file usage
|
|
185
|
+
</p>
|
|
186
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
187
|
+
This is file usage
|
|
188
|
+
</p>
|
|
189
|
+
</div>
|
|
193
190
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
191
|
+
<div
|
|
192
|
+
id="file-attributes"
|
|
193
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
194
|
+
scroll
|
|
195
|
+
scroll-intersect="color:dodgerblue"
|
|
196
|
+
scroll-query="#file-attributes-section">
|
|
197
|
+
<span
|
|
198
|
+
class="display:flex align-items:center width:fit-content"
|
|
199
|
+
hover="display:block!important"
|
|
200
|
+
hover-query="[href='#file-attributes']">
|
|
201
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
202
|
+
<a
|
|
203
|
+
class="margin-left:10px display:none"
|
|
204
|
+
href="#file-attributes"
|
|
205
|
+
><i src="/assets/svg/link.svg"></i
|
|
206
|
+
></a>
|
|
207
|
+
</span>
|
|
208
|
+
</div>
|
|
212
209
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
210
|
+
<ul class="list-style-type:none">
|
|
211
|
+
<li
|
|
212
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
213
|
+
<h4>
|
|
214
|
+
<span>file</span>
|
|
215
|
+
<span class="cocreate-badge success"
|
|
216
|
+
>string</span
|
|
217
|
+
>
|
|
218
|
+
<span class="cocreate-badge warning"
|
|
219
|
+
>optional</span
|
|
220
|
+
>
|
|
221
|
+
</h4>
|
|
222
|
+
<p>file-attribute</p>
|
|
223
|
+
</li>
|
|
224
|
+
<li
|
|
225
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
226
|
+
<h4>
|
|
227
|
+
<span>file</span>
|
|
228
|
+
<span class="cocreate-badge success"
|
|
229
|
+
>string</span
|
|
230
|
+
>
|
|
231
|
+
<span class="cocreate-badge warning"
|
|
232
|
+
>optional</span
|
|
233
|
+
>
|
|
234
|
+
</h4>
|
|
235
|
+
<p>file-attribute</p>
|
|
236
|
+
</li>
|
|
237
|
+
</ul>
|
|
238
|
+
</div>
|
|
232
239
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
</div>
|
|
240
|
+
<div
|
|
241
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
|
|
242
|
+
<!-- SandBox -->
|
|
243
|
+
<div
|
|
244
|
+
id="file-demo"
|
|
245
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
246
|
+
scroll
|
|
247
|
+
scroll-intersect="color:dodgerblue"
|
|
248
|
+
scroll-query="#file-demo-section">
|
|
249
|
+
<span
|
|
250
|
+
class="display:flex align-items:center width:fit-content"
|
|
251
|
+
hover="display:block!important"
|
|
252
|
+
hover-query="[href='#file-demo']">
|
|
253
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
254
|
+
<a
|
|
255
|
+
class="margin-left:10px display:none"
|
|
256
|
+
href="#file-demo"
|
|
257
|
+
><i src="/assets/svg/link.svg"></i
|
|
258
|
+
></a>
|
|
259
|
+
</span>
|
|
260
|
+
</div>
|
|
255
261
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
262
|
+
<div
|
|
263
|
+
class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
264
|
+
<!-- SandBox -->
|
|
265
|
+
<div
|
|
266
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
267
|
+
id="playground">
|
|
268
|
+
<div
|
|
269
|
+
id="demo-code"
|
|
270
|
+
resizable
|
|
271
|
+
class="position:relative height:50%">
|
|
272
|
+
<textarea
|
|
273
|
+
type="code"
|
|
274
|
+
lang="html"
|
|
275
|
+
array="demos"
|
|
276
|
+
object=""
|
|
277
|
+
key="demo"
|
|
278
|
+
save="false"
|
|
279
|
+
id="demo"
|
|
280
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
281
|
+
<div
|
|
282
|
+
resize="bottom"
|
|
283
|
+
class="background:lightgrey"></div>
|
|
284
|
+
</div>
|
|
279
285
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
</div>
|
|
286
|
+
<div
|
|
287
|
+
id="demo-preview"
|
|
288
|
+
class="position:relative overflow:auto background-color:white">
|
|
289
|
+
<div class="demopreview padding:20px"></div>
|
|
290
|
+
</div>
|
|
286
291
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
292
|
+
<div
|
|
293
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
|
|
294
|
+
<a
|
|
295
|
+
class="margin-right:10px"
|
|
296
|
+
id="eye"
|
|
297
|
+
show="#eye-slash"
|
|
298
|
+
hide="#eye, #demo-preview"
|
|
299
|
+
toggle="code-height"
|
|
300
|
+
toggle-query="#demo-code"
|
|
301
|
+
><i
|
|
302
|
+
class="height:18px"
|
|
303
|
+
src="/assets/svg/eye.svg"></i
|
|
304
|
+
></a>
|
|
305
|
+
<a
|
|
306
|
+
class="margin-right:10px"
|
|
307
|
+
hidden
|
|
308
|
+
id="eye-slash"
|
|
309
|
+
show="#eye, #demo-preview"
|
|
310
|
+
hide="#eye-slash"
|
|
311
|
+
toggle="code-height"
|
|
312
|
+
toggle-query="#demo-code"
|
|
313
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
314
|
+
></a>
|
|
315
|
+
<a
|
|
316
|
+
class="margin-right:10px"
|
|
317
|
+
id="code"
|
|
318
|
+
show="#code-slash"
|
|
319
|
+
hide="#code, #demo-code"
|
|
320
|
+
><i src="/assets/svg/code.svg"></i
|
|
321
|
+
></a>
|
|
322
|
+
<a
|
|
323
|
+
class="margin-right:10px"
|
|
324
|
+
hidden
|
|
325
|
+
id="code-slash"
|
|
326
|
+
show="#code, #demo-code"
|
|
327
|
+
hide="#code-slash"
|
|
328
|
+
><i
|
|
329
|
+
class="height:18px"
|
|
330
|
+
src="/assets/svg/code.svg"></i
|
|
331
|
+
></a>
|
|
332
|
+
<a
|
|
333
|
+
class="margin-right:5px"
|
|
334
|
+
fullscreen
|
|
335
|
+
fullscreen-query="#playground"></a>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<!-- End SandBox -->
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
<button
|
|
343
|
+
href="https://github.com/CoCreate-app/CoCreate-file/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
344
|
+
target="_blank"
|
|
345
|
+
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
346
|
+
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
347
|
+
</button>
|
|
348
|
+
</main>
|
|
349
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
350
|
+
</body>
|
|
345
351
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/file",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.4",
|
|
4
4
|
"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.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"file-uploader",
|
|
@@ -50,22 +50,18 @@
|
|
|
50
50
|
},
|
|
51
51
|
"main": "./src/index.js",
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"clean-webpack-plugin": "^3.0.0",
|
|
57
|
-
"file-loader": "^6.2.0",
|
|
53
|
+
"css-loader": "^5.1.3",
|
|
54
|
+
"esbuild": "^0.25.2",
|
|
55
|
+
"esbuild-loader": "^4.3.0",
|
|
58
56
|
"mini-css-extract-plugin": "^1.5.0",
|
|
59
|
-
"style-loader": "^3.3.1",
|
|
60
|
-
"terser-webpack-plugin": "^5.1.1",
|
|
61
57
|
"webpack": "^5.24.4",
|
|
62
58
|
"webpack-cli": "^4.5.0",
|
|
63
59
|
"webpack-log": "^3.0.1"
|
|
64
60
|
},
|
|
65
61
|
"dependencies": {
|
|
66
|
-
"@cocreate/actions": "^1.
|
|
67
|
-
"@cocreate/config": "^1.
|
|
68
|
-
"@cocreate/render": "^1.
|
|
69
|
-
"@cocreate/utils": "^1.
|
|
62
|
+
"@cocreate/actions": "^1.21.0",
|
|
63
|
+
"@cocreate/config": "^1.13.0",
|
|
64
|
+
"@cocreate/render": "^1.45.1",
|
|
65
|
+
"@cocreate/utils": "^1.38.0"
|
|
70
66
|
}
|
|
71
67
|
}
|
package/src/client.js
CHANGED
|
@@ -443,7 +443,7 @@ async function save(element, action, data) {
|
|
|
443
443
|
element: element[i],
|
|
444
444
|
prefix: action
|
|
445
445
|
});
|
|
446
|
-
if (queryElements) {
|
|
446
|
+
if (queryElements.length) {
|
|
447
447
|
save(queryElements, action, data);
|
|
448
448
|
}
|
|
449
449
|
}
|
|
@@ -682,7 +682,7 @@ async function upload(element, data) {
|
|
|
682
682
|
element: element[i],
|
|
683
683
|
prefix: "upload"
|
|
684
684
|
});
|
|
685
|
-
if (queriedElements) {
|
|
685
|
+
if (queriedElements.length) {
|
|
686
686
|
upload(queriedElements, data);
|
|
687
687
|
}
|
|
688
688
|
}
|
|
@@ -744,7 +744,7 @@ async function Import(element, data) {
|
|
|
744
744
|
element: element[i],
|
|
745
745
|
prefix: "import"
|
|
746
746
|
});
|
|
747
|
-
if (queriedElements) {
|
|
747
|
+
if (queriedElements.length) {
|
|
748
748
|
Import(queriedElements, data);
|
|
749
749
|
}
|
|
750
750
|
}
|
|
@@ -786,7 +786,7 @@ async function Export(element, data) {
|
|
|
786
786
|
element: element[i],
|
|
787
787
|
prefix: "export"
|
|
788
788
|
});
|
|
789
|
-
if (queriedElements) {
|
|
789
|
+
if (queriedElements.length) {
|
|
790
790
|
Export(queriedElements, data);
|
|
791
791
|
}
|
|
792
792
|
}
|
|
@@ -854,12 +854,12 @@ async function importURL(action) {
|
|
|
854
854
|
});
|
|
855
855
|
|
|
856
856
|
let queriedElements = queryElements({ element, prefix: "import-url" });
|
|
857
|
-
if (queriedElements) {
|
|
857
|
+
if (queriedElements.length) {
|
|
858
858
|
for (let queriedElement of queriedElements)
|
|
859
859
|
queriedElement.setValue(data.file);
|
|
860
860
|
}
|
|
861
861
|
|
|
862
|
-
|
|
862
|
+
action.element.dispatchEvent(
|
|
863
863
|
new CustomEvent(action.name, {
|
|
864
864
|
detail: {}
|
|
865
865
|
})
|
|
@@ -895,7 +895,7 @@ async function fileRenderAction(action) {
|
|
|
895
895
|
create(file, "directory", name);
|
|
896
896
|
} else if (action.name === "deleteDirectory") Delete(file);
|
|
897
897
|
|
|
898
|
-
|
|
898
|
+
action.element.dispatchEvent(
|
|
899
899
|
new CustomEvent(action.name, {
|
|
900
900
|
detail: {}
|
|
901
901
|
})
|
|
@@ -968,15 +968,15 @@ async function Delete(file) {
|
|
|
968
968
|
|
|
969
969
|
Observer.init({
|
|
970
970
|
name: "CoCreateFileAddedNodes",
|
|
971
|
-
|
|
971
|
+
types: ["addedNodes"],
|
|
972
972
|
selector: '[type="file"]',
|
|
973
973
|
callback: (mutation) => init(mutation.target)
|
|
974
974
|
});
|
|
975
975
|
|
|
976
976
|
Observer.init({
|
|
977
977
|
name: "CoCreateFileAttributes",
|
|
978
|
-
|
|
979
|
-
|
|
978
|
+
types: ["attributes"],
|
|
979
|
+
attributeFilter: ["type"],
|
|
980
980
|
selector: '[type="file"]',
|
|
981
981
|
callback: (mutation) => init(mutation.target)
|
|
982
982
|
});
|
|
@@ -1009,7 +1009,7 @@ Actions.init([
|
|
|
1009
1009
|
// Something...
|
|
1010
1010
|
}
|
|
1011
1011
|
|
|
1012
|
-
|
|
1012
|
+
action.element.dispatchEvent(
|
|
1013
1013
|
new CustomEvent(action.name, {
|
|
1014
1014
|
detail: {}
|
|
1015
1015
|
})
|
package/webpack.config.js
CHANGED
|
@@ -1,84 +1,65 @@
|
|
|
1
|
-
const path = require("path")
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
3
|
+
const { EsbuildPlugin } = require("esbuild-loader");
|
|
4
|
+
const { FileUploader } = require("@cocreate/webpack");
|
|
6
5
|
|
|
7
|
-
module.exports = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
compress: {
|
|
68
|
-
drop_console: true,
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
}),
|
|
72
|
-
],
|
|
73
|
-
splitChunks: {
|
|
74
|
-
chunks: "all",
|
|
75
|
-
minSize: 200,
|
|
76
|
-
// maxSize: 99999,
|
|
77
|
-
//minChunks: 1,
|
|
78
|
-
|
|
79
|
-
cacheGroups: {
|
|
80
|
-
defaultVendors: false,
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
}
|
|
6
|
+
module.exports = async (env, argv) => {
|
|
7
|
+
const isProduction = argv && argv.mode === "production";
|
|
8
|
+
const config = {
|
|
9
|
+
entry: {
|
|
10
|
+
"CoCreate-file": "./src/index.js"
|
|
11
|
+
},
|
|
12
|
+
output: {
|
|
13
|
+
path: path.resolve(__dirname, "dist"),
|
|
14
|
+
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
15
|
+
libraryExport: "default",
|
|
16
|
+
library: ["CoCreate", "file"],
|
|
17
|
+
clean: true
|
|
18
|
+
},
|
|
19
|
+
plugins: [
|
|
20
|
+
new MiniCssExtractPlugin({
|
|
21
|
+
filename: isProduction ? "[name].min.css" : "[name].css"
|
|
22
|
+
}),
|
|
23
|
+
new FileUploader(env, argv)
|
|
24
|
+
],
|
|
25
|
+
mode: isProduction ? "production" : "development",
|
|
26
|
+
devtool: isProduction ? "source-map" : "eval-source-map",
|
|
27
|
+
module: {
|
|
28
|
+
rules: [
|
|
29
|
+
{
|
|
30
|
+
test: /.js$/,
|
|
31
|
+
exclude: /node_modules/,
|
|
32
|
+
use: {
|
|
33
|
+
loader: "esbuild-loader",
|
|
34
|
+
options: {
|
|
35
|
+
loader: "js",
|
|
36
|
+
target: "es2017"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
test: /.css$/i,
|
|
42
|
+
use: [MiniCssExtractPlugin.loader, "css-loader"]
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
optimization: {
|
|
47
|
+
minimize: isProduction,
|
|
48
|
+
minimizer: [
|
|
49
|
+
new EsbuildPlugin({
|
|
50
|
+
target: "es2017",
|
|
51
|
+
css: true
|
|
52
|
+
})
|
|
53
|
+
],
|
|
54
|
+
splitChunks: {
|
|
55
|
+
cacheGroups: {
|
|
56
|
+
defaultVendors: false
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
performance: {
|
|
61
|
+
hints: isProduction ? "warning" : false
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
return config;
|
|
65
|
+
};
|