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

**URL:** <https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019>\
**Category:** How-to Discussions\
**Created:** [November 19, 2017, 6:12pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019 "2017-11-19T18:12:10Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 19, 2017, 6:12pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/1 "2017-11-19T18:12:10Z")

</div>

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

```auto
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)

```auto
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();
});

```

```auto
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.

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

```

In this part,  
output :

```auto
{"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?

---

<div class="post-metadata">

**Author:** ![Ahmed\_Diab](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ahmed_diab/32/692_2.png) [@Ahmed\_Diab](https://forums.fusetools.com/u/Ahmed_Diab)\
**Post date:** [November 19, 2017, 6:39pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/2 "2017-11-19T18:39:01Z")

</div>

Hi expellee,

Its very easy, just use this mechanism

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

Best,  
Ahmad

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 19, 2017, 7:04pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/3 "2017-11-19T19:04:18Z")

</div>

this camera is old version.

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

---

<div class="post-metadata">

**Author:** ![Ahmed\_Diab](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ahmed_diab/32/692_2.png) [@Ahmed\_Diab](https://forums.fusetools.com/u/Ahmed_Diab)\
**Post date:** [November 19, 2017, 7:05pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/4 "2017-11-19T19:05:26Z")

</div>

Yes, but you have to read link carefully

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 20, 2017, 1:25am UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/5 "2017-11-20T01:25:58Z")

</div>

The way I’ve used it is …

1. 

```auto
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);
});

```

1. 

```auto
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?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 20, 2017, 10:45am UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/6 "2017-11-20T10:45:16Z")

</div>

`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.

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 20, 2017, 12:50pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/7 "2017-11-20T12:50:12Z")

</div>

- 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.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 20, 2017, 12:52pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/8 "2017-11-20T12:52:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 20, 2017, 1:12pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/9 "2017-11-20T13:12:23Z")

</div>

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?

```auto
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);
});

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 20, 2017, 1:19pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/10 "2017-11-20T13:19:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 20, 2017, 2:43pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/11 "2017-11-20T14:43:11Z")

</div>

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](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:

```auto
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.

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

```

[provided source]

```auto
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.

```auto
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 });]

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 20, 2017, 3:09pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/12 "2017-11-20T15:09:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 20, 2017, 3:33pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/13 "2017-11-20T15:33:44Z")

</div>

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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/1eHE8C2deMSD-image-1511191817003.zip)

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 21, 2017, 1:19pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/14 "2017-11-21T13:19:57Z")

</div>

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

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

```

We see in the docs that [getBufferFromImage](https://www.fusetools.com/docs/fuse/imagetools/imagetools/bufferfromimageinterface_95a738ba) expects the argument to be of type `Image`. However, [CameraView.capturePhoto](https://www.fusetools.com/docs/fuse/controls/cameraviewbase/capturephoto_62888d26) 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)](https://www.fusetools.com/docs/fuse/filesystem/filesystemmodule/readbufferfromfile_95a738ba) 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:

```auto
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);
		});
}

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [November 22, 2017, 10:39am UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/15 "2017-11-22T10:39:59Z")

</div>

@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.

```auto
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);
		});
}

```

---

<div class="post-metadata">

**Author:** ![expellee](https://avatars.discourse-cdn.com/v4/letter/e/3be4f8/32.png) [@expellee](https://forums.fusetools.com/u/expellee)\
**Post date:** [November 23, 2017, 4:28pm UTC](https://forums.fusetools.com/t/how-do-i-upload-photo-file-to-the-server/1019/16 "2017-11-23T16:28:55Z")

</div>

thank you!!! thank you!!!

very nice solution!!

have nice day~!