display and save a local image into database in react js - reactjs

I'am developing a blog website using react.js where users can post and comment ...
so we know that a user can comment with an image ,and let's say he want to upload a local image that stored in his machine,i want to display that image as a comment and save it into postgres database which i'am using for that.
My question is what are the steps that i should follow to achieve my purpose,thanks in advance.

If you have to do in simple steps, you can save the image to base64, its just string representation of an image. So it can be saved in DB directly and when you have to show it just decode the string and display it accordingly.
References :-
https://github.com/dankogai/js-base64#readme
https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript
Alternatively, what you can do when user selects an image, then upload that image to your server and get the path to that(multipart file upload) and from path you can show it where you want to show.
References :-
how to send a multipart/form-data from React.js with an image?
I hope it helps, Thanks :)

Related

Uploading file in react native Android

I'm making my android app with react native.
I want to make an upload(file, image) to my api server.
I searched in google, but I have some question.
The upload Flow what I thought is like below.
1. GET ACCESS TO LOCAL STORAGE
2. IF PERMISSION GRANTED, CLICK BUTTON AND MAKE POPUP
3. SELECT THE FILE/IMAGE AND GET URI
4. UPLOAD FILE WITH AXIOS
Am I thinking wrong? Is there a library to make it easier? Thank you
you can use react-native-image-crop-picker . it will ask for permission and you can take picture from camera or select image from gallery
if you want file other than image you can use react-native-document-picker
then upload file using axios

How can I store images so that the URL for the image takes me only to the image and not the webpage?

I am connecting Active Directory to a platform my company uses. In order to ensure that user's have a profile picture, I will add the URL of the photo to an attribute and connect it that way. However, the URL for the image must take me directly to the image. So far, I have been able to store images on different options but for each one, when I select the URL, it takes me to the webpage that disples other items than just the image (e.g. - https://ibb.co/J2cFfsx ). How can I store photos so that the URL takes me directly to JUST the image ONLY?
right click on the image and click view image. once you have done this you should get something that looks like below. In the URL there should be a new link, if you use that one it should always take you to the image aslong as it exits.
Equally you can right click on the image and select "copy image location" and that will give you the new link. I personally perfer the other method as it gives a proper preview of the image at its full size.
new image view
To link your image to the document go and search for image on google. right click on image -> Create QR code for this image after showing the QR code. Beneath QR code there is a link copy that and paste it in your document where you want. Now just to be sure click on the link and it will show the image only. Try it!!

How to store images in firebase using URL from cloud storage service?

Hi I am developing an ionic app using firebase as my database.
I read this question.
I understand it and have a more specific question.
I uploaded an image on amazon s3, imgur and filestack, and tried all three in firebase using data:url/<the url of image> and data:image/jpeg;<url of image>.
Am I typing something wrong into firebase?
The image does not come up. I do not want to write code in the app to upload the image etc, I just simply want an image to display on the app beside some data corresponding to an item in my firebase database.
I have read about base64, do I have to use it in this case?
(Optional) Perhaps If you could expand on the steps of doing this:
"You can use a filepicker to get the image file. Then you can host the image however you want, i prefer amazon s3. Once the image is hosted you can display the image using the url generated for the image."
I don't have much ionic experience, but why not just save the direct path to the image url and not include the data:url/ portion.
Simply store the url in firebase and then when it's retrieved inject it into your img src.

serving pictures from database using nodejs

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.

CKEditor image upload - getting the upload file

I was working on a very simple and fast image uploader for CKEditor. It works all like a charm, the only problem now is the actual upload. I thought it would all be easy, but now I am stuck.
I have the CK file-field and figured I could just run an ajax request to my php uploading script, the problem is now: how do i get the file data to upload it. The Ajax does not have the post values, so I am lost.
Please lead me into the right direction.
Thanks very much.
When you use Ajax to post the form, your file upload function should be able to get the values from the form as usual.
For example, see this article: http://www.finalwebsites.com/forums/topic/php-ajax-upload-example
Well, i now used an iFrame with the form in it. Using uplodify in the iframe it put the path to the file in a hidden input which I can extract from the frame and use as the src form my image in CKEditor.

Resources