I have a bootstrap input field for images in my react app. When I upload an image through it, I want to get a public URL of that image so that I could reuse it in another part of the app.
<div class="mb-3">
<label for="formFile" class="form-label">Product Image</label>
<input class="form-control" type="file" id="formFile">
</div>
I've seen people connect to an API like google drive and upload the image to get a kind of shareable link. Is there a way to do that on the client side?
Thanks for the notice :)
Using google drive as a backend is one solution, their API is a good starting point. In general IMHO you want to explore the "serverless" concept. Amazon has a lot of services available in this area.
No, you have to have a publicly accessible system to serve images. That means a server.
I can't think of any way to come close this without involving some kind of 3rd party system/server. Even if you were to do something as involved as a peer-to-peer system of sharing images over WebRTC, you would still need a signalling server to make the initial connection between clients.
The way that apps work with content sharing in a generalized manner is that a user will upload an image on the front-end to some content repository. That could be your own content repository or some 3rd party site like imgur, Google Drive, etc. Once it's uploaded, a link to that publicly available content is stored by your own application and then used in some way such as being shown on a user's content board or profile.
For example, Stack Overflow itself integrates with Imgur so that whenever you need to upload an image to go along with your question/answer it is associated to your post and hosted out of imgur. SO still has to plumb all associated stuff like knowing who uploaded what and what question it's related to where to put it in the post.
Providing a complete solution would be too broad, but a possible, birds eye view could be something like:
Serve front-end however
Serve back-end that has content accepting mechanism (maybe something like Strapi
Hook the front-end up to use the content accepting endpoint
Have a main page that just shows all the images that have ever been uploaded
Bear in mind, that it's rather complicated to do all this and curating content is also a HUGE endeavor whenever you have to deal with people uploading illicit content.
Related
I am building a system which will contain database of images. There are about 1 million of images, 1Tb total size. All images are located in some directory C:/path/to/image/store on local disk.
We do have a rest api and database which contains important info about all those images. user can query the rest api, submit some criteria about those images and they receive a response in form of json object:
{pathToImage="C:/path/to/image/store/data/somedir/abcd.jpg"}
Now we have a React client which needs to display the image.If we put simply:
<img src="C:/path/to/image/store/data/somedir/abcd.jpg">
it will not work. Browser does not allow to display local files. We can bypass it by placing the entire image storage under react public directory and then to refer to files by:
<img src={process.env.PUBLIC_URL + '/image.jpg'}>
but we simply cannot move the directory with images around. It is to big and it is used by other applications as well.
Please do not lecture me that web browsers do not allow displaying images from local filesystem due to security considerations. I am perfectly aware of this - and I do not care. In my use case security is a non-issue. We are not concerned by it. I will not explain why, just take it as a fact: The security considerations why chrome does not allow to display images from local file system do not apply here. Period. We want to display the images.
So here is my question: Is there ANY way to configure React or chrome to tell it: "This directory is public, you can safely serve any images from it to the client"?
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 have a WPF intranet app running in Trusted mode (local only).
I would like the users to be able to upload an image and attach it to an article on my newsletters section. I am having trouble deciding where these images will be stored.
Please provide me with your opinions.
At present I have a few ideas myself;
I could have an aspx page that runs parallel to this app, and run this inside a browser(I-frame). This page could then handle the upload and display of the image.
I could also, have the users copy directly to a network share.
It seems that there should be a more elegant sollution that I am not aware of.
Any ideas?
Don't force the solution towards ASPX just because you know how to do it there. It's unnatural to build a page, host browser to show that page etc, just so you could upload an image.
It's actually quite simpler to do it in a desktop client than on web page. You have a "Load File Dialog" - use that to get to the filepath the user wants to upload, and when you have that you can either:
copy it (inside your application) to your share,
or if you have a service - send it through some method call,
or you can even store it inside a database (recommended if the files are small)
There's really lots of options here... it depends if your client has connection to db, do you have service in between, etc...
I have a news letter which i did in silverlight, is there a way to send it in email. like as you include html tags, is there a way to include silverlight xap package in it.
Probably better to reference a webpage containing your silverlight content.
Technically, you could put the path to the .xap hosted on a website into an HTML email body, but nearly all mail clients will not display this - most even prevent images from loading by default.
Most email systems will prevent you from embedding active content like SilverLight, as it presents a security risk. Your only option probably is to put your SilverLight app on the web, and just email a link to it.
Don't if you want your newsletter to be read by anyone. See this article for a good list of do's and don'ts when sending emails.
Don't listen to those guys, they're probably FlashHeads... ;)
Besides that they give up too easily. More power to ya!
I assume this newsletter is for an audence that specifically desires your content: i.e a club or similar organization that doesn't have a windows based webserver.
What you do is attach the file in such a way that they drag a zip containing the files that would normally be served from a website to the hard drive - right click - extract all then they run it by clicking on an HTML file with .htm extension that hosts the silverlight plugin instead of an aspx file.
One note that probably won't matter to you is that without a server backing this up the content can't really send you back any info but it CAN get dynamic info that comes from say RSS feeds or WCF services hosted on the web.