How do I upload 'Photo file' to the server?

expellee · November 19, 2017, 6:12pm

I took a picture using a sample of the new CameraView.
(https://github.com/fusetools/fuse-samples/tree/master/Samples/Camera)

console.log ("Photo saved to:" + filePath);

In this part, filePath is [/storage/emulated/0/Android/data/com.apps.testphoto/cache/images/IMG_00097203-27c6-4d3a-9d8e-3e65095c4867.jpeg]

So, I tried to upload this file to the server. (use fetch)

photo.save()
.then(function(filePath) {
	console.log("Photo saved to: " + filePath);
	// fileFullPath.value = filePath;

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

function upload(filePath) {

	FileSystem.getFileInfo(filePath)
	.then(function(fileInfo) {
	    console.log("file was modified on ",JSON.stringify(fileInfo));

	   FileSystem.readBufferFromFile(filePath)
	    .then(function(contents) {
	        console.log(contents);
	    }, function(error) {
	        console.log(error);
	    });
	})
	.catch(function(error) {
	    "failed stat " + error
	});
}

I tried this.

console.log ("file was modified on", JSON.stringify (fileInfo));

In this part,
output :

{"length":28924,"exists":true,"fullName":"/storage/emulated/0/Android/data/com.apps.testphoto/cache/images/IMG_00097203-27c6-4d3a-9d8e-3e65095c4867.jpeg","lastWriteTime":"2017-11-19T17:52:56.000Z","lastAccessTime":"2017-11-19T17:52:56.000Z"}

but,
When reading with [FileSystem.readBufferFromFile], no value could be read.

When using Storage.read, it says that the file does not exist.

I was in confusion. Help me plaese!

How can I upload this captured picture to the server?

Ahmed_Diab · November 19, 2017, 6:39pm

Hi expellee,

Its very easy, just use this mechanism

https://www.fusetools.com/community/forums/permalink/7bfc75f2-a95a-44c4-8da2-f0efe051c735

Best,
Ahmad

expellee · November 19, 2017, 7:04pm

this camera is old version.

Is it the same in a new(1.4) CameraView?

Ahmed_Diab · November 19, 2017, 7:05pm

Yes, but you have to read link carefully

expellee · November 20, 2017, 1:25am

The way I’ve used it is …

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

	return ImageTools.getBufferFromImage(photo).then(function(buffer) {
		return upload(buffer);
	});

})
.catch(function (error) {
	console.log("Failed to capture photo: " + error);
});

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

	photo.save()
	.then(function(filePath) {
		console.log("Photo saved to: " + filePath);

		return ImageTools.getBufferFromImage(filePath).then(function(buffer) {
			return upload(buffer);
		});
			
		photo.release();
	})
	.catch(function(error) {
		console.log("Failed to save photo: " + error);
		photo.release();
	});

	

})
.catch(function (error) {
	console.log("Failed to capture photo: " + error);
});

However, when all the methods [ImageTools.getBufferFromImage] are done, the app is terminated.

What should I do?

Uldis · November 20, 2017, 10:45am

the app is terminated

You should find out why the app crashes. Is it on iOS or Android? Is it preview or build? What is the device you’re testing on? What is the OS (incl. version) of it?

You could open the app in either XCode or Android Studio, and debug it there (shell commands for that are fuse build -tandroid -d and fuse build -tios -d). If there’s a crash, you should end up with a nice stack trace that explains exactly where and why it happened.

expellee · November 20, 2017, 12:50pm

android device preview
android : ver 7.0
device : samsung galaxy s6
windows 10
fusetools 1.4 pro

Which one of the source 1 and 2 is the correct one?

Or tell me how to recommend it. please~

I do not even know if I am coding properly.

Uldis · November 20, 2017, 12:52pm

You need to provide a complete, minimal reproduction that reliably fails. Without one, we can only suggest ways to debug things, not provide solutions.

expellee · November 20, 2017, 1:12pm

OK, I know.

However, I would like to know the basic recommended code even if I debug or re-code.

Is it based on this source?

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

	photo.save()
	.then(function(filePath) {
		console.log("Photo saved to: " + filePath);

		ImageTools.getBufferFromImage(photo).then(function(buffer) {
			upload(buffer); // using fetch
		});
			
		photo.release();
	})
	.catch(function(error) {
		console.log("Failed to save photo: " + error);
		photo.release();
	});

	

})
.catch(function (error) {
	console.log("Failed to capture photo: " + error);
});

Uldis · November 20, 2017, 1:19pm

The “recommended code” is shown in examples. You even linked to an example in your original post.

Ahmed linked another forum post with more code that deals with uploading a photo.

It seems to me that you are all set to go ahead and make it work. If you’re encountering issues, you are welcome to post again with a complete, minimal reproduction that we can copy-paste and run to see the problem.

expellee · November 20, 2017, 2:43pm

I am in the test process of putting it on the server using the sample source.

(https://github.com/fusetools/fuse-samples/tree/master/Samples/Camera)

And it works fine. Wonderful example.

The next thing what I wanted to do is upload to server as below:

fetch('http://<your_uri>', { method: "POST", body: buffer });

create a suitable value for [ buffer ] then upload [ photo ], which is the result of Camera.capturePhoto
(In fact, [ XMLHttpRequest ] is acceptable.)

So the first code I wrote was:

Added below to [ Camera.capturePhoto ] part from the source provided.

ImageTools.getBufferFromImage(photo).then(function(buffer) {
   console.log('ok!');
});

[provided source]

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

( I also added [ Fuse.ImageTools ] to the [ .unoproj ] file and also [ let ImageTools = require(“FuseJS/ImageTools”); ] to the top.)
I used the same method used in the previous version.

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

      ImageTools.getBufferFromImage(photo).then(function(buffer) {
         console.log('ok!');
      });

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

However, a crash occurs at the time of performing [ ImageTools.getBufferFromImage ]

No code has been added to the server yet or any other code has been added.

It was just ran [ ImageTools.getBufferFromImage(photo) ] then it crashes.

So, I wondered if the way in which [ image ] from the existing [ Camera.takePicture ] to promise results and [ photo ] which is the result from this [ Camera.capturePhoto ] is completely different.

Can both be treated equally as [ ImageTools.getBufferFromImage ]?

If I can handle both things the same, why would I crash in my development environment?

In result, please guide me how I can get the [ RESULT_BUFFER ] value from [ fetch(‘http://<your_uri>’, { method: “POST”, body: RESULT_BUFFER }); ]

Uldis · November 20, 2017, 3:09pm

So you say this:

However, a crash occurs at the time of performing [ ImageTools.getBufferFromImage ]

Can you create and share with us a complete, minimal, ready to copy-paste and run example that reliably crashes every time you run it?

expellee · November 20, 2017, 3:33pm

this file is source.

Only the 81-line portion of the [mainview.ux] file has been added, and the rest are in the provided sample file.

Attached ZIP file

Uldis · November 21, 2017, 1:19pm

Alright! Thanks for providing the reproduction, this allowed me to find the root cause of the issue immediately. You had this code:

Camera.capturePhoto()
	.then(function (photo) {
		ImageTools.getBufferFromImage(photo).then(function(buffer) {
			console.log('ok!');
		});

We see in the docs that getBufferFromImage expects the argument to be of type Image. However, CameraView.capturePhoto returns an object of type Fuse.Controls.Photo.

Conclusion is that you can not interchange these and pretend they’re the same. They are not, and you can’t read the buffer of a Fuse.Controls.Photo.

Ultimately though, what you need is to get the buffer of a file (not necessarily an Image). Lucky for you, there is FileSystem.readBufferFromFile(path) which you can use to achieve what you need.

TL;DR: use FileSystem to read the file as a buffer, after you have saved the file:

function capturePhoto() {
	Camera.capturePhoto()
		.then(function (photo) {
			photo.save()
				.then(function(filePath) {
					console.log("Photo saved to: " + filePath);
					FileSystem.readBufferFromFile(filePath).then(function(contents) {
						console.log("read image to buffer: " + JSON.stringify(contents));
					}, function(error) {
						console.log(error);
					});
					photo.release();
				})
				.catch(function(error) {
					console.log("Failed to save photo: " + error);
					photo.release();
				});
		})
		.catch(function (error) {
			console.log("Failed to capture photo: " + error);
		});
}

Uldis · November 22, 2017, 10:39am

@expellee: here’s a complete solution. I didn’t realise that you had looked at reading the buffer, and didn’t find it all that useful.

What you need to do with the buffer object you get, is translate it to something like a string representation. A good way could be to turn it into base64 image data - that’s a simple string to transfer to a backend.

var FileSystem = require("FuseJS/FileSystem");
var Base64 = require("FuseJS/Base64");
// ...
function capturePhoto() {
	Camera.capturePhoto()
		.then(function (photo) {
			photo.save()
				.then(function(filePath) {
					console.log("Photo saved to: " + filePath);
					var arrayBuff = FileSystem.readBufferFromFileSync(filePath);
					var b64data = Base64.encodeBuffer(arrayBuff); // send this to the backend
					photo.release();
				})
				.catch(function(error) {
					console.log("Failed to save photo: " + error);
					photo.release();
				});
		})
		.catch(function (error) {
			console.log("Failed to capture photo: " + error);
		});
}

expellee · November 23, 2017, 4:28pm

thank you!!! thank you!!!

very nice solution!!

have nice day~!

Topic		Replies	Views
new CameraView photo upload server. How-to Discussions	0	448	November 17, 2017
How to upload images to server How-to Discussions	4	1132	February 27, 2017
Convert a picture taken with the camera to a Base64 String How-to Discussions	23	5462	July 14, 2016
Upload a photo from Camera.takePicture How-to Discussions	13	1071	October 24, 2016
Camera photo for firebase storage. How-to Discussions	8	2493	February 14, 2017

How do I upload 'Photo file' to the server?

Related Topics