send multiple images via file transfer plugin ionic 3 - ionic-framework

i'm working on app witch i need to send multiple images,
and i wonder if there is any way to send multiple images via file transfer plugin,
this my code:
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData2) => {
this.imageURI2 = imageData2;
}, (err) => {
console.log(err);
});
upload
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'file',
fileName: 'name.jpg',
headers: {
Connection: "close"
}
}
options.chunkedMode = false;
if(this.imageURI1 != null){
fileTransfer.upload(this.imageURI1,
'https://test.test.com/uplaodphoto.php', options)
.then((data) => {
alert("success");
this.imageFileName1 =
"https://test.test.com/images/name.jpg"
}, (err) => {
alert("error"+JSON.stringify(err));
});

User Image Picker Plugin Cordova Image Picker
Usage:
import { ImagePicker } from '#ionic-native/image-picker';
constructor(private imagePicker: ImagePicker) { }
export class YourPage {
pickImages(){
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
this.imageUpload(results[i])
}
}, (err) => { });
}
// Upload Image function.
imageUpload(path) {
const fileTransfer: FileTransferObject = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'image',
fileName: '.png',
chunkedMode: false,
//mimeType: "image/jpeg",
}
fileTransfer.upload(path, 'https://api.com/image-upload', options)
.then((data) => {
console.log(data+" Uploaded Successfully");
let res = JSON.parse(data.response);
if (res.success == true) {
}
this.loader.dismiss();
}, (err) => {
console.log(err);
});
}
}

Related

Next-Auth CredentialsProvider really slow

The following works fine, but I have noticed that it is really slow login in a client. How can I make it faster?
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import { ObjectId } from 'mongodb'
import { MongoDBAdapter } from "#next-auth/mongodb-adapter"
import clientPromise from "../../../lib/mongodb";
import { v4 as uuidv4 } from 'uuid';
var CryptoJS = require("crypto-js");
const sFinder = async (task, token) => {
try{
const client = await clientPromise;
const database = client.db('DRN1');
const ses = await database.collection('sessions');
switch (task) {
case 1:
const result = await ses.find({
"userId": ObjectId(token.uuid)
}).sort({"_id":-1}).limit(1).toArray();
if (!result) {
return 202;
}
else{
return result[0].sessionToken
}
break;
case 2:
const insertResult = await ses.insertOne({"userId":token.uuid, "sessionToken":token.accessToken});
if (!insertResult) {
return 203;
}
else{
return insertResult
}
break;
case 3:
var expdate = new Date(token.exp * 1000);
const UpdateResult = await ses.updateOne({"userId":ObjectId(token.uuid), "sessionToken":token.accessToken},
{ $set: {"expires": expdate}}, { upsert: true });
if (!UpdateResult) {
return 203;
}
else{
return UpdateResult
}
break;
default:
break;
}
} catch(e){
console.error(e);
}
}
export default NextAuth({
adapter: MongoDBAdapter(clientPromise),
session: {
strategy: 'jwt',
jwt: true,
},
providers: [
CredentialsProvider({
name: 'DRN1',
credentials: {
username: { label: "Username", type: "text"},
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
try{
const client = await clientPromise;
const database = client.db('DRN1');
const users = await database.collection('users');
const result = await users.findOne({
username: credentials.username,
});
if (!result) {
throw new Error('No user found with the username');
}
var bytes = CryptoJS.AES.decrypt(result.password, process.env.PASS_ENC);
var decryptedData = bytes.toString(CryptoJS.enc.Utf8);
//Check hased password with DB password
if(decryptedData != credentials.password){
throw new Error('Password doesnt match');
}
return {uuid:result._id, username: result.username, email: result.email, type:result.type, "sessionID":uuidv4()};
} catch(e){
console.error(e)
}
}
})
],
callbacks: {
signIn: async ({ user, account, profile, email, credentials }) => {
account.accessToken = user.sessionID
account.uuid = user.uuid
const test = await sFinder(2,account)
return true
},
jwt: async ({ token, account }) => {
if (account) {
token.uuid = account.uuid
token.accessToken = account.accessToken
}
const lastUsedToken = await sFinder(1,token)
const updateTokenExpire = await sFinder(3,token)
if(lastUsedToken != token.accessToken){
// console.log("I have made it an error")
token.error = 555;
}
return token
},
session: async ({ session, token, user }) => {
session.uuid = token.uuid
if(!token.accessToken){
//OAUTH Accounts
session.accessToken = uuidv4()
}else{
session.accessToken = token.accessToken
}
if(token.error == 555){
session.error = 555
}
return session
}
},
pages:{
error: 'signin'
},
theme: {
colorScheme: "dark", // "auto" | "dark" | "light"
brandColor: "", // Hex color code
logo: "https://storage.googleapis.com/radiomedia-images/station_logos/v2/DRN1_small.png" // Absolute URL to image
}
});
I believe what is slowing it down is the following
callbacks: {
signIn: async ({ user, account, profile, email, credentials }) => {
account.accessToken = user.sessionID
account.uuid = user.uuid
const test = await sFinder(2,account)
return true
},
jwt: async ({ token, account }) => {
if (account) {
token.uuid = account.uuid
token.accessToken = account.accessToken
}
const lastUsedToken = await sFinder(1,token)
const updateTokenExpire = await sFinder(3,token)
if(lastUsedToken != token.accessToken){
// console.log("I have made it an error")
token.error = 555;
}
return token
},
session: async ({ session, token, user }) => {
session.uuid = token.uuid
if(!token.accessToken){
//OAUTH Accounts
session.accessToken = uuidv4()
}else{
session.accessToken = token.accessToken
}
if(token.error == 555){
session.error = 555
}
return session
}
},
Mainly all the awaits, but the await functions are to make sure the user is not login on another device. As we log the old devices out automatically.

React-Query: useInfiniteQuery

So, I have looked through the docs and answers on here and I'm still needing some help:
index.tsx
const getInfiniteArticles = ({ pageParams = 0 }) => {
const res = await axios.get('/api/articles', { params: { page: pageParams } });
return res.data;
}
api/articles.ts
const getArticles = async (req: NextApiRequest, res: NextApiResponse) => {
try {
const { page } = req.query;
const pageNum = Number(page);
const data = await NewsService.getArticles(getRange(pageNum));
return res.status(200).json({
data,
previousPage: pageNum > 0 ? (pageNum - 1) : null,
nextPage: pageNum + 1,
});
} catch (err) {
res.json(err);
res.status(405).end();
}
};
export default getArticles;
index.tsx
const { data: articlePages, fetchNextPage } = useInfiniteQuery(
'infinite-articles',
getInfiniteArticles,
{
getNextPageParam: (lastPage, allGroups) => {
console.log('lastPage: ', lastPage);
console.log('allGroups: ', allGroups);
return lastPage.nextPage;
}
});
const handleLoadMore = () => {
fetchNextPage();
};
console after clicking next page:
lastPage: { data: Array(50), previousPage: null, nextPage: 1}
allGroups: [
{ data: Array(50), previousPage: null, nextPage: 1},
{ data: Array(50), previousPage: null, nextPage: 1},
]
Any help on why I'm getting the same groups is appreciated! :)
So, it turns out my structure wasn't correct
const {
fetchNextPage,
fetchPreviousPage,
hasNextPage,
hasPreviousPage,
isFetchingNextPage,
isFetchingPreviousPage,
...result
} = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
...options,
getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})
queryFn: (context: QueryFunctionContext) => Promise<TData>
The queryFn is supposed to be a synchronous function that returns a Promise
I was either passing an async function or I was returning the TData not a promise.
updated and working:
const getInfiniteArticles = ({ pageParam = 0 }) => axios.get('/api/articles', { params: { page: pageParam } });
const { data: articlePages, fetchNextPage } = useInfiniteQuery('articles', getInfiniteArticles, {
getNextPageParam: (lastPage, pages) => {
// the returned axios response
return lastPage.data.nextPage;
}
});
Reference Page

Hosting a Forge Autodesk viewer on Github

I've an issue with the Forge viewer I'm developping : Im' trying to host it using Github-page, but it doesn't seem to work correctly.
The issue is on the File tree : when I load the viewer page from the Github pages, the file tree seems stuck on "Loading...". However, it correctly loads when I load the page from localhost.
The code of the File tree :
$(document).ready(function () {
prepareAppBucketTree();
$('#refreshBuckets').click(function () {
$('#appBuckets').jstree(true).refresh();
});
$('#createNewBucket').click(function () {
createNewBucket();
});
$('#createBucketModal').on('shown.bs.modal', function () {
$("#newBucketKey").focus();
})
$('#hiddenUploadField').change(function () {
var node = $('#appBuckets').jstree(true).get_selected(true)[0];
var _this = this;
if (_this.files.length == 0) return;
var file = _this.files[0];
switch (node.type) {
case 'bucket':
var formData = new FormData();
formData.append('fileToUpload', file);
formData.append('bucketKey', node.id);
$.ajax({
url: '/api/forge/oss/objects',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
$('#appBuckets').jstree(true).refresh_node(node);
_this.value = '';
}
});
break;
}
});
});
function createNewBucket() {
var bucketKey = $('#newBucketKey').val();
var policyKey = $('#newBucketPolicyKey').val();
console.log(bucketKey)
jQuery.post({
url: '/api/forge/oss/buckets',
contentType: 'application/json',
data: JSON.stringify({ 'bucketKey': bucketKey, 'policyKey': policyKey }),
success: function (res) {
$('#appBuckets').jstree(true).refresh();
$('#createBucketModal').modal('toggle');
},
error: function (err) {
if (err.status == 409)
alert('Bucket already exists - 409: Duplicated')
console.log(err);
}
});
}
function prepareAppBucketTree() {
$('#appBuckets').jstree({
'core': {
'themes': { "icons": true },
'data': {
"url": '/api/forge/oss/buckets',
"dataType": "json",
'multiple': false,
"data": function (node) {
return { "id": node.id };
}
}
},
'types': {
'default': {
'icon': 'glyphicon glyphicon-question-sign'
},
'#': {
'icon': 'glyphicon glyphicon-cloud'
},
'bucket': {
'icon': 'glyphicon glyphicon-folder-open'
},
'object': {
'icon': 'glyphicon glyphicon-file'
}
},
"plugins": ["types", "state", "sort", "contextmenu"],
contextmenu: { items: autodeskCustomMenu }
}).on('loaded.jstree', function () {
$('#appBuckets').jstree('open_all');
}).bind("activate_node.jstree", function (evt, data) {
if (data != null && data.node != null && data.node.type == 'object') {
// $("#MyViewerDiv").empty();
var urn = data.node.id;
getForgeToken(function (access_token) {
jQuery.ajax({
url: 'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn + '/manifest',
headers: { 'Authorization': 'Bearer ' + access_token },
success: function (res) {
if (res.status === 'success') callByUrn('urn:'+urn);
else $("#MyViewerDiv").html('The translation job still running: ' + res.progress + '. Please try again in a moment.');
},
error: function (err) {
var msgButton = 'This file is not translated yet! ' +
'<button class="btn btn-xs btn-info" onclick="translateObject()"><span class="glyphicon glyphicon-eye-open"></span> ' +
'Start translation</button>'
$("#MyViewerDiv").html(msgButton);
}
});
})
}
});
}
function autodeskCustomMenu(autodeskNode) {
var items;
switch (autodeskNode.type) {
case "bucket":
items = {
uploadFile: {
label: "Upload file",
action: function () {
uploadFile();
},
icon: 'glyphicon glyphicon-cloud-upload'
}
};
break;
case "object":
items = {
translateFile: {
label: "Translate",
action: function () {
var treeNode = $('#appBuckets').jstree(true).get_selected(true)[0];
translateObject(treeNode);
},
icon: 'glyphicon glyphicon-eye-open'
}
};
break;
}
return items;
}
function uploadFile() {
$('#hiddenUploadField').click();
}
function translateObject(node) {
$("#MyViewerDiv").empty();
if (node == null) node = $('#appBuckets').jstree(true).get_selected(true)[0];
var bucketKey = node.parents[0];
var objectKey = node.id;
jQuery.post({
url: '/api/forge/modelderivative/jobs',
contentType: 'application/json',
data: JSON.stringify({ 'bucketKey': bucketKey, 'objectName': objectKey }),
success: function (res) {
$("#MyViewerDiv").html('Translation started! Please try again in a moment.');
},
});
}
Please note that Github Pages are used for serving static pages without any special server-side logic. Your Forge application requires a server to talk to as well, for example, to obtain a list of buckets for the tree view (by making a request to /api/forge/oss/buckets).
You could potentially host your application's server-side logic on something like Heroku, and then have your static HTML/CSS/JavaScript page on Github talk to that server (for example, https://my-forge-app.herokuapp.com/api/forge/oss/buckets). Just be careful about CORS.

Not able to convert the base64 to image path in Ionic 4

I am working on my Ionic 4 app and I have used the camera plugin for image uploading and I have converted the image to the base64 for showing the image but the problem is that I am not able to convert the base64 to proper image path for sending it to the API.
This is my editimage.page.html:
<ion-item class="newitem2">
<ion-avatar class="image-center">
<img name="profile_pic" [src]="this.userdetailsedit.value.profile_pic"/>
<ion-icon (click)="presentActionSheet()" class="myicon11" name="create"></ion-icon>
</ion-avatar>
</ion-item>
This is my editprofile.page.ts:
async UpdateUserDetails(){
this.storage.get('USER').then(userde => {
if (userde) {
this.userdetails = userde;
const userdetailseditss = {
first_name: this.userdetailsedit.value.first_name,
last_name: this.userdetailsedit.value.last_name,
mobile: this.userdetailsedit.value.mobile,
profile_pic: this.userdetailsedit.value.profile_pic,
};
this.chakapi.UserProfileUpdate(userdetailseditss, 'userUpdateProfile/' + this.userdetails.id).subscribe((data) => {
console.log(data);
}, error => {
console.log(error); });
}
});
}
async imageuserchoose(sourceType){
const options: CameraOptions = {
quality: 76,
sourceType: sourceType,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true,
correctOrientation: true,
}
this.camera.getPicture(options).then((imageData) => {
if (sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
let index = filename.indexOf('?');
if (index > -1) {
filename = filename.substring(0,index);
}
this.file.readAsDataURL(path, filename).then(data => {
this.imagepic = data;
this.userdetailsedit.patchValue({
profile_pic: data,
});
});
}
if (sourceType === this.camera.PictureSourceType.CAMERA) {
let filename = imageData.substring(imageData.lastIndexOf('/') + 1);
let path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
this.file.readAsDataURL(path, filename).then(data => {
this.imagepic = data;
this.userdetailsedit.patchValue({
profile_pic: data,
});
});
}
}, (err) => {
});
}
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Select Image Source',
backdropDismiss:true,
buttons: [{
text: 'Choose From Gallery',
icon: 'images',
cssClass: 'myActionSheetBtnStyle',
handler: () => {
this.imageuserchoose(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
icon: 'camera',
cssClass: 'myActionSheetBtnStyle',
handler: () => {
this.imageuserchoose(this.camera.PictureSourceType.CAMERA);
}
}]
});
await actionSheet.present();
}
}
The problem is that when I am sending the image to the API, it is base64 and I am not able to convert it before sending.
Any help is much appreciated.
Please try this. You can use file transfer Native Plugin for this. It will solve your problem.
In the ts file:
async UpdateUserDetails(){
if(this.imagepic && this.fileUploadName) {
let fileTransfer = this.transfer.create();
let options: FileUploadOptions = {
fileKey: 'profile_pic',
fileName: this.fileUploadName,
headers: {}
}
options.params = {
first_name: this.userdetailsedit.value.first_name,
last_name: this.userdetailsedit.value.last_name,
mobile: this.userdetailsedit.value.mobile,
old_password: this.userdetailsedit.value.old_password,
password: this.userdetailsedit.value.password,
};
this.storage.get('USER').then(userde => {
if (userde) {
this.userdetails = userde;
fileTransfer.upload(this.imagepic, this.apiUrl+'userUpdateProfile/'+this.userdetails.id, options)
.then((data) => {
if(data && data.responseCode==200){
let response=JSON.parse(data.response);
if(response.status === "success"){
this.storage.set('ID', response.data.id);
this.storage.set('USER', response.data);
this.modalController.dismiss();
} else{
loading2.dismiss();
}
}else{
//show error msg
}
}, (err) => {
console.log('upload err ::',err);
});
}
});
}
}
async imageuserchoose(sourceType){
const options: CameraOptions = {
quality: 76,
sourceType: sourceType,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true,
correctOrientation: true,
// allowEdit: true,
}
this.camera.getPicture(options).then((imageData) => {
let filename,path;
this.imagepic = imageData;
if (sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
filename = imageData.substring(imageData.lastIndexOf('/') + 1);
let index = filename.indexOf('?');
if (index > -1) {
filename = filename.substring(0,index);
}
}
if (sourceType === this.camera.PictureSourceType.CAMERA) {
filename = imageData.substring(imageData.lastIndexOf('/') + 1);
path = imageData.substring(0, imageData.lastIndexOf('/') + 1);
console.log(path,'FileName::', filename);
}
this.fileUploadName=filename;
this.file.readAsDataURL(path, filename).then(data => {
this.userdetailsedit.patchValue({
profile_pic: data,
});
});
}, (err) => {
// Handle error
});
}
This will solve your problem.

Cannot read property 'split' of undefined when image upload is empty in ionic

I tried testing my ionic image upload app in browser but since I can not upload image due to cordova_not_available been displayed on the screen, every time I click ed on the upload button this error pop up Cannot read property 'split' of undefined
**
NewpostPage.html:51 ERROR ReferenceError: FileTransfer is not defined at new Transfer (VM1294 vendor.js:149642) at NewpostPage.webpackJsonp.162.NewpostPage.uploadPhoto (VM1295 main.js:601) at Object.eval [as handleEvent] (VM1527 NewpostPage.ngfactory.js:180) at handleEvent (VM1294 vendor.js:13963) at callWithDebugContext (VM1294 vendor.js:15472) at Object.debugHandleEvent [as handleEvent] (VM1294 vendor.js:15059) at dispatchEvent (VM1294 vendor.js:10378) at VM1294 vendor.js:11003 at HTMLButtonElement. (VM1294 vendor.js:39326) at t.invokeTask (VM1427 polyfills.js:3)
**
in my upload.ts i have this
uploadPhoto() {
let loader = this.loadingCtrl.create({
content: "Please wait..."
});
loader.present();
//let filename = this.imagePath.split('/').pop();
console.log('this.imagePath: ', this.imagePath)
let filename = this.imagePath;
let options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "image/jpg",
params: {'location': this.location, 'title': this.postTitle, 'description': this.desc }
};
const fileTransfer = new Transfer();
fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT,
options).then((entry) => {
this.imagePath = '';
this.imageChosen = 0;
loader.dismiss();
this.navCtrl.setRoot(IncidentsPage);
}, (err) => {
alert(JSON.stringify(err));
});
}
chooseImage() {
let actionSheet = this.actionSheet.create({
title: 'Choose Picture Source',
buttons: [
{
text: 'Gallery',
icon: 'albums',
handler: () => {
this.actionHandler(1);
}
},
{
text: 'Camera',
icon: 'camera',
handler: () => {
this.actionHandler(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
//}
actionHandler(selection: any) {
var options: any;
if (selection == 1) {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
} else {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
}
Camera.getPicture(options).then((imgUrl) => {
var sourceDirectory = imgUrl.substring(0, imgUrl.lastIndexOf('/') + 1);
var sourceFileName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
sourceFileName = sourceFileName.split('?').shift();
File.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
this.imagePath = imgUrl;
this.imageChosen = 1;
this.imageNewPath = result.nativeURL;
}, (err) => {
alert(JSON.stringify(err));
})
}, (err) => {
alert(JSON.stringify(err))
});
}
Please help out.
I think i see what you are asking now.
You need to check for undefined and "" before running the code inside uploadPhoto().
uploadPhoto() {
if(this.imagePath !== undefined || this.imagePath !== '') {
let loader = this.loadingCtrl.create({
content: "Please wait..."
});
loader.present();
//let filename = this.imagePath.split('/').pop();
console.log('this.imagePath: ', this.imagePath)
let filename = this.imagePath;
let options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "image/jpg",
params: {'location': this.location, 'title': this.postTitle, 'description': this.desc }
};
const fileTransfer = new Transfer();
fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT,
options).then((entry) => {
this.imagePath = '';
this.imageChosen = 0;
loader.dismiss();
this.navCtrl.setRoot(IncidentsPage);
}, (err) => {
alert(JSON.stringify(err));
});
}
} else {
//do something else
}