I am trying to upload a file to a Node backend that uses Multer. Multer requires the form to be submitted a specific way. If it's not submitted that way, the request.file parameter will be undefined. I have created an approach that works by using brute force. That working approach looks like this:
index-1.html:
<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
<input type="file" id="selectedFile" name="selectedFile" /><br/><br/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
...
var btn = document.getElementById('btnSubmit');
btn.addEventListener('click', function(e) {
e.preventDefault();
var form = $('#fileUploadForm')[0];
var data = new FormData(form);
console.log(data);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/upload",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
console.log("SUCCESS!");
},
error: function (e) {
console.log("ERROR : ", e);
}
});
});
The code above successfully posts the file to my server. That server has the following:
server.js
app.post('/upload', upload.single('selectedFile'), function(req, res) {
if (req.file) {
console.log('file uploaded');
} else {
console.log('no file');
}
res.send({});
});
Using the code above, "file uploaded" is displayed in the console window as expected. However, I need a more dynamic approach. For that reason, I need to programmatically build the form in JavaScript. In an attempt to do that, I've created the following:
index-2.html
[my UI]
var btn = document.getElementById('btnSubmit');
btn.addEventListener('click', function(e) {
var form = document.createElement('form');
form.action = '/upload';
form.method = 'POST';
form.enctype = 'multipart/form-data';
var node = document.createElement("input");
node.name = 'selectedFile';
node.value = GLOBAL_SELECTED_FILE;
form.appendChild(node);
var data = new FormData(form);
data.append('id', this.id);
console.log(data);
$.ajax({
type: 'POST',
url: '/profile-picture/upload',
enctype: 'multipart/form-data',
data: data,
contentType: false,
processData: false,
success: function(res) {
console.log('success!');
},
error: function(xhr, status, err) {
console.log('error');
}
});
});
This second approach does not work. To clarify, the GLOBAL_SELECTED_FILE variable is the data of a file that was selected from an input element. The data is loaded via the FileReader api. That looks like this:
var GLOBAL_SELECTED_FILE = null;
var fileReader = new FileReader();
fileReader.onload = function(e) {
GLOBAL_SELECTED_FILE = e.target.result;
}
fileReader.readAsDataURL(fileSelected); // file selected comes from the onchange event on a <input type="file">..</input> element
Basically, I'm loading a preview of the image. Anyways, when I hit the submit button in the working version (index-1.html), I notice in Fiddler that a different value is sent over the value sent in index-2.html.
With the approach in index-1.html, Fiddler shows something like this in the "TextView" tab:
------WebKitFormBoundary183mBxXxf1HoE4Et
Content-Disposition: form-data; name="selectedFile"; filename="picture.PNG"
Content-Type: image/png
PNG
However, when I look in the "TextView" tab in Fiddler for the data sent via index-2.html, I see the following:
------WebKitFormBoundary9UHBP02of1OI5Zb6
Content-Disposition: form-data; name="selectedFile"
data:image/png;base64,iVBORw0KGg[A LOT MORE TO GO]
It's like the FormData is using two different encodings for the same value. Yet, I don't understand why. How do I get index-2.html to send the image in the same format as index-1.html so that Multer will populate the req.file property?
Thank you!
In index-1.html, you are using a file input:
<input type="file" id="selectedFile" name="selectedFile" />
In index-2.html, you are creating an ordinary form input (not a file input):
var node = document.createElement("input");
node.name = 'selectedFile';
node.value = GLOBAL_SELECTED_FILE;
form.appendChild(node);
To create a file input, you would need to add node.type = 'file'. However, you won't be able to set the value because browser security restrictions prevent setting the value of file inputs.
Instead, what you need to do is append the file that was selected by the user to the FormData object:
var data = new FormData(form);
data.append('id', this.id);
data.append('selectedFile', $('#fileInputElement')[0].files[0]);
Related
I am quite new to Telerik Html Kendo. My aim is to upload a file first. Then, invoke the corresponding action method in 'Administration' controller through ajax that should take the uploaded file and other parameters on clicking the 'Submit' button as shown in image below.
Most of Telerik examples show asynchronous upload feature which invokes controller method to upload file. I don't want to do this way.
However, I have tried to upload file with onSelect event of kendo upload. It shows that file gets included however it doesn't upload.
As a result, I am unable to see any info. about uploaded file in onSuccess and onComplete event.
I used formData on 'Submit' button click. However I receive null at the action method all time.
Any correct way of doing this?
Here is my html code for file upload:
<div class="well well-sm" style="width:inherit;text-align: center;float:left;">
<!--form method="post"-->
<!--div class="demo-section k-content">
<input name="files" id="files" type="file" value="Upload a Data File"/>
</div-->
<!--/form-->
#(Html.Kendo().Upload()
.Name("files")
.Multiple(false)
.Messages(m => m.Select("Please upload a Data File"))
.HtmlAttributes(new { aria_label = "file" })
.Events(events => events
.Complete("onComplete")
.Select("onSelect")
.Success("onSuccess")
.Upload("onUpload")
.Progress("onProgress"))
//.Async(a=>a.AutoUpload(false))
.Validation(v => v.AllowedExtensions(new string[] { ".csv", ".xls", ".xlsx", ".txt" }))
)
</div>
Here is the javascript code for all the js events I want to invoke.
<script>
var _files;
function onSelect(e) {
var files = e.files;
alert(files[0].name);
_files = files[0];
//file = files[0].name;
var acceptedFiles = [".xlsx", ".xls", ".txt", ".csv"]
var isAcceptedFormat = ($.inArray(files[0].extension, acceptedFiles)) != -1
if (!isAcceptedFormat) {
e.preventDefault();
$("#meter_addt_details").addClass("k-state-disabled");
//$("#submit_btn").addClass("k-state-disabled");
document.getElementById("submit_btn").disabled = true;
alert("Please upload correct file. Valid extensions are xls, xlsx,txt,csv");
}
else {
/* Here I tried to upload file didn't work out */
$("#meter_addt_details").removeClass("k-state-disabled");
// $("#submit_btn").removeClass("k-state-disabled");
document.getElementById("submit_btn").disabled = false;
#*
$("#files").kendoUpload({
async: {
saveUrl: '#Url.Action("ReadMeterFile","Administration")',
autoUpload: false
}
}); *#
$("#files").kendoUpload();
//$(".k-upload-selected").click();
#*var upload = $("#files").data("kendoUpload");
upload.upload(); *#
}
}
#*
function onUpload(e) {
$(".k-upload-selected").trigger('click');
//console.log("Upload :: " + getFileInfo(e));
}
function onSuccess(e) {
console.log(files[0].name);
_files = e.files[0];
}
function onProgress(e) {
console.log("Upload progress :: " + e.percentComplete);
}
function onComplete(e) {
console.log("Complete");
}
function onSubmitButtonClick(e) {
var formData = new FormData();
alert(_files.name);
formData.append('files', _files);
formData.append('order_num', $("#order").val());
formData.append('purchase_order', $("#purchase_order").val());
$.ajax({
url: '#Url.Action("ReadFile","Administration")',
data: formData,
type: 'POST',
processData: false,
contentType: false,
dataType: "json",
success: function (data) {
alert("Good");
}
});
}
</script>
Here is my controller:
public ActionResult ReadFile(IEnumerable<HttpPostedFileBase> files,string order_num, string purchase_order)
{
System.Diagnostics.Debug.WriteLine("File length:"+files.ToList().Capacity);
foreach(var f in files)
{
System.Diagnostics.Debug.WriteLine(f.FileName);
var fileName = Path.GetFileName(f.FileName);
var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
f.SaveAs(destinationPath);
}
//System.Diagnostics.Debug.WriteLine(file);
/*
System.Diagnostics.Debug.WriteLine("File:"+files);
System.Diagnostics.Debug.WriteLine("Order:"+order_num);
System.Diagnostics.Debug.WriteLine("Purchase Order:"+purchase_order);
return Content("");
}
Here is some code I used before for manually uploading from the kendo upload widget. From your question I think what you are looking for is the way to correctly get the info on the controller side. However, I will add the code I have used which should help you out. (My code uploads a PDF)
#(Html.Kendo().Upload()
.Name("pdf-file")
.Multiple(false)
.Validation(v => v.AllowedExtensions(new string[] { "pdf" }))
.Events(ev => ev.Select("pdfSelected"))
)
function pdfSelected(e) {
if (e.files != null && e.files.length > 0 && e.files[0] != null) {
var file = e.files[0];
if (file.validationErrors != null && file.validationErrors.length > 0) {
return; //These errors will show in the UI
}
var formData = new FormData();
formData.append('PdfFile', file.rawFile);
formData.append('AdditionalValue', 'Some String');
$.ajax({
type: 'post',
url: '[SOMEURL]',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: pdfUploaded
});
}
}
function pdfUploaded(data) {
//Whatever you want.
}
Inside of pdfSelected is the code that actually posts the file. If you want to do it all at the same time along with other properties, via a submit button. Then instead of performing the upload there. Do nothing but your validation for the upload or don't implement pdfSelected and wait until submit is clicked to perform the validation(probably better). Then on your button click
//Or course check files.length to avoid errors. Not added to keep it short
var files = $('#pdf-file').data('kendoUpload').getFiles();
var file = files[0];
Everything from "var formData = new FormData();" down, from the code above remains the same. Here is the controller code.
public ActionResult MyAction() {
string additionalValue = (string) this.Request.Form["AdditionalValue"];
HttpPostedFileBase file = this.Request.Files["PdfFile"];
//Do whatever you need to with them.
}
The file's rawFile property is what you need not just the file object because that is kendo specific.
//THIS AJAX CODE WORKING GREAT.
$(document).ready(function(e) {
$("#ajaxupload").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "http://example.com/upload",
type: "POST",
data: new FormData(this),
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data){
//if success. Response is HTML. data = html. insert to my .result-wrapper.
$(".result-wrapper").prepend(data);
},
error: function(){
console.log('there\'s error!')
}
});
}));
});
How to convert this Ajax Jquery to pure Javascript? I've try to find solution around Stackoverflow then try to implement codes by answer was mark as accepted still error, my backend Controller not detect the data input value..
With ajax codes above.
1. Sumbit and get response without refresh the page.
Response is HTML.
No need to set data. because data already set in my HTML form.
Form have multiple input file upload and multiple input name. So length of input not a static number, depend files.
How to implement it with javascript? Submit without refresh, get response, then possible to submit data filled in HTML dinamically?
I've try do that with code below.
document.getElementById('ajaxupload').addEventListener('submit', function(e) {
e.preventDefault();
//e.submit();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/upload/', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
// do something to response
console.log(this.responseText);
};
//xhr.send();
xhr.send(document.getElementById('ajaxupload').innerHTML); //my form id = ajaxupload
});
HTML:
<form action="http://example.com/upload" id="ajaxupload" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input id="insert-file" name="usr_files[]" type="file" multiple="">
<!--other input will generate inside this form on change `insert-file` .. depend on how many length file selected. ex if 2 files selected:
<input class="custom-file-name" name="usr_files[text][0]" type="text" value="My custom file name" required/>
<input class="custom-file-name" name="usr_files[text][1]" type="text" value="My custom file name no.2" required/> -->
</form>
Use the same formdata object in the native code
document.getElementById('ajaxupload').addEventListener('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/upload/');
xhr.onreadystatechange = function() {
if ( xhr.readyState === 4 && xhr.status === 200 ) {
console.log( xhr.responseText );
}
}
xhr.send( formData ); //my form id = ajaxupload
});
function ajaxGet(url, cb, token){
var ajaxReq = new XMLHttpRequest();
ajaxReq.addEventListener('load', function(){
if(ajaxReq.status === 200) cb(null, {responseText: ajaxReq.responseText, rawAjaxRequest: ajaxReq});
else cb({statusCode: ajaxReq.status, rawAjaxRequest: ajaxReq}, null);
});
ajaxReq.addEventListener('error', function(data){
console.dir(data);
var err = new Error('A fatal error occurred during ajaxGet, see console for more information');
err.name = 'XMLHttpRequestError';
cb(err, null);
});
ajaxReq.open('GET', url, true);
if(token){
ajaxReq.setRequestHeader('Authorization', token);
}
ajaxReq.send();
},
I am trying to make a form where there will be user data(name,dob etc) and an image. When user submits the form a pdf will be generated with the user given data and the image. I can successfully serialize the data but failed to get image in my pdf. I am using simple ajax post method to post data. Below is my code.
HTML code
<form onsubmit="submitMe(event)" method="POST" id="cform">
<input type="text" name="name" placeholder="Your Name" required>
<input type="file" name="pic" id="pic" accept="image/*" onchange="ValidateInput(this);" required>
<input type="submit" value="Preview"/>
</form>
Jquery code
function submitMe(event) {
event.preventDefault();
jQuery(function($)
{
var query = $('#cform').serialize();
var url = 'ajax_form.php';
$.post(url, query, function () {
$('#ifr').attr('src',"http://docs.google.com/gview?url=http://someurl/temp.pdf&embedded=true");
});
});
}
PHP code
<?php
$name=$_POST['name'];
$image1=$_FILES['pic']['name'];
?>
Here I am not getting image1 value. I want to get the url of the image.
You need FormData to achieve it.
SOURCE
Additionally, you need to change some stuff inside ajax call(explained in link above)
contentType: false
cache: false
processData:false
So the full call would be:
$(document).on('change','.pic-upload',uploadProfilePic);
#.pic-upload is input type=file
function uploadProfilePic(e){
var newpic = e.target.files;
var actual = new FormData();
actual.append('file', newpic[0]);
var newpic = e.target.files;
var actual = new FormData();
actual.append('file', newpic[0]);
$.ajax({
type:"POST",
url:"uploadpic.php",
data: actual,
contentType: false,
cache: false,
processData:false,
dataType:"json",
success: function (response){
#Maybe return link to new image on successful call
}
});
}
Then in PHP you handle it like this:
$_FILES['file']['name']
since you named it 'file' here:
actual.append('file', newpic[0]);
I have a form with input field like some textfields ,textareas,dropdowns and a file upload field which the user will upload while filling the form i want to send form contents (both form field values + uploaded file) as one file to the server below is a very simplified version of my problem .Say i have the following markup
<form id="myForm" method="post" action="something">
<input type="text" name="username" id="username">
<input type="text" name="email" id="email">
<input type="file" name="myFile" id="myFile">
</form>
So now what i want is instead of sending above 2 text fields and a file separately i want them to get embedded in a file and then get sent as a whole.
example
Note that the server where i am sending is third party and only excepts files also file format is proprietary but nonetheless it still a ASCII plain/text.I realize that it's only possible by AJAX and fileReader API so here is what i have tried
var file;
$('#myFile').change(function(e){
file = this.files[0];
var fr = new FileReader();
fr.onload = function(event){
fileData = fr.result;
};
fr.readAsDataURL(file);
$('#myForm').submit(function(e){
e.preventDefault();//prevent submit
var myFile= [$('#username').val(),$('#email').val(),fileData];
$.ajax({
url : "some url",
type: "POST",
contentType:false,
processData:false,
data: myFile;
success:function(data){ }
});
});
Issue is that upon form submission no file gets sent .Any help would be greatly appreciated , thanks.
In form submit you can do as mentioned below for send file with AJAX request
$('#myform').submit(function(e){
e.preventDefault();//prevent submit
var form_data = new FormData();
form_data.append('file', $('#myfile').prop('files')[0]);
form_data.append('username', $("#username").val());
form_data.append('phone', $("#phone").val());
$.ajax({
url : "some url",
type: "POST",
contentType:false,
processData:false,
data: form_data;
success:function(data){ }
});
});
There are 2 parts
Convert file to string format or serialize it on client side using FileReader API
Combine your form values with this string and send them as a file.
Part one
I don't know if you have noticed or not but when you use readAsDataURL() you don't get the original file byte-stream but its base64 encoded version so keeping that in mind change you code to
var fileData;
$('#myFile').change(function(e){
file = this.files[0];
var fr = new FileReader();
fr.onload = function(event) {
encfileData = fr.result;
startInx = encfileData.indexOf('base64');
startInx += 7;
tmp = encfileData.substr(startInx);
//removes the file MIME header part ie. "data:text/plain;base64," before decoding
//regex may be preferable
fileData = atob(tmp); //DECODE
};
fr.readAsDataURL(file);
});
So now you have a string containing your file's byte-stream now as you have said there is some format so depending on that you do whatever manipulation you may need to make it align with the format, since you have mentioned it's plain text format so basic string function are sufficient here.For next part i assume simple colon based CSV format key1:value1,key2:value2
Part Two
Now to truly create a file out of thin air you can use either File or Blob but i would suggest using Blob due to its better support.To contain the file you require FormData simply append your blob to it and send
$('#myForm').submit(function(e){
e.preventDefault();
var txtData = "\n username:"+$("#username").val()+","+"email:"+$("#email").val();
// NOTE: windows uses \r\n instead of \n for newlines
var payLoad = fileData + txtData; //append text field data to the file data
var blob = new Blob([payLoad], {type : 'plain/txt'});
var form = new FormData();
var fileName = 'combined.txt'; //filename that will be used on server
form.append('something', blob, fileName);
$.ajax({
url: "some url",
type: "POST",
cache: false,
contentType: false,
processData: false,
data: form,
success: function(response){alert(response);}
});
});
If using php on linux your $_FILES should look something like this
Array
(
[something] => Array
(
[name] => combined.txt
[type] => plain/txt
[tmp_name] => /tmp/phpJvSJ94
[error] => 0
[size] => 95
)
)
It seems that you're passing sending the wrong variable in your AJAX payload - shouldn't you be sending fileData instead of file?
You can upload data and files:
HTML
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="username" id="username">
<input type="text" name="email" id="email">
<input type="file" name="myFile" id="myFile">
</form>
Jquery
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'your_url',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
I have a problem with accessing file upload field
//HTML
<input type='file' name='images' id="images" multiple>
//////////////////
$('.bt-add-com').click(function(){
var formdata = new FormData();
var sessionID = 8;
var theCom = $('.the-new-com');
var theName = $('#name-com');
var theMail = $('#mail-com');
var theFile = formdata.append("images", sessionID);
if( !theCom.val()){
alert('You need to write a comment!');
}else{
$.ajax({
type: "POST",
url: "ajax/add-comment.php",
data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val()+'&file='+formdata.append("images[]", sessionID),
success: function(html){
theCom.val('');
theMail.val('');
theName.val('');
$('.new-com-cnt').hide('fast', function(){
$('.new-com-bt').show('fast');
$('.new-com-bt').before(html);
})
}
});
}
});
////RESULT
array (size=6)
'file' => string 'undefined' (length=9)
problem is when i access file upload field using formdata as code below. it display value as undefined. can't get uploaded file details
You're taking the form data object and appending it to a string. That won't work.
Don't try to build a string to pass to data, use the FormData API for all your fields, then pass the FormData object itself.
You also need to append the file data form the input instead of the number 8.
formdata.append("images", sessionID);
formdata.append("images[]", sessionID)
Don't use images and images[]. If you're using PHP, then use just images[]
Don't use sessionID, use the file.
formdata.append("images[]", document.getElementById('images').files[0]);