Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Hello and thanks to everyone for helping.
So I would like help with my project.
So what I would like to happen is get an image from react after posted,
then convert that to base64 so I can post to mongo with mongoose,
and finally, be able to display that but in the process of all of this,
I don't wanna use local saving or in any clouds.
Does anyone know how to accomplish that?
Please share you ideas.
-StayHome
React: Uploading
For the Base64 Conversion, You could:
You could use plain javascript to accomplish that. Refer more here
Even better, use the advantage of NPMs for React. Use a library someone has already built in. This documentation looks awesome for it. Here's the demo for it.
Once you have converted that to base64. I presume you will be storing the details in the react state, you could now do some AJAX request to your server.
Express And Node: Receiving Data Most of this will be boilerplate code until you get to the part where you have to write the APIs. For this portion, you will need to create an API on a specific route that you will specify that will accept POST method.
Three important folders to take a look into:
Routes
Controllers
Models
Routes will be your entry point for APIs, and will use functions that are defined in the controllers. These controllers are made using mongoose functions that will be based on the models that you will create. The controllers you probably will need for this scenario is CREATE and READ.
Mongoose and MongoDB
Connect those to MongoDB. There's a lot of resource for this such as this.
Express and Node: Giving Data
Once you have finished the database models and controllers. You will have a controller for getting specific data in the database. Now you can create a route that will serve this API, usually in GET method.
React: Receiving the Stored Image
In the page that you require the image, you could perform a AJAX request in componentDidMount and store the data in the state.
Using HTML and react, you could create this. More info here
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
I have a small project running and I question myself, how to do it. I host on two server. One is for Backend and one for Frontend. The Backend-Server is running on NodeJS and as DB MongoDB and I already have my own small API to communicate with it. On the Frontend-Server I am using React. My Question now: What is the best way to make a SessionID on the Frontend and Send it to the Backend-Server over the Frontend-Server?
For example SessionID3 should get displayed a bike on his site and SessionID2 a car (both informations are stored on the Backend-Server on the DB).
I look forward to any replies, thanks!
Most Jamstack setups have an API server that serves content in the form of json/raw (like Github's developer API)in which Nodejs and JavaScript has a built in feature which allows the quick conversion to a JSON object with references in which you can read about that on MDN.
Diagram of Jamstacking with React & Vue
^ since it is actually the client sending the request and doing most of the work and not the front-end server, you can use universal-cookie to set or get a session ID permanently, parse it into JSON and send with the POST request to the Back-end API. You could also do this with Math.random(min, max) as well of you just want a random string of numbers to be sent.
Axios is asynchronous so you want to use async/await or .then() with it so that it works correctly. You can view the official docs at https://axios-http.com/docs/intro. The value returned by Axios is the response in which you will want to parse the "body" the header returned so it can be used.
Another alternative to get the browser session id (which is erased after the browser is closed) is a module called react-session-hook
In my opinion, for what you are trying to do, adding another server that relays the message is not optimal as that adds another sequential connection that makes things take twice as long as it would otherwise. In other-words, this is not necessary. The only time you do this is if the keys to access the API are sensitive meaning they contain important information and musts be hidden.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm a junior front-end developer, and I want to create a simple API. I have already a mook of this API deployed on Heroku (available on this link), developed with Express.
I want to create a website with Vue, where the root path is, logically, the website, but I also want it to have a path similar to example.com/api/v1/ministries for the API. Basically, I want to create a kind of landing page for the API.
I don't see it as something so complex, but I didn't know how to google it and, therefore, I don't know where to start.
I know how to create applications with Vue and I already have my simple API, but with the knowledge I have it would be applications raised on different servers and I don't want that.
In my mind, I should create a new app with Vue, develop it, install Express in the project and lift the API, but honestly, I don't know how to put those two steps together.
Please make your api in english, the person after you will thank you.
You could make an express app and move the output (dist) of your vue app in the public directory of express.
This way you'll be able to easily add routes
// Move vue output to folder named 'public'
// Point express to this folder
app.use(express.static('public'))
// Send the index.html (vue entrypoint) to the client on request of /
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have been trying to connect my flutter app with a node.js backend to send images and I don't know how to begin to code this. I have a vague idea about writing apis using node.js. My flutter app should take an image using the camera and send it to the backend
Starting from Flutter frontend, your can use a package like image_picker to pick an image file from your camera or gallery.
On backend side if your are using nodejs(using express will be a good option for API) and mongodb(a no-sql dbms), you can create a collection for storing all your images as documents.
Helper link for express routing : https://expressjs.com/en/starter/basic-routing.html
mongoose is a good library for nodejs that will make your work a lot easier.
Once that's done you can create you own apis which will be inititally hosted on your own computer(localhost) using functions like app.post() etc. provided by express. Here you can create a POST request which will take the image file from frontend as form-data. Extract the image from the body and store it in your database.
Then you will also need to make a GET request to take that image file from your database and pass it to your frontend.
Then using the flutter's inbuilt http functions or using http package, you can extract the images from your database using the API's you made.
Unfortunately I can't explain thing in details in just one answer, so you will have to do a lot of research yourself. Below are some links that will help you if you choose node(express) as backend framework and mongodb as database.
Best example of storing and retrieving images using express and mongo db : https://gist.github.com/aheckmann/2408370
Follows the same technique as above but explains what he's doing : https://medium.com/#alvenw/how-to-store-images-to-mongodb-with-node-js-fb3905c37e6d
There is a few ways to do it, I will probably do like this.
On the nodejs part, create a simple express server and combine with the package call multer to handling all the incoming file.
And on the flutter part, handle the image using a package call image_picker and sent it in a form data through http
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
My Spec : Login, Logout, dashboard, I need to render 150 inputs in single form, need to download pdf file for saved inputs. And each inputs need to save input blur action and also form submission.
The existing application has build nodeJs with expressJs with jade template for rendering. Backend(mySql) connection has builded laravel (lumen).
FrontEnd - NodeJS, ExpressJs, Jade template
Backend - Laravel Lumen
Provide some suggestion to best language for my requirement to code.
Had some suggestion like
Laravel + VueJs
NodeJs + ExpressJs + ReactJs
NodeJs + ExpressJs
Thanks in advance
You can create REST API using NodeJS and Express framework. If it just uploading file and auth you can use middleware function and the library you can use like multer and jsonwebtoken for uploading and user validation.. i prefer hbs instead of jade because it HTML based.
I hope this helps
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am coming from Java and relational world and trying to get my feet wet. The app i am working on is an appointment scheduling system using node.js and MOngo on backend and client is in angular.js.
I am trying to understand couple of key concepts which might be remnants of my Java bias. any help in pointing to relevant snippets, tutorials is appreciated.
1) How would i manage relationships between appointment, customer and service representative in Mongo/Node? Do the appointment objects get created and a reference of user id stored in appointment? Does user need to have a reference to list of appointments?
2) User authn/authz, since node is being used as restful service provider how do i create role based control? For example when a user signs up as a service rep he should be approved. Is there a module which can help?
3) Any generic module which gives reports on user signups etc?
4) How do people manage permissions on client side MVC?
Any pointers are greatly appreciated.
Doing apps where you have both a server-side component, as-well as a client-side component makes things a little more complicated then just having a server-side framework.
When using a client-side framework like AngularJS, all your templates are compiled client-side, not server-side. That's a huge difference from traditional server-side rendering. That means, instead of sending rendered HTML to the client, you would send JSON. Your server would essentially become a RESTful API with security emplacements.
I'm not extremely familiar with AngularJS, more with Ember, but you would essentially create a restful service: https://gist.github.com/2432692 . That would communicate with the server on a RESTful interface.
On the server, using nodejs, you would use an ORM like Mongoose or something similar. You can create relationships, documents, etc... One note, you'll have to duplicate your models on both, the server and client.
MongoDB uses bson, a binary encoding of a serialized JSON string/object. Because nodejs is built using V8 JavaScript engine, JSON is a natural object type and so working with MongoDB is extremely simple.
HTTP Server on NodeJS: NodeJS provides a base implementation for an http server. It's not much, but you can respond to and handle requests. There are no session, cookie, auth support, so you can either use connect which builds on-top of the traditional http server or use ExpressJS which builds on both connect and the normal http server that node provides. ExpressJS is extremely easy to get started on, and works well with RESTful backends.
It's pretty simple. Get ExpressJS, create a new app, setup all the client-side stuff (angularJS) and module systems if you use AMD, CommonJS, Browserify, etc...
I am not familiar with node.js, but for mongodb design, you'll have to choose between "subdocuments" vs "linking documents".
1
You can have a look at how to structure many-to-many relationships in mongoose?.
Idea is to retrieve a complete document where it makes sense. For instance, you might have the following schema.
{ customer : { name: xxx },
appointments: [ {date: xx, type : xxx .., servicerep: xxx}, {date: xx, type : xxx .., servicerep: xxx} ]
}
even though, info may be duplicated, for queries, you only hit one document/subdocument.
4
Even though it might be client side, it does not mean server should not validate. Client could validate as best as it can, but server still ought to verify. Sorry, I don't have anymore to add.