I am building a meteor app, that allows user to upload images. The images upload are stored in "/tmp/images/" directory in my local system.
How can I display the images from the above directory.
So far, I have seen displaying images only from "public" directory in meteor. But if I start adding images uploaded by the user in "public", then everytime the user uploads the image, the server will get refreshed.
So I would basically want to display images from "/tmp/images/" rather.
Any idea?
You should also look at CollectionFS. This will let you use different storage adapters as your needs evolve without changing your code. It's a very well done and robust package.
I would advise you to store your images using gridFS:
you will be able to store files bigger than 16Mb.
the files will not "touch" your server, they are directly piped into your database.
you can handle them afterwards like a collection, so you can allow/deny access to it as you see fit.
The only place designed in meteor to store static assets is the public folder. You shouldn't try to put these elsewhere.
If you want to give a try to gridFS, you can use the file-collection package. It is quick and easy to setup.
Alternatively, as advised by #Marius Darila, you can use Nginx to serve static content
As answered by #Michel Floyd, you can also use collectionFS, but, to quote the file-collection package author:
Here's the difference in a nutshell: collectionFS is a Ferrari, and
file-collection is a Fiat.
They do approximately the same thing using some of the same
technologies, but reflect different design priorities. file-collection
is much simpler and somewhat less flexible; but if it meets your needs
you'll find it has a lot fewer moving parts and may be significantly
more efficient to work with and use.
There is no other way to fetch images from another directories outside the project folder. That is the reason Meteor has built "public" directory for us. The path "/" itself indicates the beginning of project folder. Well if you are storing images in locations like amazon s3, then simply hitting the url in the tag fetch the image.
So the bottom line is either u put ur images in public folder or store images in some outside location which can be fetched by simply hitting the image url.
And don't worry about refresh, it does not happen so in production mode. This only happens in development mode.
Related
I'm quite new to the concepts of containers and docker etc. Say I had a simple Angular Javascript application which makes an API call. If this application was an image on dockerhub, could somebody access the projects code? For example, if there was some sensitive information such as a subscription key in the headers, is it possible for anyone to intercept this key?
Very likely it will be available.
However you can use a .dockerignore file.
Place a file with the key somewhere in your project and load it in the code, then add that file to the dockerignore and you will be able to use it safely.
The issue with this approach is that you will need to manually readd the file with the key in every pod.
As the key is in plain text in the code basis, the key will be accessible through a running container. While building a docker image, aou will copy the files to the image. After someone has started the docker image as a container, he can access the code via an interactive session.
To overcome this problem, you can add the key as an environmental variable. Either by using ˋdocker run -eˋ or ˋdocker run --env-fileˋ. In that way you can specify the key when starting the container, so a changed key does not require to rebuild the entire image and no one can see your key accessing the open image on a hub.
On the one hand, anyone who can run a Docker image can see the entire filesystem contents of that image, and in fact they can pretty trivially take over the entire host system. So Docker won't help you protect, for example, third-party API keys.
On the other hand, an Angular application will intrinsically be transferred across the network and run in the end user's browser. That means they will be able to look at the (minified) application source in the browser's debug tools, or just use a tool like curl to download the application themselves.
In this case, that means packaging the application in Docker doesn't really change the security posture of the application: as a browser-based application it's essentially public no matter how you package it on the server side.
I understand that the web takes major security measures to prevent programs from accessing files on client computers. What I want to do is use AJAX or some other functionality to dynamically access file and folder names in my own public directory located in my Github repository to be served on my static Github page.
To give a little insight into the project I am working on I will give this example: say I want to easily add content to my blog and my directory looks like this:
- website (folder)
-- articles.html
-- articles (folder)
--- top-10-diys.txt
--- child-falls-in-well.txt
--- my-biography.txt
--- new-article.txt
When I add "new-article.txt" to the "articles" folder, I do not want to have to edit the corresponding "articles.html" page to add a link to the new article. I simply want AJAX or a similar functionality to get all the file names in the folder and generate links to my articles.
Is this possible? I simply want to create this functionality for my static Github page. Using AJAX is not a necessity, but I would like a pure Javascript or AJAX method.
EDIT:
I have come across two possible options to give me something like what I am looking for.
Option 1: request a directory on my server with AJAX, which will return a full HTML document with links to all the files in the directory.
Option 2: maintain a text file with all the file names in the directory and use AJAX to load all the files on the list.
However there are problems with both these methods. Option 1 requires me to parse out file names from the HTML document. This is not a clean solution, and depending on the server permissions, it may not work at all. I would rather not rely on this hack.
The problem with Option 2 is that it still requires me to hardcode file names into a text document, and so the solution isn't really dynamic. Sure, I'll save some time maintaining each individual link, but I will still have to maintain the text file. On top of that, this just seems like a sloppy solution.
EDIT AGAIN
I came across an option I didn't see before which is to use a Static Site Generator. The one used by Github is currently Jekyll. If I can't find any other way to get what I want on the fly, I may go with an SSG, but it's really not ideal for my purposes. I'm really just including this edit so people with my problem know their options.
I would create a separate Node server API with an endpoint (to be hit from your github pages front-end using AJAX) that fetches the files from that folder and sends them to your front end.
I'm making a simple website in GitHub pages. I have a text file in the /docs folder (I can move though) and I want to change it's content through index.html. I found a lot of back-end solutions but GitHub pages allows static webpages only. Is there a way to do so in static webpage and if so how to do it in javascript?
Since it's static pages, you can't rewrite the hosted file from the front end client. To update the text file contents, you'll need to do it through the github interface, or as a commit into your repository unfortunately
No.
Changing content on the server requires code that runs on the server.
If you could do it with client side code, then every website would rapidly become defaced.
The closest you could do would be to store data on the client (e.g. via localstorage) and then have a script on the page read that data and edit the DOM locally. Obviously, changing the data would change it only for the particular browser and not for all visitors.
There are two answers to your question:
Technically, it is possible to change files on GitHub from a script:
GitHub's API allows you to update files through an HTTP request.
You could use Javascript to modify the contents of a file, and then send a request to GitHub's API to update that file. There are a few libraries that make it really easy to work with the API, but from here you have to figure it out yourself.
Here is the documentation for this: https://developer.github.com/v3/repos/contents/#update-a-file
Conceptually, it sounds like you are doing something wrong. Static webpages are called static because nothing changes. If you want to have dynamic content, you should really look into other solutions.
I'm developing a Chrome App to allow users to create virtual documents that are stored within the app itself, meaning I don't want the users to have direct access to the files.
The reason why this is is because when the app first starts, it's a screen showing previews/thumbnails of all the created files. If I gave users control over where the files were stored, this could be interferred with by having multiple files in various locations.
What I'd like to do is store everything inside of the app. If possible, I'd like to use JavaScript to create, modify, and edit files within the packaged app, not through the user-accessible file system. Is there any way to dynamically add files and folders to a packaged app using JavaScript?
If not, what are my options for a controlled system in which users cannot move their files to a different directory to keep my thumbnails/previews intact?
You only have read-only access to your package directory.
For an isolated virtual filesystem specific to your app, you should use the HTML5 Filesystem API. Yes, it has a big warning regarding its status, but it's the basis of Chrome's own APIs so it is not going anywhere in Chrome.
You should carefully consider though if it's really the best experience for your users. The good part though, if you ever wish to allow to use a location on the real filesystem, you don't need to change much - the chrome.fileSystem API simply provides another DirectoryEntry, but the rest of working with it is pretty much the same.
I have a huge set of JavaScript files that need to be added to the App cache. Is it possible to add an entire folder(JS folder) in the Manifest. Else, I'll have to manually add those JS files to the manifest.
Your manifest file doesn't need to be a static file. Just write some server side code to generate a manifest based on the files in the folder.
As Maurice has pointed out, you can generate the file dynamically.
Or better still, have a background task do the work when the contents of the folder changes.
Node.js is good for this if you are already familiar with JS and have control over the server so that it can be installed. Node comes with capabilities for watching files and folders & there are a number of libraries available to make the job simple.
One key issue to watch out for though is the combined size of the files. Many browsers that support HTML5 offline use, put strict limits on the amount of data you can store offline. Typically the default limit is 5MB.