is there a way I can send an image file from the front end to the backend? I need to upload the image selected in the form to the cloudinary cloud platform.
Accessing the file input with req.body does not help and gives me an error saying no such file or directory open.
If I add enctype="multipart/form-data", and then on my backend do a req.on('data', (data)=> {console.log(data.toString)}) and then perform an upload to cloudinary, it fails and gives me the following error: Error: Path must be a string without null bytes
This is my form:
<form method="post" action="/submitArticle" enctype="multipart/form-data">
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
<div class="field">
<label class="title is-4">Title</label>
<div class="control">
<input class="input" name="title" type="text" placeholder="Give your story a title...">
</div>
</div>
<div class="field">
<label class="title is-4">Story</label>
<div class="control">
<textarea class="textarea" name="story" rows="7" placeholder="Tell your story here..."></textarea>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<input class="button is-primary" type="submit">
</input>
</p>
</div>
</form>
Is there another way to send image data from the front end to the backend? Thanks in advance!!
If you want to upload to Cloudinary, maybe you should consider using Cloudinary Upload Widget.
The widget supports uploading images directly from the browser to Cloudinary storage, without involving your servers in the process.
You can use third party library like Dropzone to upload image in the frontend and send it to the backend. Simple that's it
Related
I am building a Node JS web application using Express JS. In my application, I need to upload files to server. I am using multer library for it. But when I upload the file and retrieve the file from the request object, it is always returning undefined.
I have an HTML file with the following code:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Upload an Image
</h3>
</div>
<form method="post" action="/images" enctype="multipart/form-
data">
<div class="panel-body form-horizontal">
<div class="form-group col-md-12">
<label class="col-sm-2 control-label"
for="file">Browse:</label>
<div class="col-md-10">
<input class="form-control" type="file"
name="file" id="file">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label"
for="title">Title:</label>
<div class="col-md-10">
<input class="form-control" type="text"
name="title" />
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label"
for="description">Description:</label>
<div class="col-md-10">
<textarea class="form-control"
name="description" rows="2"></textarea>
</div>
</div>
<div class="form-group col-md-12">
<div class="col-md-12 text-right">
<button type="submit" id="login-btn" class="btn btn-success" type="button">
<i class="fa fa-cloud-upload" />
</i>Upload Image</button>
</div>
</div>
</div>
</form>
</div>
Then I register the multer to my app as follows:
// configure file upload
const upload = multer({
dest: path.join(__dirname, 'public/upload/temp')
})
app.set('upload', upload);
// done configuring file upload
Then to the file upload routes, I tried setting the following middleware:
router.post('/images', app.get('upload').single('file'), image.create);
and:
router.post('/images', app.get('upload').array('files'), image.create);
In the controller, I tried to retrieve the file(s) as follows:
console.log(req.files); // for uploading multiple files
console.log(req.file); // for uploading single file
But they are both undefined. What is wrong with my code and how can I fix it?
I have a form in a NodeJs project where I am using:
app.use(bodyParser.urlencoded({extended: true}));
I want to make it where if a user enters <h1>hello</h1> into the form that it will show up as "hello" formatted as an h1 instead of <h1>hello</h1>
<form action="/blogs" method="POST">
<div class="form-group">
<input class="form-control" type="text" name="name" placeholder="name">
</div>
<div class="form-group">
<input class="form-control" type="text" name="image" placeholder="image url">
</div>
<div class="form-group">
<input class="form-control" type="text" name="description" placeholder="description">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">
Submit
</button>
</div>
</form>
I found a solution to my problem.
In Node.js if you want to display information as HTML, in the index.ejs file
you need to do a
<%- blog.description %>
, where that dash is the key.
Before i had
<%= blog.description %>.
I try to create a simple contact form, but I didn't get any message, the post request is made. I am pretty new with Modx.
What I tried:
Link 1
Link 2
I created 2 Chunks (emailChunkTpl and MyEmailChunk), and in my template I call for the [[$MyEmailChunk]]. Obviously I did something wrong but I am not sure what. The code is like in the examples, but with some changes,like my email.
[[!FormIt?
&hooks=`email,FormItSaveForm `
&emailTpl=`emailChunkTpl`
&emailTo=`myEmail#gmail.com`
&emailUseFieldForSubject=`1`
]]
<form action="[[~[[*id]]]]" method="post" class="contactForm">
<div class="row input-section-child">
<div class="col input-contact">
<input value="[[!+fi.input-name]]"class="input-name" name="input-name" id="input-name" type="text" placeholder="your name" />
<input value="[[!+fi.input-email]]" class="input-email" name="input-email" id="input-email" type="text" placeholder="email address" />
</div>
<div class="col input-contact-text">
<input value="[[!+fi.input-textare]]"class="input-textare" name="input-textare" id="input-textare" type="textare" placeholder="message" />
</div>
</div>
<div class="row second-row">
<div class="col checkbox">
<input value="[[!+fi.input-checkbox]]" class="input-checkbox" name="input-checkbox" id="input-checkbox" type="checkbox" ><span class="input-checkbox-span">I agree to the Privacy policy.</span>
</div>
<div class="col">
<button type="submit" class="send-button">SEND</button>
</div>
</div>
<a href="#intro" class="back-to-top"><img src="images\arrow-back.svg" /><span>Back to top</span>
</div>
</from>
You should start with cleaning up your markup, it is not valid HTML. There is a typo in your closing form tag (/from), an extra closing div tag, there is no input type of textare as far as I know, and you are missing white space around some classes. You can validate HTML here: https://validator.w3.org/
You can test to make sure your site is setup properly to send an email. There is a snippet for this called QuickEmail, download it from the extras tab in the MODX manager.
Once you're sure your site can send email, then start with a stripped down version of the Formit call -- remove all hooks except email and get it working with that first. Then add hooks one at a time.
Im try build a form to upload images, but when use csrf this donw work for me and, I was reading that need this code in you form enctype tag:
<form method="post" action="/?_csrf=<%=csrfToken%>">
this work for me but if want save one image only, but if want Edit or Delete, don't work, because use override method ?_method=PUT and return a URl with me CSRF
http://localhost:3030/stories/5bafe7a5abe3a7110c5f386b?_csrf=wkhEeV2x-06M_KPnZRoSTPJ3mUZSnuZ6dl7s
Cannot POST
<form class="col s12" action="/stories/{{storieEdit.id}}?_csrf={{csrfToken}}" enctype="multipart/form-data" method="POST">
<input type="hidden" name="_method" value="PUT">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input type="file" name="fileUpload" onchange="previewFile()">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
<img src="/uploads/{{storieEdit.image}}" alt="Image" style="width: 25rem;">
</div>
</div>
</div>
</form>
any suggestions
Thanksfor read me
For multiple images you need to add to your form enctype atribute like this: enctype="multipart/form-data"
For method override you need to add method type as well as csrfToken to action query string:
action="/stories/{{storieEdit.id}}?_method=PUT&_csrf={{csrfToken}}"
I have similar code and works fine.
Bellow you can find the required changes directly in your code.
<form class="col s12" enctype="multipart/form-data" action="/stories/{{storieEdit.id}}?_method=PUT&_csrf={{csrfToken}}" enctype="multipart/form-data" method="POST">
<input type="hidden" name="_method" value="PUT">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input type="file" name="fileUpload" onchange="previewFile()">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
<img src="/uploads/{{storieEdit.image}}" alt="Image" style="width: 25rem;">
</div>
</div>
</div>
</form>
I am trying to build an app that lets users find other users with a specific combination of skills. I ask the users to select which skills they are looking for via checkboxes but I'm not sure how to request for the status of that checkbox in my function.
My function currently is:
UserInfo.find()
.where('skill1').equals('')
.where('skill2').equals('')
.where('skill3').equals('')
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
It works properly if I set the equals('') to true or false but I'm not sure how to set it dynamically. My HTML code for the checkboxes is:
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1"/>
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2"/>
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3"/>
</div>
FIND SKILL
</form>
How can I create and integrate a function to check the value of the checkbox and set the value of the required skill to either true or false?
Thanks in advance for your help.
The problem is that you are using an <a> element to perform the request to the server instead of <input type="submit">. Without a submit button, the elements on your form will not be submitted with the request. Modify your html to this
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1" />
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2" />
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3" />
</div>
<input type="submit" value="FIND SKILL" />
</form>
then in your Node.js code (I assume you are using express), you can get the checkbox values as query parameters as follows:
//I'm assuming the req parameter is passed in to the express get() method
UserInfo.find()
.where('skill1').equals(req.query.skill1)
.where('skill2').equals(req.query.skill2)
.where('skill3').equals(req.query.skill3)
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});