I am using basically the mean stack. I'm also using multer but I am trying to see what the best practices are. Using Angular I can upload photos fine and they are going to a folder on my file system. From here I can just view them. However I'm wondering what the best practices are. Should I save the image url to a database along with the size and other properties or should I just pull them from the client? I've seen some solutions but they were from about 2 years ago so I wanted to make sure I'm current.
I have used ng-file-upload upload on the angular part and Multer on the node.js part to handle images for my system.
The method is appropriate and you can go ahead without any doubt.
Most of the websites on the internet follow the same method, they save the images in the file disk system and then they save it's url in the respective database.
Using multer you can have all information required for a photo and the module is really flexible with a lot many options.
I think you should go ahead with what you have in mind. Best of luck.
You just save the image url from the directory, where image is stored. If you need any information, you can get the information from the image where image is stored (Get image from url). So just save image url into database.
Related
Hi I’m building a front end web app using reactjs, my app will map over different array of dogs/cats/animals with multiple props and a couple images each. The ui has a search box which then filters out relevant animals.
My question is if my list were to get quite large, do I need to have it stored in a back end ? Or can it all be stored in front end, there will be no sensitive information or anything. So im not worried about security. I do not need to receive any information from the users. Basically it’s just a website for people to browse through.
And my second question. Once deploying to a host, Im currently leaning towards AWS. Is updating/adding/subtracting from my arrays simple as deleting the file and adding the new one into the bucket ??
Sounds exciting! But let's first back up a bit, and take stock of what we're trying to do. Essentially: we want an app that will show a bunch of images with functionality (e.g. filtering).
All images/photos (e.g. this cat photo) are hosted somewhere. Period. So, you can be the one responsible for hosting the images, or you could just have <img /> tags in your react app and refer to an existing img src links, where the image sources are being hosted by someone else.
So to answer your question: my question is if my list were to get quite large, do I need to have it stored in a back end ?
Not necessarily - if you're just referencing a bunch of images from a site that someone else is already hosting, then you're good.
As for this point: Or can it all be stored in front end, there will be no sensitive information or anything.
This question is kinda hard to answer, because nothing is really ever 'stored' in the front-end (let's ignore caching). Images live on the server, and the client (e.g. your chrome browser) makes requests to the server to get the images.
Now: if you want to upload your own photos or let users upload their photos. That's a very different story.
You would want to use s3 buckets. They could host your images.
However, based upon your post, I really think you should start step-step, and not host your own images (i.e. not have a backend), and instead just start by using images already on the internet. Good luck :)
I want to upload the image in my website. The same image will be shown in another website. So this is the scenario where image is uploaded in one website and displayed in both website. These two websites are hosted in two different servers as well as they both have their own database.
I am using Angular JS, Entity Framework, Web API and SQL Server 2014 as backend for both of the website. Currently I am using ngFileUpload to upload the images. Please answer me on below questions:-
Should I upload the image in database(as nvarchar-max) or filesystem(FTP or local web server file system)? I read many articles and get to know that Database retrieval of image has affect on performance but it is more secured. However File System is easy in performance but complex on maintenance like back ups. So I am just not able to decide which to choose among these two as both have pros and cons. Which option will be more suitable to my requirement where same image will be displayed in both website. Please note that there can big images like upto 5 MB uploaded in the application but the number of images will not be huge as compare to any social networking or online shopping site.
How to create different size of images(thumbnail, medium, large etc) automatically upon uploading of image in website? Is there any tool or directive already available in Angular JS to achieve this?
I know my question is broad but I need suggestion to start with my requirements.
Please help.
I use the file system to host my images. If the image is displayed on someone's computer screen, they can use an image capturing software to copy it anyway. Also, while storing them to a database may be more secure, I don't need the extra overhead in my code where a simple url to retrieve the image will suffice.
As for resizing an image using Angular, check out these links:
https://www.scientiamobile.com/page/angular-image-resize
https://github.com/FBerthelot/angular-images-resizer
I am working on a web app and I want to serve users some of their own pictures that I will have stored in a database. I have a profile page view were I have some jade template. I want to load the users pictures when they click on their profile but I do not know where to start with that (I am relatively new to node). I have tried using google but no useful answers have come up. How can I load the user specific pictures from a database using nodeJS?
Any help is appreciated, thank you.
Never store image into db. It's wrong. Store path, url or other, but not Image Binary.
Retrieve url that you have stored into db and put them into your final html.
M.
In the cakephp 2.0 application i'm developing i will need a HABTM relationship between a table with "normal" data and one with stored images.
After a search, i came to conclude that the best way of implementing this was to store the images in the directory of the application, and in the table "images" a reference to the url of each image so that i can display them later on the application. Please, if you think this is not the best implementation please say so.
Looking into this, i would like to know how can i do this, i mean, how can i store the images on directory and store a reference in a database in the same function of a controller?
I did some searchs but i found only uploading to folders or only storing the images on database.
Thank you!
My FileStorage plugin https://github.com/burzum/FileStorage in combination with the https://github.com/CakeDC/Imagine plugin will exactly do what you want.
All file data is stored in the database, the files itself in the local file system or any of the other adapters. It's also handling generating versions of the image after upload.
Read the readme.md it is exactly doing what you want and I'm already using it in different projects, also for a gallery and user avatars.
I am writing a program in C that acts like a proxy server in a Linux system: Client asks it for a web page,
it sends an HTTP GET Request to a distant server, and it gets the servers response (web page), which is saved in an .html file.
Here goes my problem: Most web sites got some references to images, so when i try to view the .html file proxy created, the images don't appear.
I have searched a lot, but found nothing..Is there a way to write some code to GET images too?
Thank you in advance
You're going to have to write code that parses the HTML file you get back and looks for image references (img tags), then queries the server for those image files. This is what web browsers are doing under the hood.
You have an additional problem though which is that the image references in the HTML file are to the original server. I'm assuming that since they don't load for you the server that returned the original HTML isn't available. In that case after you get each image file you will need to give it a name on the local filesystem and then alter the reference in the HTML (programmatically) to point to your new local image name.
So for example:
<img src='http://example.com/image1.png'>
would become
<img src='localImage1.png'>
If you're querying arbitrary websites then you'll also find that there are various other files you'll need to do the same with like CSS files and JavaScript files. In general its hard to mirror arbitrary web pages accurately - browsers have complex object models they use to interpret web pages because they have to deal with things like CSS and Javascript and you may need to be able to 'run' all that dynamic code to even be sure what files to download from the server (e.g. JavaScript including other JavaScript etc).