Skip to content

Commit fc3d90d

Browse files
RubaXaRubaXa
committed
+ get started
1 parent 5fe7dcf commit fc3d90d

File tree

4 files changed

+116
-39
lines changed

4 files changed

+116
-39
lines changed

‎README.md

Lines changed: 61 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,58 @@
1-
<a name="install" data-name="Installation"></a>
2-
## Installation, testing, assembling
3-
`npm install fileapi`<br/>
4-
`cd fileapi`<br/>
5-
`npm install`<br/>
6-
`grunt`
7-
8-
9-
---
10-
11-
12-
<a name="FileAPI"></a>
1+
<a name="FileAPI"></a>
132
## FileAPI
143
A set of javascript tools for working with files.
154

5+
<a name="started"></a>
6+
### Get started
7+
8+
```html
9+
<div>
10+
<!-- "js-fileapi-wrapper" -- required class -->
11+
<div class="js-fileapi-wrapper upload-btn" id="choose">
12+
<div class="upload-btn__txt">Choose files</div>
13+
<input name="files" type="file" multiple />
14+
</div>
15+
<div id="images"><!-- previews --></div>
16+
</div>
17+
18+
<script>window.FileAPI = { staticPath: '/js/FileAPI/dist/' };</script>
19+
<script src="/js/FileAPI/dist/FileAPI.min.js"></script>
20+
<script>
21+
FileAPI.event.on(choose, 'change', function (evt){
22+
var files = FileAPI.getFiles(evt); // Retrieve file list
23+
24+
FileAPI.filterFiles(files, function (file, info/**Object*/){
25+
if( /^image/.test(file.type) ){
26+
return info.width >= 320 && info.height >= 240;
27+
}
28+
return false;
29+
}, function (files/**Array*/, rejected/**Array*/){
30+
if( files.length ){
31+
// Make preview 100x100
32+
FileAPI.each(files, function (file){
33+
FileAPI.Image(file).preview(100).get(function (err, img){
34+
images.appendChild(img);
35+
});
36+
});
37+
38+
// Uploading Files
39+
FileAPI.upload({
40+
url: './ctrl.php',
41+
files: { images: files },
42+
progress: function (evt){ /* ... */ },
43+
complete: function (err, xhr){ /* ... */ }
44+
});
45+
}
46+
});
47+
});
48+
</script>
49+
```
50+
51+
---
1652

1753
<a name="FileAPI.setup"></a>
18-
### Setup
19-
Connecting the library to your project.
20-
If you need a CORS, then edit the `crossdomain.xml` and put it in the root of remote domain.
54+
### Setup options
55+
Edit the file `crossdomain.xml` and place it to the root of the domain to which files will be uploaded.
2156

2257
```html
2358
<script>
@@ -1274,7 +1309,7 @@ Stylized button.
12741309
font-size: 50px;
12751310
}
12761311
</style>
1277-
<div class="upload-btn js-fileapi-wrapper">
1312+
<div class="js-fileapi-wrapper upload-btn">
12781313
<div class="upload-btn__txt">Upload files</div>
12791314
<input name="files" type="file" multiple />
12801315
</div>
@@ -1321,12 +1356,21 @@ Button like link.
13211356
font-size: 50px;
13221357
}
13231358
</style>
1324-
<a class="upload-link js-fileapi-wrapper">
1359+
<a class="js-fileapi-wrapper upload-link">
13251360
<span class="upload-link__txt">Upload photo</span>
13261361
<input name="photo" type="file" accept="image/*" />
13271362
</a>
13281363
```
13291364
1365+
---
1366+
1367+
<a name="install" data-name="Installation"></a>
1368+
## Installation, testing, assembling
1369+
`npm install fileapi`<br/>
1370+
`cd fileapi`<br/>
1371+
`npm install`<br/>
1372+
`grunt`
1373+
13301374
13311375
---
13321376

‎README.ru.md

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,58 @@
1-
<a name="install" data-name="Installation"></a>
2-
## Installation, testing, assembling
3-
`npm install fileapi`<br/>
4-
`cd fileapi`<br/>
5-
`npm install`<br/>
6-
`grunt`
7-
8-
9-
---
10-
11-
12-
<a name="FileAPI"></a>
1+
<a name="FileAPI"></a>
132
## FileAPI
143
Набор JavaScript инструментов для работы с файлами.
154

5+
<a name="started"></a>
6+
### Get started
7+
8+
```html
9+
<div>
10+
<!-- "js-fileapi-wrapper" -- обязательный class -->
11+
<div class="js-fileapi-wrapper upload-btn" id="choose">
12+
<div class="upload-btn__txt">Choose files</div>
13+
<input name="files" type="file" multiple />
14+
</div>
15+
<div id="images"><!-- предпросмотр --></div>
16+
</div>
17+
18+
<script>window.FileAPI = { staticPath: '/js/FileAPI/dist/' };</script>
19+
<script src="/js/FileAPI/dist/FileAPI.min.js"></script>
20+
<script>
21+
FileAPI.event.on(choose, 'change', function (evt){
22+
var files = FileAPI.getFiles(evt); // Retrieve file list
23+
24+
FileAPI.filterFiles(files, function (file, info/**Object*/){
25+
if( /^image/.test(file.type) ){
26+
return info.width >= 320 && info.height >= 240;
27+
}
28+
return false;
29+
}, function (files/**Array*/, rejected/**Array*/){
30+
if( files.length ){
31+
// Создаем предпросмотр 100x100
32+
FileAPI.each(files, function (file){
33+
FileAPI.Image(file).preview(100).get(function (err, img){
34+
images.appendChild(img);
35+
});
36+
});
37+
38+
// Загружаем файлы
39+
FileAPI.upload({
40+
url: './ctrl.php',
41+
files: { images: files },
42+
progress: function (evt){ /* ... */ },
43+
complete: function (err, xhr){ /* ... */ }
44+
});
45+
}
46+
});
47+
});
48+
</script>
49+
```
50+
51+
---
1652

1753
<a name="FileAPI.setup"></a>
18-
### Setup
19-
Подключение библиотеки к проекту.
20-
Если вы собираетесь использовать CORS, то отредактируйте файл `crossdomain.xml` и
21-
разместите в коре удаленного домена.
54+
### Setup options
55+
Отредактируйте файл `crossdomain.xml` и разместите его в корне домена, на который будут загружаться файлы.
2256

2357
```html
2458
<script>

‎index.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -244,13 +244,12 @@ <h4 data-anchor="fn" class="fn">
244244
if( !force ){
245245
ctx.$apply(_updScroll);
246246
}
247-
});
248-
//
249-
//
247+
}).trigger('hashchange', true);
248+
249+
250250
$.getJSON('./statics/docs.json?ver='+FileAPI.version, function (json){
251251
ctx.api = json;
252-
ctx.$apply();
253-
$(window).trigger('hashchange', true)
252+
ctx.$apply(_updScroll);
254253
});
255254

256255
window.ctx = ctx;

‎statics/docs.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)