|
@@ -2,13 +2,17 @@
|
2
|
2
|
|
3
|
3
|
## v0.5.0 Work In Progress README.md
|
4
|
4
|
|
5
|
|
-Upload, and download files with customzable headers. Supports binary response/request data, upload/download progress, also has file stream, and CRUD APIs which enables you process file content in JS context. (such as display image data, and process string or data).
|
|
5
|
+Module for upload, download, and access files in JS context. Also provides file stream API for read/write large files.
|
6
|
6
|
|
7
|
7
|
If you're getting into trouble with image or file server that requires specific fields in the header, or you're having problem with `fetch` API when sending/receiving binary data, you might try this module as well.
|
8
|
8
|
|
9
|
9
|
See [[fetch] Does fetch with blob() marshal data across the bridge?](https://github.com/facebook/react-native/issues/854) for the reason why I made this module.
|
10
|
10
|
|
11
|
|
-In latest version (v0.5.0), you can either `upload` or `download` files simply using a file path. We've also introduced `fs` APIs for access files, and `file stream` API that helps you read/write files (especially for **large ones**), see [Examples](#user-content-usage) bellow.
|
|
11
|
+** Pre v0.5.0 Users**
|
|
12
|
+
|
|
13
|
+This update is `backward-compatible` generally you don't have to change existing code unless you're going to use new APIs.
|
|
14
|
+
|
|
15
|
+In latest version (v0.5.0), new APIs can either `upload` or `download` files simply using a file path. It's much more memory efficent in some use case. We've also introduced `fs` APIs for access files, and `file stream` API that helps you read/write files (especially for **large ones**), see [Examples](#user-content-usage) bellow.
|
12
|
16
|
|
13
|
17
|
This module implements native methods, supports both Android (uses awesome native library [AsyncHttpClient](https://github.com/AsyncHttpClient/async-http-client])) and IOS.
|
14
|
18
|
|
|
@@ -20,10 +24,12 @@ This module implements native methods, supports both Android (uses awesome nativ
|
20
|
24
|
* [Upload file](#user-content-upload-example--dropbox-files-upload-api)
|
21
|
25
|
* [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
|
22
|
26
|
* [Upload/Download progress](#user-content-uploaaddownload-progress)
|
|
27
|
+ * [Show Downloaded File in Android Downloads App](#user-content-show-downloaded-file-in-android-downloads-app)
|
23
|
28
|
* [File access](#user-content-file-access)
|
24
|
29
|
* [File stream](#user-content-file-stream)
|
25
|
30
|
* [Manage cached files](#user-content-manage-cached-files)
|
26
|
31
|
* [API](#user-content-api)
|
|
32
|
+ * [config](#user-content-config)
|
27
|
33
|
* [fetch](#user-content-fetchmethod-url-headers-bodypromisefetchblobresponse)
|
28
|
34
|
* [session](#user-content-sessionnamestringrnfetchblobsession)
|
29
|
35
|
* [base64](#user-content-base64)
|
|
@@ -189,7 +195,7 @@ RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
189
|
195
|
|
190
|
196
|
#### Upload a file from storage
|
191
|
197
|
|
192
|
|
-If you're going to use a `file` request body, just push the path with prefix `RNFetchBlob-file://`. (We're planning to add an API to customize this prefix)
|
|
198
|
+If you're going to use a `file` request body, just wrap the path with `wrap` API.
|
193
|
199
|
|
194
|
200
|
```js
|
195
|
201
|
RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
|
@@ -203,7 +209,7 @@ RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
|
203
|
209
|
}),
|
204
|
210
|
'Content-Type' : 'application/octet-stream',
|
205
|
211
|
// Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file.
|
206
|
|
- }, 'RNFetchBlob-file://' + PATH_TO_THE_FILE)
|
|
212
|
+ }, RNFetchBlob.wrap(PATH_TO_THE_FILE))
|
207
|
213
|
.then((res) => {
|
208
|
214
|
console.log(res.text())
|
209
|
215
|
})
|
|
@@ -240,7 +246,7 @@ Elements have property `filename` will be transformed into binary format, otherw
|
240
|
246
|
})
|
241
|
247
|
```
|
242
|
248
|
|
243
|
|
-What if you want to upload a file in some field ? Just like [upload a file from storage](#user-content-upload-a-file-from-storage) example, change `data` to path of the file with a prefix `RNFetchBlob-file://` (this feature is only available for `version >= v0.5.0`)
|
|
249
|
+What if you want to upload a file in some field ? Just like [upload a file from storage](#user-content-upload-a-file-from-storage) example, wrap `data` by `wrap` API (this feature is only available for `version >= v0.5.0`)
|
244
|
250
|
|
245
|
251
|
```js
|
246
|
252
|
|
|
@@ -255,7 +261,7 @@ What if you want to upload a file in some field ? Just like [upload a file from
|
255
|
261
|
name : 'avatar',
|
256
|
262
|
filename : 'avatar.png',
|
257
|
263
|
// Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file path
|
258
|
|
- data: 'RNFetchBlob-file://' + PATH_TO_THE_FILE
|
|
264
|
+ data: RNFetchBlob.wrap(PATH_TO_THE_FILE)
|
259
|
265
|
},
|
260
|
266
|
// elements without property `filename` will be sent as plain text
|
261
|
267
|
{ name : 'name', data : 'user'},
|
|
@@ -290,6 +296,30 @@ In `version >= 0.4.2` it is possible to know the upload/download progress.
|
290
|
296
|
})
|
291
|
297
|
```
|
292
|
298
|
|
|
299
|
+#### Show Downloaded File in Android Downloads App
|
|
300
|
+
|
|
301
|
+When you use `config` API to store response data to file, the file won't be visible in Andoird's "Download" app, if you want to do this, some extra options in `config` is required.
|
|
302
|
+
|
|
303
|
+```js
|
|
304
|
+RNFetchBlob.config({
|
|
305
|
+ fileCache : true,
|
|
306
|
+ // android only options
|
|
307
|
+ addAndroidDownloads : {
|
|
308
|
+ // Show notification when response data transmitted
|
|
309
|
+ notification : true,
|
|
310
|
+ // Title of download notification
|
|
311
|
+ title : 'Great ! Download Success ! :O ',
|
|
312
|
+ // File description (not notification description)
|
|
313
|
+ description : 'An image file.',
|
|
314
|
+ mime : 'image/png',
|
|
315
|
+ // Make the file scannable by media scanner
|
|
316
|
+ meidaScannable : true,
|
|
317
|
+ }
|
|
318
|
+})
|
|
319
|
+.fetch('GET', 'http://example.com/image1.png')
|
|
320
|
+.then(...)
|
|
321
|
+```
|
|
322
|
+
|
293
|
323
|
#### File Access
|
294
|
324
|
|
295
|
325
|
File access APIs were made when developing `v0.5.0`, which helping us write tests, and was not planned to be a part of this module. However I realized that, it's hard to find a great solution to manage cached files, every one who use this moudle may need those APIs for there cases.
|
|
@@ -308,18 +338,17 @@ Here's the list of `fs` APIs
|
308
|
338
|
- exists
|
309
|
339
|
- isDir
|
310
|
340
|
|
311
|
|
-
|
312
|
|
-
|
|
341
|
+See [fs](#user-content-fs) chapter for more information
|
313
|
342
|
|
314
|
343
|
#### File Stream
|
315
|
344
|
|
316
|
|
-In `v0.5.0` we've added `writeStream` and `readStream` in `fs`, which allows you read/write data from file path. This API creates a file stream, rather than a BASE64 encoded data of the file, it's handy when deal with **large files**.
|
|
345
|
+In `v0.5.0` we've added `writeStream` and `readStream`, which allows you read/write data from file path. This API creates a file stream, rather than convert whole data into BASE64 encoded string, it's handy when processing **large files**.
|
317
|
346
|
|
318
|
|
-But there're some differences on usage of `readStream` and `writeStream`. When calling `readStream` method, the file stream is opened immediately, and start to read data.
|
|
347
|
+But there're some differences between `readStream` and `writeStream` API. When calling `readStream` method, the file stream is opened immediately, and start to read data.
|
319
|
348
|
|
320
|
349
|
```js
|
321
|
350
|
let data = ''
|
322
|
|
-let stream = RNFetchBlob.readStream(
|
|
351
|
+let ifstream = RNFetchBlob.readStream(
|
323
|
352
|
// encoding, should be one of `base64`, `utf8`
|
324
|
353
|
'base64',
|
325
|
354
|
// file path
|
|
@@ -327,17 +356,32 @@ let stream = RNFetchBlob.readStream(
|
327
|
356
|
// (optional) buffer size, default to 4096 (4095 for BASE64 encoded data)
|
328
|
357
|
// when reading file in BASE64 encoding, buffer size must be multiples of 3.
|
329
|
358
|
4095)
|
330
|
|
-stream.onData((chunk) => {
|
|
359
|
+ifstream.onData((chunk) => {
|
331
|
360
|
data += chunk
|
332
|
361
|
})
|
333
|
|
-stream.onError((err) => {
|
|
362
|
+ifstream.onError((err) => {
|
334
|
363
|
console.log('oops', err)
|
335
|
364
|
})
|
336
|
|
-stream.onEnd(() => {
|
|
365
|
+ifstream.onEnd(() => {
|
337
|
366
|
<Image source={{ uri : 'data:image/png,base64' + data }}
|
338
|
367
|
})
|
339
|
368
|
```
|
340
|
369
|
|
|
370
|
+When use `writeStream`, the stream is also opened immediately, but you have to `write`, and `close` by yourself.
|
|
371
|
+
|
|
372
|
+```
|
|
373
|
+let ofstream = RNFetchBlob.writeStream(
|
|
374
|
+ PATH_TO_FILE,
|
|
375
|
+ // encoding, should be one of `base64`, `utf8`, `ascii`
|
|
376
|
+ 'utf8',
|
|
377
|
+ // should data append to existing content ?
|
|
378
|
+ true)
|
|
379
|
+ofstream.write('foo')
|
|
380
|
+ofstream.write('bar')
|
|
381
|
+ofstream.close()
|
|
382
|
+
|
|
383
|
+```
|
|
384
|
+
|
341
|
385
|
#### Cache File Management
|
342
|
386
|
|
343
|
387
|
When using `fileCache` or `path` options along with `fetch` API, response data will automatically stored into file system. The files will **NOT** removed unless you `unlink` it. There're several ways to remove the files
|
|
@@ -399,7 +443,7 @@ You can also group the requests by using `session` API, and use `dispose` to rem
|
399
|
443
|
|
400
|
444
|
#### `config(options:RNFetchBlobConfig):fetch`
|
401
|
445
|
|
402
|
|
-TODO
|
|
446
|
+Config API was introduced in `v0.5.0` which provides some options for the `fetch` task.
|
403
|
447
|
|
404
|
448
|
#### `fetch(method, url, headers, body):Promise<FetchBlobResponse>`
|
405
|
449
|
|
|
@@ -442,6 +486,25 @@ TODO
|
442
|
486
|
|
443
|
487
|
### Types
|
444
|
488
|
|
|
489
|
+#### RNFetchBlobConfig
|
|
490
|
+
|
|
491
|
+A set of configurations that will be injected into a `fetch` method, with the following properties.
|
|
492
|
+
|
|
493
|
+#### fileCache:boolean
|
|
494
|
+ Set this property to `true` will makes response data of the `fetch` stored in a temp file, by default the temp file will stored in App's own root folder with file name template `RNFetchBlob_tmp${timestamp}`.
|
|
495
|
+#### appendExt:string
|
|
496
|
+ Set this propery to change temp file extension that created by `fetch` response data.
|
|
497
|
+#### path:string
|
|
498
|
+ When this property has value, `fetch` API will try to store response data in the path ignoring `fileCache` and `appendExt` property.
|
|
499
|
+#### addAndroidDownloads:object (Android only)
|
|
500
|
+ This is an Android only property, it should be an object with the following properties :
|
|
501
|
+ - title : title of the file download success notification
|
|
502
|
+ - description : File description of the file.
|
|
503
|
+ - mime : MIME type of the file. By default is `text/plain`
|
|
504
|
+ - mediaScannable : A `boolean` value, see [Officail Document](https://developer.android.com/reference/android/app/DownloadManager.html#addCompletedDownload(java.lang.String, java.lang.String, boolean, java.lang.String, java.lang.String, long, boolean))
|
|
505
|
+ - notification : A `boolean` value decide whether show a notification when download complete.
|
|
506
|
+
|
|
507
|
+
|
445
|
508
|
#### RNFetchBlobResponse
|
446
|
509
|
|
447
|
510
|
When `fetch` success, it resolve a `FetchBlobResponse` object as first argument. `FetchBlobResponse` object has the following methods (these method are synchronous, so you might take quite a performance impact if the file is big)
|
|
@@ -464,11 +527,16 @@ resp.session('session-name')
|
464
|
527
|
|
465
|
528
|
#### RNFetchBlobSession
|
466
|
529
|
|
467
|
|
-TODO
|
|
530
|
+A `session` is an object that helps you manage files. It simply main a list of file path and let you use `dispose()`to delete files in this session once and for all.
|
468
|
531
|
|
469
|
|
-#### RNFetchBlobStream
|
470
|
|
-
|
471
|
|
-TODO
|
|
532
|
+#### add(path:string):RNFetchBlobSession
|
|
533
|
+ Add a file path to this session.
|
|
534
|
+#### remove(path:string):RNFetchBlobSession
|
|
535
|
+ Remove a file path from this session (not delete the file).
|
|
536
|
+#### list():Array<String>
|
|
537
|
+ Returns an array contains file paths in this session.
|
|
538
|
+#### dispose():Promise
|
|
539
|
+ Delete all files according to paths in the session.
|
472
|
540
|
|
473
|
541
|
## Major Changes
|
474
|
542
|
|