Taking a photo and uploading to google cloud services on a phone - javascript

I am working on a project where I need to upload an image to google cloud services..
The question is what are the steps that you take to upload an image to google cloud services in the web browser, I would prefer to upload it directly to google cloud services on the client side rather than uploading to my webserver and then uploading to google. Seems like that would take too many steps.
A little background is that this will take place in a mobile web browser..
Steps:
- A user will take a photo after clicking a button that launches their camera
- They will click save and the image will be uploaded directly to google cloud services, which will return a given id for that image to be stored in a table
I have read google cloud services documentation, yet primarily the information I found was related directly to android/ios for storage. I understand that you cannot upload an image using ajax, yet you can do it within an iframe. Is it possible to get the image binary data and convert it to base64 and then upload that string to google cloud services in order to store the data?
TLDR:
- What are the steps in order to upload an image to google cloud services?

In google App engine it is possible to upload image by converting to base64 but you will need to convert it again into binary blob type from base64 to store it.
It is possible to upload a image directly to google app engine just by using a single html form having <input file="" name="fileupload"/> on client side. Endpoint will be the servlet address on google appengine which handle this form request.
On the server side toy just need to get parameters of submitted form. Assign parameter named fileupload into blob type and then save using entity or in resource.
update: Submitting a from is possible through ajax without reloading but simple jquery/javascript don't support form submission which has input tag of file type therefore, a jquery plugin used to do this :
Ex:
$(function() {
$('#submitForm').ajaxForm(function(result) {
// Do some DOM operation like hiding loader
}).submit();
});

Related

What is best way to send images to Rest API?

I am trying to build a React app which sends an image to an Rest API and returns a processed image.
What is the best way to send images through Rest API ?
My current assumption is using "base64" encoding to send images as strings,but the size of my images will be around 5-10MB and I dont think base64 will cut it.
Please help me out here,I am build the front-end using ReactJS & NodeJs,the Rest API will be build using python Flask or FastAPI.
You shouldn't be sending the images this way at all. The rough approach might be to upload images to some storage (S3 or whatever), then use API just to communicate the reference to that image (id, URI). Basically, you just need to send the info about who uploaded the image (user id) and where it is stored (filesystem path of the image, S3 reference, etc.), then you'll be able to relate the two entities and handle the images processing separately.
If file size is greater then you can use FineUploader, using fineuploader file can upload in chunks.

Upload, store and load images

I have a fundamental question. I'm working on several projects developing backend and frontend with node, react and react-native. Sometimes I have to upload, store and reload images. I found a way to upload images to a cloud service and load them later in my frontend. But now I have the situation that I don't want to store the images in a cloud service instead I want to store the images in my own database. Since I use a framework in my backend that don't support types like BLOB the only way to store a image is to convert the image to a string like base64. Now I'm facing some problems:
Images above 2MB seems to be too large
If I send a POST request to store a image I get an error that the payload or something like this is too large
If I try to console log my base64 string the browser often hang up
If I try to copy paste the base64 string for example in a JavaScript file as a comment it don't shows me the full string instead I found at some point a ...
So it seems to me that this approach is not fitted for real world applications. So what I want to ask is, how big players handle this Image workflow? For example if I open instagram or a shopping app, this apps maybe loads hundreds of images in seconds. Or if I upload a image to instagram, how is this done in the background? Do they convert the images to string?
I already failed by sending a simple POST Request with a image of 5Mb size converted to a base64 string.
Thank you in advance for some helpful tips.

Google storage transfer service with Twilio

I am working with google cloud storage transfer service to transfer data from twilio recording url to google cloud bucket. While implementing above thing I came to know that to transfer a file from url you must have a md5 hash of that object.
Now twilio doesn't provide me with the md5 hash value.I wanted to ask is it possible to do above thing and also along with that is there any other way to transfer the content of a url to directly on google cloud bucket.
Also I don't want to use my server for a very long amount of time it has to be quick like schedule so that i can track it or some kind of callback when it will get completed.
Twilio developer evangelist here.
It looks like whatever you do, you're going to need to download the recording files to your own server at some point during this process.
You could loop through the files, download them and generate the md5 hash for each of them, then discarding the file but creating the TSV of URLs and hashes as you go.
But, if you do that, you've done half the work in downloading the file, so you might as well continue to upload the file to Google Cloud Storage from that point, using gsutil or the JSON API.

Uploading to Google Cloud via an asp.net webpage

I have a webpage through which my users, using a mobile phone, can take pictures and upload them (hopefully) to the Google Cloud (I've got a JSON file, a platform project and an associated storage bucket, as well as all the login details).
However, I'm pretty new to all this and need to know how I'd get the file (coming from a standard <input file="" name="fileupload"/> ) to the Google Cloud space, and also to retrieve the URI of the file. Given that it's an asp.net webpage, I have access to Javascript and C#.
Thanks!
I have a couple of suggestions for you. We have other customers that have solutions which are similar to this architecture and so your proposed solution is good.
Google Cloud Storage (GCS) has a feature called Signed URLs. This allows you to generate a secure URL to an object in a GCS bucket. My colleague wrote the C# sample for this:
https://cloud.google.com/storage/docs/access-control#signing-code-csharp
There's a method in here that you can reuse GetSigningURL.
Each time a user requests the web page, you should generate a Signed URL and use this as the destination URL for the file upload location in your HTML.
If your HTML is generated by ASP.NET (MVC, Web Forms, Web Page), then you can make the call to GetSigningURL when the page is generated server-side. If not, you should wrap the C# code in a Web API and then you could use, e.g. jQuery ($.ajax), to call it from your client.
You may run your ASP.NET code on Google Cloud Platform using either Windows on Google Compute Engine or using Custom Runtimes on Google App Engine.
Full disclosure: I'm a Googler working in cloud as a Strategic Customer Engineer.

Can you upload files on a Comet/APE environment?

In a simple chat example using an APE Server and JavaScript on the client side which is pushing/polling information, is it possible to allow one user to upload a file (for example an image) and make the other users see that uploaded image, all in real time?
Thanks.
Comet applications are generally used for text-based messaging. You could feasibly encode the image and send that data over the wire but the best practice would most likely be:
User uploads the image to the application using normal web app file upload functionality
Server receives the file, in addition to some instruction about telling other users about the file, and triggers and event information the other users that a new file is present. This event should also include the location of the file
The other users receive the update, access the file location and then display the new file in the application
If 3. were a web app then you could dynamically create a new image an set the src attribute on it e.g. <img src="path_to_new_image" />.

Categories

Resources