new CameraView photo upload server.

How-to Discussions
1

I want to use the new CameraView example to upload files to the server.

There were some problems, and I tried several things but failed.

  • The preview screen is black.

By the way, if filePath which is the result of [photo.save] is displayed by .

(However, the new example works fine.)

  • I want to upload to the server using [fetch].

FileReader, Storage, etc. were used as the filePath value, but no results were found.

So I do not know how to fill in the upload () function at the moment.

<Page ux:Class="PhotoPage">

<Router ux:Dependency="router" />

<JavaScript>
let Observable = require('FuseJS/Observable');
var Storage = require('FuseJS/Storage');
var FileSystem = require("FuseJS/FileSystem");
let Camera = _camera;
let fileFullPath = Observable();

function init() {

	Camera.setCaptureMode(Camera.CAPTURE_MODE_PHOTO)
	.then(function(newCaptureMode) { console.log('ok!') })
	.catch(function(error) { /* failed */ });

	Camera.getCameraInfo()
	.then(function(info) {
		console.log("captureMode: " + info[Camera.INFO_CAPTURE_MODE]);
		console.log("flashMode: " + info[Camera.INFO_FLASH_MODE]);
		console.log("cameraFacing: " + info[Camera.INFO_CAMERA_FACING]);
		console.log("supportedFlashModes: " + info[Camera.INFO_SUPPORTED_FLASH_MODES].join());

		// captureMode.value = info[Camera.INFO_CAPTURE_MODE];
		// flashMode.value = info[Camera.INFO_FLASH_MODE];

		if (Camera.INFO_PHOTO_RESOLUTIONS in info) {
			var availableResolutions = info[Camera.INFO_PHOTO_RESOLUTIONS];
			availableResolutions.forEach(function(e) {
				console.log(e.width + "x" + e.height);
			});
			photoResolution = availableResolutions[Math.floor(availableResolutions.length * 0.4)];

			var options = {};
			options[Camera.OPTION_PHOTO_RESOLUTION] = photoResolution;

			Camera.setPhotoOptions(options)
				.then(function() {
					console.log("New photo options set: " + JSON.stringify(options));
				})
				catch(function(error) {
					console.log("Failed to set photo options: " + error);
				});
			}
	})
	.catch(function(err) {
		console.log("Failed to get camera info: " + err);
	});

}

	init();

	function capturePhoto() {
		Camera.capturePhoto()
			.then(function (photo) {

				photo.save()
					.then(function(filePath) {
						console.log("Photo saved to: " + filePath);
						photo.release();
						upload(filePath);
					})
					.catch(function(error) {
						console.log("Failed to save photo: " + error);
						photo.release();
					});
			})
			.catch(function (error) {
				console.log("Failed to capture photo: " + error);
			});
	}


	function upload(filePath) {

          // upload to server using fetch

	}

	module.exports = {
		capturePhoto,
		gotoBack : function() {
			router.goBack();
		}
	};
	</JavaScript>

	<DockPanel>
		
		<Panel Dock="Bottom" Height="90">
			<Grid Columns="1*,1*,1*">
				
				<Circle Grid.Column="1" Width="70" Height="70" Color="Yellow" Margin="10">
					<Image File="../../../assets/icons/ico_camera_w_64.png" Width="32"/>
                                        <Clicked Handler="{capturePhoto}"/>
				</Circle>

			</Grid>

		</Panel>

		<Panel Dock="Fill">
			<CameraView.PhotoLoaded PhotoCaptureImageSource="_photoCaptureImageSource">
				<Set _cameraPreview.Visibility="Visible" />
				<Set _nativeViewHost.Visibility="Hidden" />
			</CameraView.PhotoLoaded>
			<Panel ux:Name="_cameraPreview" Visibility="Hidden">

				<Panel HitTestMode="LocalBoundsAndChildren" Alignment="Bottom" Width="72%" Margin="0,0,0,8">
					<Rectangle Layer="Background" CornerRadius="8" Opacity="0.65">
						<SolidColor Color="#fff" />
					</Rectangle>
					<Clicked>
						<Set _cameraPreview.Visibility="Hidden" />
						<Set _nativeViewHost.Visibility="Visible" />
					</Clicked>
					<Text Value="DISMISS" Margin="4" TextColor="#000" Alignment="Center" />
				</Panel>

				<Image StretchMode="UniformToFill">
					<CameraView.PhotoCaptureImageSource CameraView="_camera" ux:Name="_photoCaptureImageSource"  />
				</Image>
				
			</Panel>
			<NativeViewHost ux:Name="_nativeViewHost">
				<CameraView ux:Name="_camera" PreviewStretchMode="UniformToFill" ClipToBounds="true" />
			</NativeViewHost>
		</Panel>

	</DockPanel>
</Page>

These are the methods used to read filePath.

Storage.read(filePath)
	    .then(function(contents) {
	        console.log('content:',contents);
	    }, function(error) {
	        console.log('error:',error);
	    });

content’s output is nothng.

let reader  = new FileReader();
reader.onloadend = function() {
    console.log('onload!!');
}
reader.readAsDataURL(filePath);

‘onload’ is not output.

help me~~ plaese~~~ !!