Here's the scenario: we have a separate app running on a computer (outside of the browser). It creates a folder with 10,000 downloaded thumbnail images.
In the browser, we have a traditional browser app. It lets you browse through these images. In order to speed up the browsing dramatically, I want to let the app get the images from the local drive, if available, ie. img src="C:/..." instead of img src="http://..."
The app can talk to the server, and let it know the path to the images.
I'm trying to figure out how to (lightweight) let the browser know that on this particular computer, we have a folder with images, whereas on another particular computer, we may not.
My best guess so far is have the app write a cookie to the browser. Is that the easiest/most elegant/most lightweight way of doing this?
The app could just add some javascript variable to the page. e.g. for PHP
if($hasImagesFolder) echo "var hasImagesFolder = true;";
else echo "var hasImagesFolder = false;";
Related
I was wondering if it would be possible to save large amounts of data on the client side with node.js.
The data contain some images or videos. On the first page visit all the data should be
stored in browser cache, so that if there is no internet connection it would not have effect on the displayed content .
Is there a way to do this ?
Thanks for your help :D
You can use the Web Storage API from your client-side (browser-side) Javascript.
If your application stores a megabyte or so, it should work fine. It has limits on size that vary by browser. But, beware, treat the data in Web Storage as ephemeral, that is like a cache rather than permanent storage. (You could seriously annoy your users if you rely on local storage to hold hours of their work.)
You can't really get a node.js program itself to store this information, because those programs run on servers, not in browsers. But you can write your browser-side Javascript code to get data from node.js and then store it.
From browser Javascript you can say stuff like
window.localStorage.setItem ('itemName', value)
and
var retrievedValue = window.localStorage['itemName')
window.localStorage items survive browser exits and restarts. window.sessionStorage items last as long as the browser session continues.
Am not saying that i dont know how because i tried it before using multer and it works perfectly fine but the thing is these images get saved to a foldet called uploads with a namd and an id that i generatr using js
What i want to know : is this the propper way of doing it and if so wherr does that folder go to after hosting your website and does it contain alll the images from my website, i mean it will be a really large folder so where does it go to when hosting ??
PS: And another thing whenever i go to youtube or facebook etc i see a domain like i.ytimg.com containing these images so how is that acheived
I don't know if my reply would be helpful, but the way I use it is I save the image in a mongoDB database (Buffer) and just load it from the database.
I currently have a web app made in node.js. One feature of this app is to take notes. I want to provide the user with a way to browse the internet and select a text to add as a note in our web app without having to manually copy-pasting from one browser window to our app.
I know I can do this relatively simply using a Chrome extension that would be linked to the user account and would save the note to the database. However, I cannot use this approach since not all my users can install Google Chrome.
Therefore, I am looking for a way to browse the web from inside our web app. For example, it could be in an iFrame where we display a complete browser. That way, the user could navigate the web for information from inside the app, select text to save and click on a button (probably located outside the iFrame browser) to save the selected text as a note in our database.
How can I achieve such a thing in node.js ?
This is, essentially, impossible.
For you to get any data about the site the user was browsing you could either:
Restrict them to browsing sites willing to partner with you to give you permission to access their data via postMessage (a technical change on their part to work around the Same Origin Policy)
Proxy every request through your server which would:
Have large bandwidth requirements
Require a lot of rewriting of URLs (including dynamically generated ones in JS)
Require rewriting of X-Frames-Options and Access-Control-Allow-Origin headers
Need users who would trust you with all the data you passed through your system (including their passwords to third party sites)
Not work for Intranet sites (since your server could not reach them)
I'm building a react webapp which allows users to upload a picture and then render the thumbnail, just like facebook chat. But I'm not sure what's the best practice to solve the uploading-resizing-generatingThumbnail time gap before I can render them.
The workflow is like:
1) User uploads a picture to S3, stored in bucket1
2) Lambda function invoked, getting the newly uploaded picture and do the resizing work, then store thumbnail in bucket2
3) Thumbnail rendered in browser(client-side). Here it's a bit tricky - I just hardcode the img url because it's predictable, however, it takes a while before available(generating process).
But I don't know how to let lambda notifies the browser when a thumbnail successfully generated and ready to render. In production it might be lambda tells node server first, and then node server tells the client; but in developing mode, it seems impossible as I'm running an express server on my own laptop. Should lambda do the notification in a proper way or there's other better solution?
AWS Lambda cannot "notify the browser" because it is a process that was independently triggered and has no connection with the web page request.
One option would be to code the web page to keep trying to download the image. You'd need some fancy JavaScript/node code that can check whether the image was successfully downloaded and then retry if necessary.
By the way, there are also services that can resize images on-the-fly so you don't have to create your own thumbnails:
Cloudinary
Imgix
I am building a MEAN application (Angular + node + Express + Mongo).
In this app there are users who can upload a limited amount of pictures (lets say 5).
I really want to avoird storing too many data on my server.
So I am looking for a module that let users upload the images to a service such as picasa, imageshack... The service should be transparent to the user.
When it's done, I save the picture URL in my DB and so I can retrieve it and display pictures easily.
Do you know such module / tutorial to do that? Does it even exists?
I have been looking but it seems to not exists.
The easiest way to have a file upload service with AngularJS as the front end and NodeJS as the backend is to use the jQuery File Upload for use with AngularJS, which can be found here.
It makes use of a directive that you can use to upload your file.
You need to specify a route to which the uploaded file should be POST'ed to.
In this route handle, that is in you Node.js server, you can then post it to the external image hosting servers. This is something that you can write on your own or you can use the node.js modules for the respective hosts (if they exist).
I find a service doing it:
http://cloudinary.com/
With a nodejs integration:
http://cloudinary.com/documentation/node_integration
It seems perfect (free up to 500 MO and 50.000 pictures, far enough for my needs).