We Keep Coding

Upload file with text using AJAX & ASP.NET

I am having trouble uploading a file and value from a textbox/textarea in a single AJAX post. The entire project was created with AJAX posts to send data and receive resulting html/data. This means every button is handled with javascript/jquery and not asp.net's default onClick. Searches online yield answers with file upload but none of them show or explain any way to pass other parameters/data along with it.
*EDIT - I am not receiving any specific errors or crash attempting this. I try to run the file upload code in the success of the note upload or vice versa. It doesn't seem to be able to run both even if I switch it to asynchronous. I am more trying to get ONE single AJAX post to send both the file and the note to be handled in one codebehind function.
*EDIT(due to duplicate flag) - This is ASP.NET, not php. Please fully read questions before jumping to duplicate/closed conclusions.
Below is code/example of what I have so far.
HTML :
<div id="Modal_New_Document" class="modal fade" role="dialog">
<div class="modal-dialog Modal-Wrapper">
<div class="modal-content">
<div class="modal-header Modal-Header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Upload New Document</h3>
</div>
<div class="modal-body Modal-Body">
<table>
<tr>
<th>Document :</th>
<td>
<input type="file" id="FileUpload_Modal_Document" />
</td>
</tr>
<tr>
<th>Note :</th>
<td>
<textarea id="TextArea_Modal_Document_Note" style="width: 400px;"></textarea>
</td>
</tr>
</table>
</div>
<div class="modal-footer Modal-Footer">
<button type="button" class="btn btn-success" onclick="enterDocumentInfo()">Upload</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the most important part. I prefer to upload using the $.Ajax such as the example below. I was able to get only the file upload to work with the submitDocument()
Javascript :
function submitDocument()
{
var fileUpload = $("#FileUpload_Modal_Document").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
var options = {};
options.url = "FileUploadHandler.ashx";
options.type = "POST";
options.data = data;
options.contentType = false;
options.processData = false;
options.success = function (result) { alert("Gud"); };
options.error = function (err) { alert(err.statusText); };
$.ajax(options);
}
$.ajax({
type: "POST",
url: "Lease_View.aspx/enterDocument",
data: JSON.stringify({
leaseID: leaseID,
userID: userID,
note: note
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function ()
{
// Gud
},
error: function ()
{
// Bad
}
});
Codebehind FileUpload
public class FileUploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
// Upload code here
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("File(s) Uploaded Successfully!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
WebMethod Codebehind
I prefer to be able to upload file through this instead of above.
[System.Web.Services.WebMethod]
public static void enterDocument(string leaseID, string userID, string note)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString);
SqlCommand cmd;
cmd = new SqlCommand("INSERT INTO Lease_Documents " +
"(File_Name) " +
"VALUES " +
"(#File_Name)", conn);
cmd.Parameters.AddWithValue("#File_Name", note);
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
}

I figured it out. Basically how to pass additional parameters is using data.append(name, value) in the javascript. You can receive the value in the .ashx handler by using (HttpContext)context.Request.Form["name"]. Unfortunately it is using the handler instead of the webmethod, but at least it works.
In Javascript
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
data.append("Note", note);
In Codebehind
string note = context.Request.Form["Note"].ToString();

Uploading file and $_POST with AJAX fails

I'm trying to upload a file and some text inside a textarea together using AJAX. I'm getting the following error in the PHP page that receives the data:
Notice: Undefined index: guion in file/path/here on line X
It means that the file is not being sent. Tried var_dump $_FILES and it output:
array(0) { }
HTML Code:
<div id="_AJAX_"></div>
<div role="form">
<div id="fileGuionGroup" class="form-group">
<label for="guion">Archivo Guión</label>
<input id="fileGuion" type="file" name="guion">
</div>
<div id="txtComentarioGroup" class="form-group">
<label for="comentario">Comentario</label>
<textarea id="txtComentario" class="form-control" name="comentario" rows="4" placeholder="Ejemplo: Solicito que por favor se monte este curso en plataforma."></textarea>
</div>
</div>
<button id="send_request" type="button" class="btn btn-primary btn-block" onclick="submitSolicitud(`{$cursoKey}`)"><i class="fa fa-fw fa-cogs"></i> Solicitar Montaje</button>
Javascript Code:
function submitSolicitud(cursoKey) {
var fileGuion = document.getElementById('fileGuion');
var txtComentario = document.getElementById('txtComentario');
var formGroupGuion = document.getElementById('fileGuionGroup');
var formGroupComentario = document.getElementById('txtComentarioGroup');
formGroupGuion.className = "form-group";
formGroupComentario.className = "form-group";
var guion = fileGuion.value;
var comentario = txtComentario.value;
var formData = new FormData();
formData.append('guion', guion);
formData.append('comentario', comentario);
connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
connect.onreadystatechange = function () {
onRSCallback(cursoKey);
};
connect.open('POST', '?view=modalsMatriz&modal=montaje&id=' + cursoKey + '&action=solicitarMontaje', true);
connect.setRequestHeader("Content-Type", "multipart/form-data");
connect.setRequestHeader("X-File-Name", guion.name);
connect.setRequestHeader("X-File-Size", guion.size);
connect.setRequestHeader("X-File-Type", guion.type);
connect.send(formData);
};
PHP Code:
case 'solicitarMontaje':
// This is the line that has the error of undefined index.
die($_FILES['guion']);
try {
if (!isset($_FILES['guion'])) {
# Code 1: Archivo Guión Field vacía
throw new Exception(1);
} elseif (!isset($_POST['comentario']) || $_POST['comentario'] == "") {
# Code 2: Comentario Field vacío
throw new Exception(2);
}
$tmp_file = $_FILES['guion']['tmp_name'];
$filename = $_FILES['guion']['name'];
move_uploaded_file($tmp_file, 'uploads/guiones/'.$filename);
die(0);
//$curso->crearSolicitudMontaje($_POST['comentario']);
} catch (Exception $e) {
# Output message to the screen so that Ajax captures it via connect.responseText #curso_FormMontaje.js
echo $e->getMessage();
}
break; # ./ case 'solicitarMontaje'
I've tried it using FormData() and Content-Type multipart/form-data but it did not work at all. Instead it was making the page be embedded inside the _AJAX_ div that shows the messages returned from the server (such as success messages, errors at some fields i.e fields that were sent empty).
This is what I get as result using FormData when clicking the submit button:
https://postimg.org/image/rsnrt3yq9/

Here is a very simple form data example, given what you have provided:
<script>
$(document).ready(function(){
// I don't know what your form is called...
$('.uploader').submit(function(e) {
// Clone the file input
var getFileInput = $("#fileGuion").clone();
// Stop form from submitting
e.preventDefault();
$.ajax({
url:'/url/to/ajax/dispatcher.php',
// Use FormData object, pass form
data: new FormData($(this)[0]),
processData: false,
contentType: false,
type: 'post',
success: function(response) {
// Put html back into placeholder
$('#_AJAX_').html(response);
// Replace the input
$("#fileGuion").replaceWith(getFileInput);
}
});
});
});
</script>
<div id="_AJAX_"></div>
<form class="uploader">
<label for="guion">Archivo Guión</label>
<input id="fileGuion" type="file" name="guion">
<label for="comentario">Comentario</label>
<textarea id="txtComentario" class="form-control" name="comentario" rows="4" placeholder="Ejemplo: Solicito que por favor se monte este curso en plataforma."></textarea>
<label>
<input type="checkbox" id="ackCheckbox"> <i>He revisado y estoy seguro de continuar con esta acción.</i>
</label>
<input type="submit" value="Upload">
</form>

Turns out that what was causing issues were the HTTP headers (setRequestHeader). I removed them and edited the code a little bit, here's what it looks like now fully functional:
JavaScript Code:
function submitSolicitud(cursoKey) {
var fileGuion = document.getElementById('fileGuion');
var txtComentario = document.getElementById('txtComentario');
var guion = fileGuion.files[0];
var comentario = txtComentario.value;
var formData = new FormData();
formData.append('guion', guion);
formData.append('comentario', comentario);
connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
connect.onreadystatechange = function () {
onRSCallback(cursoKey);
};
connect.open('POST', '?view=modalsMatriz&modal=montaje&id=' + cursoKey + '&action=solicitarMontaje', true);
connect.send(formData);
};
As expected, the data is recognized by PHP as below:
The file "guion" comes into PHP's $_FILES array ($_FILES['guion']).
The "comentario" field (textarea) is sent inside PHP's $_POST array ($_POST['comentario']).
Finally, both HTML and PHP code stayed the same and the conclusion is that by not setting the HTTP headers they seem to take the proper value automatically so that the request processes correctly.

base64 code send to server by java script, ajax

I am using Html5, Java script, ajax and java. I am uploading a image from desktop to the crop and after the crop it is showing in bootstrap modal in same page. But i am not getting URL for this Image, I am getting some Base64 code and when i am sending this base64 code than it is not working.
I seen this post but i did not get any solution from this link:
https://stackoverflow.com/
This code for static image, Showing first time.
My code:
HTML:
<div class="img-container">
<img src="../assets/img/picture.jpg" alt="Picture">
</div>
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="download" download="cropped.png" href="javascript:void(0);">Upload</a>
</div>
</div>
Java script Code:
(function () {
var $image = $('.img-container > img');
var $download = $('#download');
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
if (!$download.hasClass('disabled')) {
$download.attr('href', result.toDataURL());
//console.log("*****************"+result.toDataURL());
var swapUrl = result.toDataURL();
console.log("*******" + swapUrl);
// document.getElementById('replaceMe').src = swapUrl;
$('#download').click(function () {
var b = result.toDataURL();
$.ajax({
url: "/sf/p/customizeText",
type: 'GET',
data: b,
success: function (response) {
console.log("999999999999999999999999999999999----------------" + b)
},
complete: function (response) {
},
error: function (response) {
}
});
});
}
}
I am assign result.toDataURL() into variable b. But it is showing some base64 code.
How i am send this image to server.
I am giving one snippet.
Please give me some idea achieve to this solution.

Hi you can check this solution also
Javascript code
var base64before = document.querySelector('img').src;
var base64 = base64before.replace(/^data:image\/(png|jpg);base64,/, "");
var httpPost = new XMLHttpRequest();
var path = "your url";
var data = JSON.stringify(base64);
httpPost.open("POST", path, false);
// Set the content type of the request to json since that's what's being sent
httpPost.setRequestHeader('Content-Type', 'application/json');
httpPost.send(data);
This is my Java code.
public void saveImage(InputStream imageStream){
InputStream inStream = imageStream;
try {
String dataString = convertStreamToString(inStream);
byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(dataString);
BufferedImage image = ImageIO.read(new ByteArrayInputStream(imageBytes));
// write the image to a file
File outputfile = new File("/Users/paul/Desktop/testkey/myImage.png");
ImageIO.write(image, "png", outputfile);
}catch(Exception e) {
System.out.println(e.getStackTrace());
}
}
static String convertStreamToString(java.io.InputStream is) {
java.util.Scanner s = new java.util.Scanner(is).useDelimiter("\\A");
return s.hasNext() ? s.next() : "";
}

Displaying binary file (pdf) in IE 11

I am trying to display a binary file using the method suggested in this post AngularJS: Display blob (.pdf) in an angular app. This is working nicely in Chrome and FF, but IE 11 is giving me "Error: Access Denied".
Does anyone know if it has something to do with the Blob object and can point me in the right direction?
Here is my js code:
$http.get(baseUrl + apiUrl, { responseType: 'arraybuffer' })
.success(function (response) {
var file = new Blob([response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
$scope.pdfContent = $sce.trustAsResourceUrl(fileURL);
})
.error(function () {
});
and my html:
<div ng-controller="PDFController" class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" onloadstart="">
<object data="{{pdfContent}}" type="application/pdf" style="width:100%; height:1000px" />
</div>
</div>

IE 11 blocks display of blob, you need to use the following:
var byteArray = new Uint8Array(someByteArray);
var blob = new Blob([byteArray], { type: 'application/pdf' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob);
}
else {
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
}

Dynamically content bootstrap modal dialog from PHP Symfony2

I'm working with bootbox to render a forms with symfony 2. So I've a one trouble when I wanna change the content dynamically I don't know how.
So this is that I wanna
I click a button that render a Form from controller embebed inside of modal dialog
<button class="btn btn-primary btn-new" data-toggle="modal" data-target="#agregarRonda">
Add My Entity
</button>
<div style="display: none;" class="modal fade" id="agregarRonda" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add my Entity</h4>
</div>
<div class="modal-body">
{% embed "projete:MyEntity:newMyEntity.html.twig" %}
{% endembed %}
</div>
</div>
</div>
</div>
2.When I render a Form newMyentity.html.twig this has a button that redirecting to this method inside of my controller on symfony like:
public function createMyEntityAction(Request $request)
{
$user = $this->get('security.context')->getToken()->getUser();
$entity = new MyEntity();
$form = $this->createMyEntityForm($entity);
$form->handleRequest($request);
if ($form->isValid())
{
if( ifNotExist( $entity->getDescription() ) )
{
//Do the right things
}
else{
/*
* Return content to the modal dialog and don't hide modal dialog?
*/
}
}
}
So, I call a method ifNotExist to check somethings.If return false I wish to send content to the modal dialog without hide the modal dialog and modify the content.
How can I do it?
Thanks.

You can do something like this:
public function createMyEntityAction(Request $request)
{
$user = $this->get('security.context')->getToken()->getUser();
$entity = new MyEntity();
$form = $this->createMyEntityForm($entity);
if ($request->getMethod()=="POST"){
$form->handleRequest($request);
if ($form->isValid())
{
$em = $this->getDoctrine()->getManager();
$em->persist($entity);
$em->flush();
return new Response($entity->getId(),201);
}
}
return $this->render('yourFormTemplate.html.twig', array('form' => $form->createView() );
}
Your entity:
use Symfony\Component\Validator\Constraints as Assert;
...
/**
* MyEntity
* #ORM\Entity()
* #ORM\Table()
*/
class MyEntity
{
...
/**
*
* #Assert\NotBlank(message ="Plz enter the description")
*/
private $description;
...
}
Your JS:
$('#yourAddBtnId').on('click', function(){
var $modal = $('#yourModalId')
$.get("yourURL", null, function(data) {
$modal.find('modal-body').html(data);
})
// create the modal and bind the button
$('#yourModalId').dialog({
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function() {
that = this;
var data = {};
// get the data from your form
$(that).find('input, textarea').each(function(){
data[$(this).attr('name')] = $(this).val();
})
// Post the data
$.post( "yourURL", function(data , status) {
if ( "201" === status){
$modal.modal('hide');
}
else {
$modal.find('modal-body').html(data);
}
});
}
}
});
});