IOS open wrong folders

[bachras]

Hi,

thanks for the plugin once again. Android works perfectly fine, but if I try to open images on IOS it opens videos, if I try to open videos it opens songs. Do you know what could be wrong? Thanks

[jibon57]

@bachras you haven't shared your code. Without knowing the code & environment how I will debug?

[bachras]

Sorry for not providing code in the first place. All code is same as in example. Iphone 6, physical device and simulator, iOS 11.

let allowedVideoQualities = [];

if (app.ios) {
		allowedVideoQualities = [AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh]
}



let options: VideoPickerOptions = {
		android: {
				isNeedCamera: true,
				maxNumberFiles: 1,
				isNeedFolderList: true,   
				maxDuration: 20,

		},
		ios: {
				isCaptureMood: false,
				videoMaximumDuration: 20,
				allowedVideoQualities: allowedVideoQualities
		}
};

let mediafilepicker = new Mediafilepicker();
mediafilepicker.on("getFiles",  (res: any) => {

	console.dir(res);
	this.processFiles(res);
})

mediafilepicker.openVideoPicker(options);

[jibon57]

@bachras thanks for details. I can't see anything wrong in your code. Will you please try the demo project of this repo? If you declare this.mediafilepicker = new Mediafilepicker() in your contractor & later use this.mediafilepicker.on() then you will face problem as you have described. But the above code should work fine.

[bachras]

I just created new project installed this plugin and was able to reproduce the problem. Please have a look https://files.fm/u/3xupn6zy Thanks

[jibon57]

@bachras thanks for sample file. I found one typo mistake in main repo here:

nativescript-mediafilepicker/src/mediafilepicker.ios.ts

Line 482 in e3131a9

type: 'image',

... that should be video. But the picker was just fine. I mean it was opened for image & video.

[jibon57]

Archive.zip
Try the latest version of the plugin. It's working fine from my end.

[bachras]

mediapickerrecodring.zip
Here is the recording how plugin acts on my end. Do you have any suggestions? Thanks

[bachras]

@jibon57 I just tried demo app, I can reproduce the issue. Any ideas?

[jibon57]

@bachras I saw the video you have sent to me but I don't have any idea. I ain't sure why it's calling wrong method. I am keeping this issue open but really don't have idea what's going on your devices.

[bachras]

I just tried on different mac machine with different simulator, same issue. So far I tried Physical device iPhone 6 (iOS 11.3.1), iMac's simulator iPhone 6 (iOS 11.4) and Mac Pro's simulator iPhone X (iOS 11.3.1) and all produced same issue.

[dexter2019]

@bachras did you get any help from any where? any work around?

[relez]

Faced same issue here... I hope it gets fixed as soon as posible, its a very useful plugin.

Thanks!

[jibon57]

Hello everyone,

Will you please give me the output of this code from the devices or simulators you are using?

console.log("PHAssetMediaTypeImage => " + PHAssetMediaTypeImage);
console.log("PHAssetMediaTypeVideo => " + PHAssetMediaTypeVideo);
console.log("PHAssetMediaTypeAudio => " + PHAssetMediaTypeAudio);

If get ts error then decare in top of the file like this:

declare const PHAssetMediaTypeAudio, PHAssetMediaTypeImage, PHAssetMediaTypeVideo;

My output is:

CONSOLE LOG file:///app/main-view-model.js:10:20: PHAssetMediaTypeImage => 1
CONSOLE LOG file:///app/main-view-model.js:11:20: PHAssetMediaTypeVideo => 2
CONSOLE LOG file:///app/main-view-model.js:12:20: PHAssetMediaTypeAudio => 3

[bachras]

@jibon57

My output is exactly same as yours.

[dexter2019]

But its working fine for me. Atleast not the wrong folder. I am facing the issue that if i am putting maxium number of files as 4, mediafile picker is still allowing to choose any number of file.

On Wed, 26 Sep 2018 at 11:59 AM, bachras ***@***.***> wrote: @jibon57 <https://github.com/jibon57> My output is exactly same as yours. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#32 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ApHyricUl06OsSfaTbxOqQjkzJBbcttcks5uex7FgaJpZM4WyCH-> .

-- Akash Mondal B.tech (09-13) Indian Institute of Technology Madras,Chennai,India M: +91- 8800757363 ( Gurgaon)

[jibon57]

@dexter2019, that's the iOS native library problem. You can open issue in that repo.

@bachras what's your Xcode version?

[bachras]

@jibon57 Xcode version 9.4.1

[relez]

I am using Xcode Version 10.0 (10A255) just recently updated to macOS Mojave, and I have the same results:

CONSOLE LOG file:///app/model/video.js:12:20: PHAssetMediaTypeImage => 1
CONSOLE LOG file:///app/model/video.js:13:20: PHAssetMediaTypeVideo => 2
CONSOLE LOG file:///app/model/video.js:11420: PHAssetMediaTypeAudio => 3

I deleted node_modules, hooks and platforms folders, built again and I am having same issue. Plugin version is 2.0.11

Thanks!

[relez]

Hi there, I have updated to 2.0.12 and deleted node_modules, hooks and platfoms/ios folders and still opens the Songs list when I try to open the VideoPicker. One thing to notice is that the app asks me first for permission to Access Your Photos, but instead, it opens the Songs folder and asks me one more time, for permission to access Apple Music, your music and video activity, and your media library. Described in the image attached.

I still use the Xcode Version 10.0 (10A255).

Thanks!

[jibon57]

@relez that's expected. You guys are facing problem & I didn't find any problem/solution from my end. Let's try together once again. Please try to implement the methods in your component directly. Like this:

import * as utils from "tns-core-modules/utils/utils";

Now create a method using this code:

let controller = IQMediaPickerController.alloc().init();
controller.mediaTypes = utils.ios.collections.jsArrayToNSArray([PHAssetMediaTypeImage]);
controller.sourceType = IQMediaPickerControllerSourceType.Library;

let app = utils.ios.getter(UIApplication, UIApplication.sharedApplication);
app.keyWindow.rootViewController.presentViewControllerAnimatedCompletion(controller, true, null);

If get typing errors then can declare like this:

declare const PHAssetMediaTypeImage, UIApplication, IQMediaPickerControllerSourceType, IQMediaPickerController;

If you get successful then I will check more details in my code otherwise please open a bug report in NativeScript iOS repo to get more experts help.

[jibon57]

Also run this command:

TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typing" tns build ios

this will create a directory typing. Inside that directory try to find file name like IQMediaPickerController.d.ts. Past the contents here.

[relez]

Hey @jibon57, your code worked as expected. It opens the Albums folder.

I will wait for your plugin update to work directly with the plugin.

Thanks!

[relez]

This is the content of the file:

declare var IQMediaAssetURL: string;
declare var IQMediaImage: string;
declare var IQMediaItem: string;

declare class IQMediaPickerController extends UINavigationController {
	static alloc(): IQMediaPickerController; // inherited from NSObject
	static availableMediaTypesForSourceType(sourceType: IQMediaPickerControllerSourceType): NSArray<number>;
	static isCameraDeviceAvailable(cameraDevice: IQMediaPickerControllerCameraDevice): boolean;
	static isFlashAvailableForCameraDevice(cameraDevice: IQMediaPickerControllerCameraDevice): boolean;
	static isSourceTypeAvailable(sourceType: IQMediaPickerControllerSourceType): boolean;
	static new(): IQMediaPickerController; // inherited from NSObject
	allowedVideoQualities: NSArray<number>;
	allowsPickingMultipleItems: boolean;
	audioMaximumDuration: number;
	captureDevice: IQMediaPickerControllerCameraDevice;
	delegate: any;
	maximumItemCount: number;
	mediaTypes: NSArray<number>;
	sourceType: IQMediaPickerControllerSourceType;
	videoMaximumDuration: number;
	startAudioCapture(): boolean;
	startVideoCapture(): boolean;
	stopAudioCapture(): void;
	stopVideoCapture(): void;
	takePicture(): void;
}

declare const enum IQMediaPickerControllerCameraDevice {
	Rear = 0,
	Front = 1
}

declare const enum IQMediaPickerControllerCameraFlashMode {
	Off = 0,
	On = 1,
	Auto = 2
}

interface IQMediaPickerControllerDelegate extends NSObjectProtocol {
	mediaPickerControllerDidCancel(controller: IQMediaPickerController): void;
	mediaPickerControllerDidFinishMediaWithInfo(controller: IQMediaPickerController, info: NSDictionary<any, any>): void;
}
declare var IQMediaPickerControllerDelegate: {
	prototype: IQMediaPickerControllerDelegate;
};

declare const enum IQMediaPickerControllerMediaType {
	Photo = 0,
	Video = 1,
	Audio = 2
}

declare const enum IQMediaPickerControllerQualityType {
	TypeHigh = 0,
	TypeMedium = 1,
	TypeLow = 2,
	Type352x288 = 3,
	Type640x480 = 4,
	Type1280x720 = 5,
	Type1920x1080 = 6,
	Type3840x2160 = 7,
	TypeiFrame960x540 = 8,
	TypeiFrame1280x720 = 9
}

declare const enum IQMediaPickerControllerSourceType {
	Library = 0,
	CameraMicrophone = 1
}

declare var IQMediaPickerControllerVersionNumber: number;
declare var IQMediaPickerControllerVersionNumberVar: number;
declare var IQMediaPickerControllerVersionString: interop.Reference<number>;
declare var IQMediaPickerControllerVersionStringVar: interop.Reference<number>;
declare var IQMediaType: string;
declare var IQMediaTypeAudio: string;
declare var IQMediaTypeImage: string;
declare var IQMediaTypeVideo: string;
declare var IQMediaURL: string;

[jibon57]

@relez thanks. Everything looks OK. Anyway I have changed the code little bit & published new version. Give a try now. If it doesn't work then try to implement one Injectable class & copy code from mediafilepicker.ios.ts & use it. Or need help from other experts as I can't find any problem & everything is working fine from my side.

[relez]

Hello @jibon57, there is something weird here... it did not work as expected but if I try to pick images according to your code:

let options: ImagePickerOptions = {
        android: {
            isNeedCamera: true,
            maxNumberFiles: 10,
            isNeedFolderList: true
        }, ios: {
            isCaptureMood: false,
            maxNumberFiles: 10
        }
    };
    
    let mediafilepicker = new Mediafilepicker();
    mediafilepicker.openImagePicker(options);

it allows me to pick videos instead of images.

Also looking into your source code, in the openVideoPicker prototype function if I change:
controller.mediaTypes = utils.ios.collections.jsArrayToNSArray([PHAssetMediaTypeVideo]);
to:
controller.mediaTypes = utils.ios.collections.jsArrayToNSArray([PHAssetMediaTypeImage]);

it will allow me to pick the video from the list, but it does not make sense, seems like there is some kind of misunderstanding between PHAssetMediaTypeImage and PHAssetMediaTypeVideo.

My Xcode version is Version 10.0, and I am using an iPhone 8, iOS 12.0

Thanks!

[jibon57]

@relez that's the thing I can't understand. Need support from experts. You can open issue in NativeScript iOS repo & ask support from experts.

[relez]

I have submitted an issue in the NativeScript iOS runtime repository, not sure if its the right place.

NativeScript/ios-jsc#1001

Thanks!

[mbektchiev]

Hi @relez I couldn't reproduce the issue you're facing as well. You said that you've tried deleting node_modules and platforms folders. Can you try to remove them once again, along with package-lock.json. Then update the plugin with its latest version and try once more.

[relez]

Hello @mbektchiev, I did what you suggested and I am still having the issue, I am sharing my piece of code so maybe I am doing something wrong.

let allowedVideoQualities = [];

if (app.ios) {
    allowedVideoQualities = [AVCaptureSessionPreset1920x1080, AVCaptureSessionPresetHigh];  // get more from here: https://developer.apple.com/documentation/avfoundation/avcapturesessionpreset?language=objc
}

let options: VideoPickerOptions = {
    android: {
        isNeedCamera: true,
        maxNumberFiles: 2,
        isNeedFolderList: true,
        maxDuration: 20,
    },
    ios: {
        isCaptureMood: false,
        videoMaximumDuration: 10,
        allowedVideoQualities: allowedVideoQualities
    }
};
let mediafilepicker = new Mediafilepicker(); 
mediafilepicker.openVideoPicker(options);

mediafilepicker.on("getFiles", function (res) {
    let results = res.object.get('results');
    alert(JSON.stringify(results));
})

This piece of code is inside a class which I call VideoUploader and inside an angular component I just instantiated the class and call the uploadVideo method.

Any suggestions? Thanks!

[relez]

Can you guys share your package.json file to compare versions? This is mine:

{
  "description": "Test app",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.mydomain.testapp",
    "tns-ios": {
      "version": "4.2.0"
    },
    "tns-android": {
      "version": "4.2.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~6.1.0",
    "@angular/common": "~6.1.0",
    "@angular/compiler": "~6.1.0",
    "@angular/core": "~6.1.0",
    "@angular/forms": "~6.1.0",
    "@angular/http": "~6.1.0",
    "@angular/platform-browser": "~6.1.0",
    "@angular/platform-browser-dynamic": "~6.1.0",
    "@angular/router": "~6.1.0",
    "moment": "2.22.1",
    "nativescript-angular": "~6.1.0",
    "nativescript-appversion": "^1.4.1",
    "nativescript-background-http": "^3.3.0",
    "nativescript-barcodescanner": "^2.7.8",
    "nativescript-camera": "^4.0.2",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-directions": "^1.2.0",
    "nativescript-drawingpad": "^3.0.3",
    "nativescript-drop-down": "^4.0.1",
    "nativescript-email": "^1.5.3",
    "nativescript-feedback": "^1.2.0",
    "nativescript-geolocation": "^4.3.0",
    "nativescript-imagepicker": "^6.0.3",
    "nativescript-iqkeyboardmanager": "^1.3.0",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-modal-datetimepicker": "^1.1.4",
    "nativescript-numeric-keyboard": "^4.0.2",
    "nativescript-orientation": "^2.2.1",
    "nativescript-pager": "^8.0.2",
    "nativescript-pdf-view": "^2.0.1",
    "nativescript-phone": "^1.3.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-calendar": "~3.8.1",
    "nativescript-ui-chart": "~3.8.0",
    "nativescript-ui-listview": "~3.6.1",
    "nativescript-ui-sidedrawer": "~4.3.0",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~6.2.0",
    "tns-core-modules": "^4.2.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@nativescript/schematics": "~0.2.5",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "rc",
    "codelyzer": "~4.3.0",
    "typescript": "~2.7.2",
    "webpack": "~4.6.0",
    "webpack-cli": "~2.1.3",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-sources": "~1.1.0",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.5.1",
    "raw-loader": "~0.5.1",
    "css-loader": "~0.28.11",
    "nativescript-worker-loader": "~0.9.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "@angular/compiler-cli": "~6.0.0",
    "@ngtools/webpack": "~6.0.3",
    "@angular-devkit/core": "~0.6.3",
    "resolve-url-loader": "~2.3.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11"
  }
}

I hope it helps...

[relez]

I just found out that in my projects I am using Angular, the demo is written using Nativescript Core, is there any reason it opens the right folders if I am using Angular?

Thanks!

[mbektchiev]

@relez I created a new project and took your package.json file. It doesn't have a dependency to nativescript-mediafilepicker and as a result the app crashed at runtime with:

JavaScript error:
file:///app/tns_modules/tns-core-modules/ui/builder/builder.js:244:56: JS ERROR Error: Building UI from XML. @file:///app/app-root.xml:1:1
> Could not find module 'nativescript-mediafilepicker'.

Afterwards I installed the latest version with tns plugin add nativescript-mediafilepicker and took your code from (here)[https://github.com//issues/32#issuecomment-428611884]. It works as expected and I still can't reproduce the issue...

Can you send the output of npm ls and check the contents of package.json? It seems that the one you've sent is not correct or maybe I'm missing something...

[relez]

Hi @mbektchiev, thanks for your reply. I took a moment to think what might be the problem and I thought I must have had an outdated or missing package for iOS. I just installed xcode-select --install and deleted node_modules, hooks and platform/ios and seems to be working as expected now.

Thanks for the help!

@jibon57, from my side, you can close this thread, thanks this is an amazing plugin!

[marcuschoong]

@relez , I did the same as mentioned but its not working as well. When i select "open ImagePicker" it will open the Albums but it loading the videos instead of image.

Following is my package.json
{
"nativescript": {
"id": "org.nativescript.demo",
"tns-android": {
"version": "4.2.0"
},
"tns-ios": {
"version": "4.2.0"
}
},
"dependencies": {
"nativescript-mediafilepicker": "file:../src",
"nativescript-theme-core": "^1.0.4",
"nativescript-unit-test-runner": "^0.3.4",
"tns-core-modules": "^4.2.0"
},
"devDependencies": {
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-jasmine": "^1.0.2",
"karma-nativescript-launcher": "^0.4.0",
"nativescript-css-loader": "~0.26.1",
"nativescript-dev-typescript": "~0.7.2",
"nativescript-dev-webpack": "~0.15.1",
"tns-platform-declarations": "^4.2.0",
"tslint": "~5.4.3",
"typescript": "~2.8.2"
},
"scripts": {
"build.plugin": "cd ../src && npm i && npm run build",
"ci.tslint": "npm i && tslint --config '../tslint.json' 'app//*.ts' --exclude '/node_modules/**'"
}
}

[jessecrossen]

I've been having this problem as well, and I've experimented with launching IQMediaPickerController from my code. At first it seemed that there might be a marshaling problem with the list of media types, so I tried matching the expected type as closely as possible by doing the following:

const controller = IQMediaPickerController.alloc().init();
controller.sourceType = IQMediaPickerControllerSourceType.Library;
controller.mediaTypes = NSArray.arrayWithObject(NSNumber.numberWithInteger(PHAssetMediaType.Image));

I think this is more correct than using jsArrayToNSArray, which expects an array of strings, but it's a moot point since this approach exhibited the same problem. However, if the mediaTypes property is not set at all, only images are shown, presumably because of the fallback here: https://github.com/hackiftekhar/IQMediaPickerController/blob/master/IQMediaPickerController/IQMediaPickerController.m#L78

As a quick fix, you could consider just deleting this line: https://github.com/jibon57/nativescript-mediafilepicker/blob/master/src/mediafilepicker.ios.ts#L38 , but imo it would be better to understand why this is failing, and I'm having trouble figuring that out.