How to upload image and receive data input in nodejs? - javascript

I use mutter and body-parser to upload image and transfer file type multipart/form-data.
I have a form to upload and save name image to database, i want when not choose file in form , i still receive data of text input another.
This is my form :
<form action="/upload?_csrf=<%= csrf %>" method="POST" enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<input type="text" name="name" />
<input type="submit" value="Save"> </form>

Related

Send file data to server as multipart form data

I have a file input element outside the form. and on form submit i want to send the file content to server as multipart form data. I can't insert the file element into the form. Is there any other way to do this.
<input type="file" class="file" style="width:117px" name="c2vFile" onchange="onFileChange2(this.value);"/>
<form style="display:none" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
</form>

The file input needs to be inside the form tag. You've mentioned you can't, but why not? You would need to remove the "display:none", which serves no purpose currently, as the inputs are all hidden.

You can send a file outside of form tag using AJAX submission. You can follow the below link will helpful for sending file using ajax.
But you have have to invoke this function on click of submit button. Once the file upload done then form submit should be happen.
jQuery Ajax File Upload

I did a small trick with this and it worked, please review if it is helpful for you
Before submitting the form add listener and append the input field with the form.
document.getElementById('frmActivate').addEventListener("submit", function() {
var fileinput = document.getElementById('filein');//take the file input
var thisel = document.getElementById('frmActivate');// take the form element
var cln = fileinput.cloneNode(true);//clone the file input element
thisel.appendChild(cln);//append the clone in the form element
thisel.submit();
})
<input type="file" id="filein" class="file" style="width: 117px" name="c2vFile" onchange="onFileChange2(this.value);" />
<form style="" id="frmActivate" enctype="multipart/form-data">
<input type="hidden" id="act_groupActivationJson" name="groupActivationJson" />
<input type="hidden" id="act_remarks" name="comments" />
<input type="hidden" id="activatee" name="activatee" />
<input type="submit" value="submit" />
</form>
<?php var_dump($_FILES);//to confirm if file is submitted ?>
You can see this code working in this demo
Hope this works for you.

How can i upload preview images?

In my HTML form I have input filed with type file.
for example :
<input name="txt_file" type="file" id="txt_file" multiple>
I use code in this link here is the fiddle:
http://jsfiddle.net/L45LW/5/
How can i upload all image with javascript?
I want to store images info into array to send other page with POST in javascript.
Please help me

Not very clear what are you asking for! But at least you should have enctype="multipart/form-data" in your form tag to upload files.
<form id="form1" method="post" enctype="multipart/form-data">
<input name="txt_file" type="file" id="txt_file" multiple/>
<input type="submit" value="Upload" />
</form>

Firefox for Android input file onchange doesn't trigger when using camera

I am making a single picture form that should auto upload when the image is selected.
HTML
<form method="post" action="{{ bucket }}" enctype="multipart/form-data" id="pic-form">
<label>
<img src="placeholder.png" class="photo"/>
<input type="file" name="file" required id="pic-file" accept="image/"/>
</label>
<input type="submit" value="Upload" id="submit-btn"/>
</form>
JS:
$('#pic-file').on('change', function(evt){
$('#pic-form').submit();
});
It works fine on desktop, and on my phone it also triggers when I select a picture from my library but not when I select from camera.

I had a bug on the accept parameter. In my actual code I had "image/;capture=camera" where the HTML spec says it is a comma separated list. I had to change to "image/,capture=camera". At the end I ended up with this:
<input type="file" name="file"
required id="pic-file" accept=".jpg,.jpeg,.png,capture=camera"/>

How to upload pictures to jCrop?

I've used the codes I've found from here: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail, but there isn't an upload function. How do I add that?
Like if I use this function how can I implement jCrop?
<form enctype="multipart/form-data" action="save.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" /> </form>

You don't upload images to jCrop, you apply jCrop to your image element.
$(function(){ $('#id_of_your_image_element').Jcrop(); });
replace id_of_your_image_element with the id of your image tag, if you don't have an id on that tag, add one.

Accessing the file from a form with a input file element

I want to access a file(e.g. image) using JavaScript with such a form:
<form id="form" enctype="multipart/form-data">
<input type="file" size="40" value="" id="upload" name="upload"/>
<input type="submit" id="submit" name="submit"/>
</form>
Is there a way to do it? I am trying to load a image specified by the client into a html5 cavas element without sending it back to the server.

http://www.matlus.com/html5-file-upload-with-progress/
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
hope this help.

Categories

Resources