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" />.
Related
I am using next js with supabase for my backend and I was wondering if there is an efficient way to achieve this on the client side, usually I would simply call a method from my client to upload selected media. At the moment supabase don't have anything built in to automatically create thumbnails when you upload a video.
I know that there are some node js libraries that could create thumbnail images from video, however I have few questions:
Next js api routes are limited to 4MB, so that wouldn't work anyways?
I would have to create a server just to handle thumbnail creation, so I could be sending 500mb worth of data just for the sake of capturing a thumbnail and then doing another call to upload that video to my storage.
Are there any alternatives to handle this issue with next js app?
On my website I let registered members create multiple profiles, each of these with their own avatar picture.
On the Create Profile page, I have this input to submit the avatar...
... and get it displayed on the Profile page:
How can I recreate the same, uploading one more picture from Create Profile and display it on Profile page?
I know where the source files for each page are located, but unfortunately I’m unable to recreate it..
Thanks.
You need a 3 step process to upload the image file, store it and send it to the front-end users.
If your app is an SPA and you don't want to reload the page in the user's browser, you'll need a JS process to read the file from a file button and send it to your server (through AJAX as a FormData object for example)
Then your server should be able to handle the formdata object request and read file content from it. Once done, you have to save it in a secure server-side location.
Finally (again in case of an SPA) your server should be able to answer the picture data when the client asks it
The server should be able to give the avatar's URL when asked by the client (with a Restful API for example)
The server should be able to give access to the image when the client uses the image's url
I'm having a hard time figuring out how to approach file uploads in atom electron. I would post code but I don't even know where to begin with this one.
In a standard web app I would post from the client to the server, either via a standard postback or using an ajax request. I have some pretty cool solutions for that. But in the case of electron, I'm not sure where or how to "post" the file back. I guess I just want to access the contents of my <input type='file' /> from node.js. How do I do this?
I could post to the browser process, but I don't know what the "address" would be. Or do I need to create a separate "page" in my app just to accept form posts? My background in web-dev is probably blinding me to some obvious answer, can someone help?
EDIT
Just to add a little more context, I have a .csv file which I'd like to allow the user to upload. I will then process this using node-csv and insert each returned row into the app's nedb datastore.
If you're going to process the file on the user's machine then there is no need to upload the file anywhere, it's already exactly where you need it. All you need to do is popup a dialog to allow the user to browse their file system and select the file they want your app to process. You can create a button and call dialog.showOpenDialog when the user presses it, that will get you a filename and you can then use Node's fs.readFile to read it from disk, then you can go ahead and process the contents in whichever way you want.
I have an app that runs in the client browser and doesn't have any server side (http/js is served, but nothing posts to the server). the app is redeployed on many servers (iis, apache, nginx, sometimes localhost, sometimes on an intranet) and are served using http (not https). My app generates files such as zip files and pdf's in the clients browser as blobs BEFORE I want to save, so having them navigate away on the same page then back to the app defeats the purpose; and I can't post the generated data to dropbox anymore, since they have to start over... I want to be able to send these blobs directly to files in the end users dropbox (and later google drive).
https://www.dropbox.com/developers-v1/dropins/saver performs exactly as I would like. It pops up. It lets the user authenticate in the popup. It lets the user choose where they want to put my file. But I can't send it a data uri, or base64-encoded data, or a bytearray, or whatever. It only works with files previously saved somewhere accessible on the net. So it does not work for me.
https://www.newfangled.com/direct-javascript-dropbox-api-usage/ shows how I could embed the oauth data, which I don't have.
https://blogs.dropbox.com/developers/2013/12/writing-a-file-with-the-dropbox-javascript-sdk/ seems like it should work, except that it's trying to perform an oauth session and it uses the same window as my app (which is undesired).
My current tabs I'm looking at (includes entries from a few years ago, so things might have since changed). Some articles indicate that it isn't possible. Other articles incidate that it IS possible - i mean this particular comment https://github.com/dropbox/dropbox-js/issues/144# doesn't help me much. Neither does "I'll be sure to pass this along as feedback" - was it passed along? To whom?
https://github.com/dropbox/dropbox-js/issues/144
https://stackoverflow.com/questions/30094403/save-input-text-to-dropbox
https://blogs.dropbox.com/developers/2015/06/programmatically-saving-a-url-to-dropbox/
How can I upload files to dropbox using JavaScript?
upload file to dropBox using /files_put javascript
https://github.com/morrishopkins/DropBox-Uploader/blob/master/js/reader.js
https://www.dropbox.com/developers/saver
https://www.dropboxforum.com/hc/en-us/community/posts/202339309-Can-I-save-a-JSON-stream-object-to-Dropbox-file-with-Dropbox-Post-Rest-API-
https://github.com/smarx/othw
Can Dropbox Saver accept data from createObjectURL()?
It sounds like the code from https://blogs.dropbox.com/developers/2013/12/writing-a-file-with-the-dropbox-javascript-sdk/ works fine for you, but you want to do the auth in a separate browser window/tab.
If so, I'd suggest just changing that code to use the Popup auth driver instead.
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();
});