|
|
|
|
2
|
|
2
|
|
3
|
## v0.5.0 Work In Progress README.md
|
3
|
## v0.5.0 Work In Progress README.md
|
4
|
|
4
|
|
5
|
-A react-native module for upload, and download file with custom headers. Supports blob response data, upload/download progress, and file reader API that enables you process file content in js context (such as display image data, string or image process).
|
|
|
|
|
5
|
+A react-native module for upload, and download files with custom headers. Supports blob response data, upload/download progress, and file reader API that enables you process file content in js context (such as display image data, string or image process).
|
6
|
|
6
|
|
7
|
If you're dealing with image or file server that requires special field in the header, or you're having problem with `fetch` API when receiving blob data, you might try this module.
|
7
|
If you're dealing with image or file server that requires special field in the header, or you're having problem with `fetch` API when receiving blob data, you might try this module.
|
8
|
|
8
|
|
|
|
|
|
20
|
* [Upload file](#user-content-upload-example--dropbox-files-upload-api)
|
20
|
* [Upload file](#user-content-upload-example--dropbox-files-upload-api)
|
21
|
* [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
|
21
|
* [Multipart/form upload](#user-content-multipartform-data-example--post-form-data-with-file-and-data)
|
22
|
* [Upload/Download progress](#user-content-uploaaddownload-progress)
|
22
|
* [Upload/Download progress](#user-content-uploaaddownload-progress)
|
23
|
- * [Deal with files in storage](#user-content-deal-with-files-in-storage)
|
|
|
|
|
23
|
+ * [File stream reader](#user-content-file-stream-reader)
|
24
|
* [Release cache files](#user-content-release-cache-files)
|
24
|
* [Release cache files](#user-content-release-cache-files)
|
25
|
* [API](#user-content-api)
|
25
|
* [API](#user-content-api)
|
26
|
|
26
|
|
|
|
|
|
78
|
```js
|
78
|
```js
|
79
|
RNFetchBlob
|
79
|
RNFetchBlob
|
80
|
.config({
|
80
|
.config({
|
|
|
81
|
+ // add this option that makes response data to be stored as a file,
|
|
|
82
|
+ // this is much more performant.
|
81
|
fileCache : true,
|
83
|
fileCache : true,
|
82
|
})
|
84
|
})
|
83
|
.fetch('GET', 'http://www.example.com/file/example.zip', {
|
85
|
.fetch('GET', 'http://www.example.com/file/example.zip', {
|
|
|
|
|
95
|
RNFetchBlob
|
97
|
RNFetchBlob
|
96
|
.config({
|
98
|
.config({
|
97
|
fileCache : true,
|
99
|
fileCache : true,
|
|
|
100
|
+ // by adding this option, the temp files will have a file extension
|
98
|
appendExt : 'png'
|
101
|
appendExt : 'png'
|
99
|
})
|
102
|
})
|
100
|
.fetch('GET', 'http://www.example.com/file/example.zip', {
|
103
|
.fetch('GET', 'http://www.example.com/file/example.zip', {
|
|
|
|
|
115
|
RNFetchBlob.getSystemDirs().then((dirs) => {
|
118
|
RNFetchBlob.getSystemDirs().then((dirs) => {
|
116
|
RNFetchBlob
|
119
|
RNFetchBlob
|
117
|
.config({
|
120
|
.config({
|
|
|
121
|
+ // response data will be saved to this path if it has access right.
|
118
|
path : dirs.DocumentDir + 'path-to-file.anything'
|
122
|
path : dirs.DocumentDir + 'path-to-file.anything'
|
119
|
})
|
123
|
})
|
120
|
.fetch('GET', 'http://www.example.com/file/example.zip', {
|
124
|
.fetch('GET', 'http://www.example.com/file/example.zip', {
|
121
|
- some headers ..
|
|
|
|
|
125
|
+ //some headers ..
|
122
|
})
|
126
|
})
|
123
|
.then((res) => {
|
127
|
.then((res) => {
|
124
|
// the path should be dirs.DocumentDir + 'path-to-file.anything'
|
128
|
// the path should be dirs.DocumentDir + 'path-to-file.anything'
|
|
|
|
|
165
|
mute : false
|
169
|
mute : false
|
166
|
}),
|
170
|
}),
|
167
|
'Content-Type' : 'application/octet-stream',
|
171
|
'Content-Type' : 'application/octet-stream',
|
|
|
172
|
+ // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file
|
168
|
}, 'RNFetchBlob-file://' + PATH_TO_THE_FILE)
|
173
|
}, 'RNFetchBlob-file://' + PATH_TO_THE_FILE)
|
169
|
.then((res) => {
|
174
|
.then((res) => {
|
170
|
console.log(res.text())
|
175
|
console.log(res.text())
|
|
|
|
|
212
|
'Content-Type' : 'multipart/form-data',
|
217
|
'Content-Type' : 'multipart/form-data',
|
213
|
}, [
|
218
|
}, [
|
214
|
// append field data from file path
|
219
|
// append field data from file path
|
215
|
- { name : 'avatar', filename : 'avatar.png', data: 'RNFetchBlob-file://' + PATH_TO_THE_FILE},
|
|
|
|
|
220
|
+ { name : 'avatar',
|
|
|
221
|
+ filename : 'avatar.png',
|
|
|
222
|
+ // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://` when the data comes from a file
|
|
|
223
|
+ data: 'RNFetchBlob-file://' + PATH_TO_THE_FILE
|
|
|
224
|
+ },
|
216
|
// elements without property `filename` will be sent as plain text
|
225
|
// elements without property `filename` will be sent as plain text
|
217
|
{ name : 'name', data : 'user'},
|
226
|
{ name : 'name', data : 'user'},
|
218
|
{ name : 'info', data : JSON.stringify({
|
227
|
{ name : 'info', data : JSON.stringify({
|
|
|
|
|
246
|
})
|
255
|
})
|
247
|
```
|
256
|
```
|
248
|
|
257
|
|
|
|
258
|
+#### Handle files in storage
|
|
|
259
|
+
|
|
|
260
|
+In v0.5.0 we've added a `readStream` API, which allows you read data from file directly. This API creates a file stream, rather than a BASE64 encoded data of the file, so that you won't have to worry if large files explodes the memory.
|
|
|
261
|
+
|
|
|
262
|
+```js
|
|
|
263
|
+let data = ''
|
|
|
264
|
+let stream = RNFetchBlob.readStream(
|
|
|
265
|
+ // encoding, should be one of `base64`, `utf8`, `ascii`
|
|
|
266
|
+ 'base64',
|
|
|
267
|
+ // file path
|
|
|
268
|
+ PATH_TO_THE_FILE,
|
|
|
269
|
+ // (optional) buffer size, default to 1024 (1026 for BASE64 encoded data)
|
|
|
270
|
+ // when reading file in BASE64 encoding, buffer size must be multiples of 3.
|
|
|
271
|
+ 1026)
|
|
|
272
|
+stream.onData((chunk) => {
|
|
|
273
|
+ data += chunk
|
|
|
274
|
+})
|
|
|
275
|
+stream.onError((err) => {
|
|
|
276
|
+ console.log('oops', err)
|
|
|
277
|
+})
|
|
|
278
|
+stream.onEnd(() => {
|
|
|
279
|
+ <Image source={{ uri : 'data:image/png,base64' + data }}
|
|
|
280
|
+})
|
|
|
281
|
+```
|
|
|
282
|
+
|
|
|
283
|
+#### Release cache files
|
|
|
284
|
+
|
249
|
|
285
|
|
250
|
## API
|
286
|
## API
|
251
|
|
287
|
|
|
|
|
|
301
|
| 0.4.2 | Supports upload/download progress |
|
337
|
| 0.4.2 | Supports upload/download progress |
|
302
|
| 0.5.0 | Upload/download with direct access to file storage, and also supports read file with file stream |
|
338
|
| 0.5.0 | Upload/download with direct access to file storage, and also supports read file with file stream |
|
303
|
|
339
|
|
304
|
-### Upcoming Features
|
|
|
305
|
-
|
|
|
306
|
-We are now working on v0.5.0, there will be some new features.
|
|
|
|
|
340
|
+### TODOs
|
307
|
|
341
|
|
308
|
-* Save file to storage directly
|
|
|
309
|
-* Upload file from storage directly
|
|
|
310
|
-* Custom MIME type in form data
|
|
|
|
|
342
|
+* Customizable Multipart MIME type
|
|
|
343
|
+* Improvement of file cache management API
|
311
|
|
344
|
|
312
|
### Development
|
345
|
### Development
|
313
|
|
346
|
|
314
|
-If you're insterested in hacking this module, check our [development guide](https://github.com/wkh237/react-native-fetch-blob/wiki/Development-Guide), there might be something helpful.
|
|
|
|
|
347
|
+If you're interested in hacking this module, check our [development guide](https://github.com/wkh237/react-native-fetch-blob/wiki/Development-Guide), there might be some helpful information.
|
315
|
Please feel free to make a PR or file an issue.
|
348
|
Please feel free to make a PR or file an issue.
|