Is it possible to have a file upload work in React only without Node? I say this because every single article I read, node is involved. All I want to do is for a user to be able to upload a picture to my react app (filling in a simple form), and when they submit that form, a new post is created along with the picture they uploaded. I don't need the post to persist, this is frontend only. Is it possible to do this without node?
You can make this to work but you will need AWS or other Image upload services like Cloudinary.
You can create an account with AWS, create a bucket and use their SDK to push the image to them and they will return a URL.
Checkout this article though: https://javascript.plainenglish.io/how-to-upload-files-to-aws-s3-in-react-591e533d615e
Related
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
I need to store images on Firebase and display them in my React application using Firebase.
This is not an image upload feature. I am talking about images that will be displayed in information static pages.
The closest resource I found was Firebase's Cloud Storage, however, this aimed at apps that allow users to upload their own content.
I also found Firebase's Hosting page, I followed some of the steps which include installing the firebase CLI. However, it doesn't make it clear how to save my image assets there. Maybe FTP?
The best alternative I found so far was to save my images in my app's public folder, however, from a performance standpoint it would be more interesting to have those images saved on Firebase directly and use their URLs in my application.
The solution was simpler than I thought.
You can simply access your app page on Firebase, go in the "Develop" section and choose "Storage".
In the "Storage" page you can upload files and a default public URL will be generated for them. I chose the "Download URL" for each image that I uploaded.
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.
I am working on project where I have to store a file/img/pdf for a particular user instance and retrieve the files when the user logged in.
So the theme is, whenever user uploads a file it should be populated in his screen like profile pictures, invoice PDF's etc.,
Moreover, I just want to perform a carousel slideshow of uploaded images by user.
I came through several baked in modules such as ng-file-upload in angular and I was successful in uploading files too but how can I retrieve the particular file from the server and display them to user?
What is the best practice to achieve this?
Thanks in advance!
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.