Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aaronksaunders/ionic4-firebase-storage
Using Camera for File Upload from Ionic v4 App to Firebase Cloud Storage
https://github.com/aaronksaunders/ionic4-firebase-storage
blob-storage file-upload firebase-database image ionic-native ionic4
Last synced: 3 months ago
JSON representation
Using Camera for File Upload from Ionic v4 App to Firebase Cloud Storage
- Host: GitHub
- URL: https://github.com/aaronksaunders/ionic4-firebase-storage
- Owner: aaronksaunders
- Created: 2018-09-11T04:54:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:28:14.000Z (about 2 years ago)
- Last Synced: 2023-03-11T14:08:03.619Z (almost 2 years ago)
- Topics: blob-storage, file-upload, firebase-database, image, ionic-native, ionic4
- Language: TypeScript
- Homepage:
- Size: 4.56 MB
- Stars: 29
- Watchers: 4
- Forks: 19
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ionic4-firebase-storage
#### See additional content on youtube - https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg
> Updated October 30th 2019
### Magic of converting image from camera to blob for upload
camera code is directly copied from the [ionic-native documentation](https://ionicframework.com/docs/native/)
```javascript
const options: CameraOptions = {
quality: 80,
quality: 80,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.ALLMEDIA,
sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
};
let cameraInfo = await this.camera.getPicture(options);
```
be sure to include the [cordova-file plugin](https://ionicframework.com/docs/native/file/) and the [cordova-camera plugin](https://ionicframework.com/docs/native/camera/)
```javascript
// FILE STUFF
makeFileIntoBlob(_imagePath) {
// INSTALL PLUGIN - cordova plugin add cordova-plugin-file
return new Promise((resolve, reject) => {
let fileName = "";
this.file
.resolveLocalFilesystemUrl(_imagePath)
.then(fileEntry => {
let { name, nativeURL } = fileEntry;
// get the path..
let path = nativeURL.substring(0, nativeURL.lastIndexOf("/"));
fileName = name;
// we are provided the name, so now read the file into a buffer
return this.file.readAsArrayBuffer(path, name);
})
.then(buffer => {
// get the buffer and make a blob to be saved
let imgBlob = new Blob([buffer], {
type: "image/jpeg"
});
// pass back blob and the name of the file for saving
// into fire base
resolve({
fileName,
imgBlob
});
})
.catch(e => reject(e));
});
}
```
### Things to notice in the code
Use the versions of the @ionic/native modules
```json
"@ionic-native/camera": "^5.16.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/file": "^5.16.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
```
```javascript
// notice the path for the import ends in ngx
import { Camera, CameraOptions } from "@ionic-native/camera/ngx";
import { File } from "@ionic-native/file/ngx";
```
you have to do the same when you import the module in app.module.ts
```javascript
import { Camera } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
File,
Camera,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
```console
Ionic:
Ionic CLI : 5.2.7 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.3
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 7 other plugins)
Utility:
cordova-res : not installed
native-run : 0.2.9
System:
Android SDK Tools : 26.1.1 (/Users/aaronksaunders/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v10.15.1 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/bin/node)
npm : 6.11.2
OS : macOS Mojave
Xcode : Xcode 11.1 Build version 11A1027
Aarons-iMac:ionic4-firebase-storage aaronksaunders$
```