Please help. I'm working on a MVC project using dropzone upload multiple files based on this sample http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/.
I have this work on Chrome, but I could not figure out why it doesn't work on IE 11. When I debug in VS2013, it doesn't seem to trigger the SaveUploadedFile action. Again, it works in Chrome. Below is the codes in my MVC project:
View:
#Styles.Render("~/Content/css")
<div class="container">
<div class="jumbotron">
<form action="~/PhotoAlbum/SaveUploadedFile/#Model.AlbumID" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" value="Upload" />
</div>
</form>
</div>
</div> <!-- /container -->
<style type="text/css">
.dz-max-files-reached { background-color: red; }
</style>
#section scripts {
#Scripts.Render("~/bundles/dropzonescripts")
<script type="text/javascript">
//File Upload response from the server
Dropzone.options.dropzoneForm = {
maxFiles: 20,
init: function () {
this.on("maxfilesexceeded", function (data) {
var res = eval('(' + data.xhr.responseText + ')');
});
this.on("onSuccess", function (data) {
alert("Upload successfully!");
});
this.on("onError", function (data) {
alert("Upload Failed!");
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-info glyphicon glyphicon-remove-sign'> Remove </button>");
alert("Upload Failed!");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
}
};
</script>
}
Action:
public ActionResult SaveUploadedFile(int id)
{
EZone_PhotoAlbum ezAlbum = repoAlbum.GetPhotoAlbumByID(id);
bool isSavedSuccessfully = true;
string fName = "";
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
//Save file content goes here
fName = file.FileName;
if (file != null && file.ContentLength > 0)
{
var originalDirectory = new DirectoryInfo(string.Format("{0}\\", Server.MapPath(sMapPath + "\\" + ezAlbum.AlbumFolder)));
string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "original");
var fileName1 = Path.GetFileName(file.FileName);
bool isExists = System.IO.Directory.Exists(pathString);
if (!isExists)
System.IO.Directory.CreateDirectory(pathString);
var path = string.Format("{0}\\{1}", pathString, fileName1);
file.SaveAs(path);
}
}
if (isSavedSuccessfully)
{
return Json(new { Message = fName });
}
else
{
return Json(new { Message = "Error in saving file" });
}
}
.Headers:
General:
Remote Address:[::1]:80
Request URL:http://localhost/eZone/PhotoAlbum/SaveUploadedFile/2
Request Method:POST
Status Code:200 OK
Response Headers: view parsed
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 5.1
X-AspNet-Version: 4.0.30319
Persistent-Auth: true
X-Powered-By: ASP.NET
WWW-Authenticate: Negotiate oRswGaADCgEAoxIEEAEAAABDh+CIwTbjqQAAAAA=
Date: Fri, 26 Jun 2015 16:01:30 GMT
Content-Length: 26
Request Headers view parsed
POST /eZone/PhotoAlbum/SaveUploadedFile/2 HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 3501896
Authorization: Negotiate oXcwdaADCgEBoloEWE5UTE1TU1AAAwAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAABXCiOIGAbEdAAAAD6cslqGeHsjhn4ZY5uX0W2mjEgQQAQAAAPUXp1AtIpqEAAAAAA==
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySvGz79kd1fOGLop0
Accept: application/json
Cache-Control: no-cache
X-Requested-With: XMLHttpRequest
Referer: http://localhost/eZone/photoalbum/Detail/2
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Request Payload
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="null"
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="null"
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="file"; filename="IMG_0057.JPG"
Content-Type: image/jpeg
------WebKitFormBoundarySvGz79kd1fOGLop0--
.Response:
{"Message":"IMG_0057.JPG"}
Related
I'm trying to send file, it works with common form confirm, but don't with XHR.
Here my HTML:
<form action="ajax/upload.php" method="post" name="form1" enctype="multipart/form-data" id="id1">
<input type="file" name="input1">
<input type="submit" name="submit1">
</form>
<form action="ajax/upload.php" method="post" name="form2" id="id2">
<input type="file" name="input2">
<input type="submit" name="submit2">
</form>
JS:
document.querySelector('#id2').onsubmit = function(e) {
e.preventDefault();
var file = document.querySelector('#id2 input[type="file"]').files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/upload.php", true);
var boundary = String(Math.random()).slice(2);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.send(file);
}
PHP:
echo '<pre>';
var_dump($_REQUEST);
echo 'print_r($_FILES); <br>';
echo 'Result: <br><br>';
print_r($_FILES);
print "</pre>";
I send same file, responses for common submit:
array(1) {
["submit1"]=>
string(31) "Отправить запрос"
}
print_r($_FILES);
Result:
Array
(
[input1] => Array
(
[name] => CRC75.otf
[type] => application/vnd.oasis.opendocument.formula-template
[tmp_name] => /tmp/phpbNWcgk
[error] => 0
[size] => 411456
)
)
For AJAX:
array(0) {
}
print_r($_FILES);
Result:
Array
(
)
I can't understand why, file attached exist:
document.querySelector('#id2 input[type="file"]').files[0]
File { name: "CRC75.otf", lastModified: 1529516347000, webkitRelativePath: "", size: 411456, type: "application/vnd.oasis.opendocument.formula-template" }
Headers of AJAX request looks normal
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en;q=0.5
Connection: keep-alive
Content-Length: 411456
Content-Type: multipart/form-data; boundary=44316423440108066
Host: localhost
Referer: http://localhost/
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/61.0
P.S.: It's the requirement that I cannot send a POST request.
You can't send a File directly in the send() parameter, you need to use a FormData object.
document.querySelector('#id2').onsubmit = function(e) {
e.preventDefault();
var formdata = new FormData;
var file = document.querySelector('#id2 input[type="file"]').files[0];
formdata.append("input2", file);
formdata.append("submit2", "Отправить запрос");
var xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/upload.php", true);
xhr.send(formdata);
}
Don't use xhr.setRequestHeader() to set the Content-type header. This is done automatically by the browser. If you do it yourself, the boundary you specify won't match what it's actually sending.
I am trying to upload a file to the server , I do that successfully but after success, angular or browser or I don't know how just redirect me back to my initial state in angular js
the success callback hit and I have no error
ng-fileupload version 3.2.5.
here is my function in the controller :
$scope.uploadIssueAttachment = function (files, issue) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
$upload.upload({
url: '/Handlers/UploadHandler.ashx?des=HelpDesk'
, method: 'POST'
, file: file
, }).progress(function (evt) {}).then(function (data) {
var _fileName = data.headers('fileName');
var _originalFileName = data.headers('orgName');
var _type = data.headers('format');
$scope.newIssueAttachments.push({
fileName: _originalFileName
, temporaryName: _fileName
, fileType: _type
});
}).catch(function (error) {
console.log(error);
});
}
}
};
and here is my html markup
<span ng-file-select ng-file-change="uploadIssueAttachment($files,newIssue)" class="file-input btn btn-sm btn-file" >
the function hit and I upload a file, browser response with 200 status
Request URL:http://localhost:3080/Handlers/UploadHandler.ashx?des=HelpDesk
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:3080
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Cache-Control:private
Content-Length:0
Date:Mon, 17 Jul 2017 10:33:56 GMT
fileName:ea8c8799-0f48-49f4-a33c-dca0726af929.png
format:image/png
name:ea8c8799-0f48-49f4-a33c-dca0726af929.png
orgname:avator.png
Server:Microsoft-IIS/10.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpcU291cmNlXFdvcmtzcGFjZXNcUE1PLkFDQVxEZXZcQk1TXFJheWthbS5Ccm9rZXJzLldlYi5NVkNcSGFuZGxlcnNcVXBsb2FkSGFuZGxlci5hc2h4?=
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:16544
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylgAXmkMLtLGhRRU4
Cookie:ASP.NET_SessionId=ska22gomunzfvxqv1wwihbmh; .ASPXAUTH=A8E3E65AECDBB20189E01D261B3580E6997A7763615AD085A0E92F5F44B2D7DFA2C0E39BA47876EAE614EF06C56E692B71982D9035F84075C466E63632653E3E7CC03F042B850200EFBC2867E8A0F7EA3F8A7989AAB68E267891CB819AB9024D04DB430D6B8D8E692D64652CA2645681
Host:localhost:3080
Origin:http://localhost:3080
Referer:http://localhost:3080/admin/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Query String Parameters
view source
view URL encoded
des:HelpDesk
Request Payload
------WebKitFormBoundarylgAXmkMLtLGhRRU4
Content-Disposition: form-data; name="file"; filename="avator.png"
Content-Type: image/png
------WebKitFormBoundarylgAXmkMLtLGhRRU4--
and then with no error I just get redirected to my start page, I don't know how to track the event that changed state.
the interesting thing are when I heat breakpoint in dev console and I wait just for few minute, then there is no state change and everything goes well.
near to pull my hair.
any suggestion?
You havent wrote which version you are using but I think this structure will help you .Its always good to use then...catch in angular success is now deprecated.
You can see it here
upload Structure(with then...catch)
$upload.upload({
url: '<YOUR URL>'
file: <file>
}).progress(function (evt) {
// progress = parseFloat(evt.loaded / evt.total)*100;
}).then(function(result) {
//handle successful result
}).catch(function(errorCallback){
//you can see error here
});
Let me know if it wont work.
Edited
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
console.log(toState); //put break point over here try to debug
console.log(fromState);
});
I am trying to upload images and couple of form elements to a MVC Controller. The problem here isn't the model not being populated, because it works with application/x-www-form-urlencoded but seems to have trouble with multipart/form-data. The core of the problem is, that Request.Form is not being populated...
Converting Form to FormData:
function frmValuesAsFormData(submittedForm) {
return new FormData(submittedForm);
}
AJAX Function (asFormData is passed in as True in this case and method is POST and dataType is JSON):
function executeAJAX(method, url, data, asFormData, silent, callbackFunc, receiveFunc, dataType, targetDiv, appendToExistingContent, uid) {
var cType = "application/x-www-form-urlencoded";
var processData = true;
if (asFormData) {
cType = "multipart/form-data";
processData = false;
}
$.ajax({
method: method,
url: url,
data: data,
contentType: cType,
cache: false,
dataType: dataType,
processData: processData,
success: function (d, t, j) {
// Do something with result from controller...
}
});
}
POST Headers (From FireBug)
Accept application/json, text/javascript, /; q=0.01
Accept-Encoding gzip, deflate Accept-Language en-GB,en;q=0.5
Content-Length 936 Content-Type multipart/form-data Cookie
ASP.NET_SessionId=mzppxvimv03qb0smtyrgdw3z Host localhost:64727
Referer http://localhost:64727/Home/Contact User-Agent Mozilla/5.0
(Windows NT 10.0; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0
X-Requested-With XMLHttpRequest
POST Example (From FireBug):
-----------------------------26439188689323 Content-Disposition: form-data; name="imageFiles"; filename="WWKDK33.jpg" Content-Type:
image/jpeg
PNG ��� IHDR��"��"����xÕj��7IDATxÚíÚKÂ
ÐÞÿÒz�B3~Þ,Õb|nHàøÈ!B"D"D!B$!B"D"D!B$
!B"Dcdtå]µ
B"D!BÔKtb_xv-!B"Dunð+¯uÔ"D!BÑS*ï"B"D!B(Õl
B"D!B
ô¢ïü·½ä~"D!B¢URi,ÖÕ"D!BQ/Q:ò[*E"D!B¨a¼ÙôWÿéf"D!B¢]
HæL~eD!B"DöÍ_ÉòGGkA"D!BèD±}Çõò4
!B"DZôÀ½rª�"D!B¢eD¡¡y¡éøk!B
"D!ZGÔ;¯49ÛD!B"D"cöÊ#fåQ^D!B"D®I4_à|Ci#J!B"DÝ(s°
"D!B¢{7 £ÌÁ"D!B"D½DgBæant¿"D!BÑÖý¤ôm
"D!B"D"D!B$!B"A"D!D!B"A"D!ß|ÜYÆ
®«����IEND®B`
-----------------------------26439188689323 Content-Disposition: form-data; name="uploaderMode"
tournament
-----------------------------26439188689323--
Anyone any clues as to why it doesn't work? Thanks!
The issue is because when you send a FormData object in the request you have to set contentType to false so that no content-type header is sent. Try this:
if (asFormData) {
cType = false;
processData = false;
}
Also note that you could remove the need to send the asFormData property to your function entirely by just checking the type of the data property:
if (data.constructor == FormData) {
cType = false;
processData = false;
}
I have checked the other questions - this is not a duplicate.
I have tried all of the solutions I could find and implement.
I am trying to send data from task.php → showCats.php
task.php:
<script type="text/javascript">
$(document).on("click", ".btnCat", function () {
var filter = $(this).data("id");
alert(filter);
$.ajax({
type: 'POST',
url: 'showCats.php',
data: {'filter': filter},
});
$('div.container-fluid').load('showCats.php');
});
</script>
showCats.php:
$area = $_POST['filter'];
$sql = "select AID,name,surname,street_name,house_number, area, plz,poster,visible from addresses WHERE area LIKE '$area' AND visible LIKE 'show' ORDER BY AID DESC";
$rs = mysqli_query($con,$sql);
$str = '';
while ($res = mysqli_fetch_array($rs)) {
$str .= '
<div class="col-md-9">
<div class="task col-md-12 well" id='.$res['AID'].'>
<div>
<button class="btn btn-danger btn-xs btnDelete" id='.$res["poster"].' onclick="refresh()" data-id="'.$res['AID'].'">x</button>
</div>
<div>
<span>'. $res["name"].'</span>
<span>'. $res["surname"].'</span><br>
<span>'. $res["street_name"].'</span>
<span>'. $res["house_number"].'</span><br>
<span>'. $res["plz"].'</span>
<span>'. $res["area"].'</span>
</div>
</div>
</div>';
}
echo $str;
?>
var_dump($_POST); returns NULL, even though I can see the post value under Developer Tools in Chrome.
My GET:
Request URL:https://example.com/showCats.php
Request Method:GET
Status Code:200 OK
Remote Address:xxx:443
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 15 Jul 2016 18:43:56 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
Strict-Transport-Security:max-age=31536000
Transfer-Encoding:chunked
Request Headers
view source
Accept:text/html, */*; q=0.01
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,de;q=0.6
Connection:keep-alive
Cookie:PHPSESSID=vudgbb33574tfod2vu48hst830
Host:example.com
Referer:https://example.com/tasks.php
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest
My POST:
Request URL:https://example.com/showCats.php
Request Method:POST
Status Code:200 OK
Remote Address:xxx:443
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 15 Jul 2016 18:43:56 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
Strict-Transport-Security:max-age=31536000
Transfer-Encoding:chunked
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,de;q=0.6
Connection:keep-alive
Content-Length:12
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:PHPSESSID=vudgbb33574tfod2vu48hst830
Host:example.com
Origin:https://example.com
Referer:https://example.com/tasks.php
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Data
view source
view URL encoded
filter:Turgi
You are trying to send data from task.php -> showCats.php ! your code does that very well by using this:
$.ajax({
type: 'POST',
url: 'showCats.php',
data: {'filter': filter},
});
The problem is when you do this : $('div.container-fluid').load('showCats.php'); a GET request will be sent to the server! so It's normal to find that var_dump($_POST) return NULL.
If you want to show/get the response you can use the success event like this:
$.ajax({
type: 'POST',
url: 'showCats.php',
data: {'filter': filter},
//A function to be called if the request succeeds.
success: function(data) {
$('div.container-fluid').html(data)
},
//A function to be called if the request fails
error: function(xhr, status, error) {
alert('An error occurred:'+error);
}
});
setting a datatype parameter tells what kind of data you are sending.
type: "POST",
dataType: 'json',
I would concur with those comments above. Loading the program a second time does not report the values of the database call. Further, wouldn't AJAX normally return values to the calling program with an echo of json_encode, instead of just echoing the variable to a run of the PHP page that does not get viewed?
I am trying to write a Single Page App (SPA) based on AngularJS. The app should connect to a webserver that provides a RestFul services, but each end point requires username and password along with other parameters. Since I am a beginner in this area, before moving towards the actual development, I tried PostMan/Advanced Rest Client chrome extensions to verify the basic connections. A sample request preview :
POST /servicesNS/admin/search/search/jobs/export HTTP/1.1
Host: localhost:8089
Cache-Control: no-cache
Content-Type: application/x-www-form-urlencoded
search=search+error+|+table+host&output_data=xml&username=admin&password=unity3d
This is actually equivalent to the cURL command:
curl -k -u admin:unity3d --data-urlencode search="search error | table host" -d "output_mode=xml" https://localhost:8089/servicesNS/admin/search/search/jobs/result
After getting successful results in above mentioned ways, I am now looking for equivalent way of doing it in AngularJS.
var app = angular.module('TabsApp', []);
app.controller('TabsCtrl', function ($scope, $http)
{
login = function () {
$scope.userName ="admin";
$scope.password ="unity3d"
$http({
method :"POST",
url:"https://localhost:8089/servicesNS/admin/search/search/jobs/export",
data: { "username" : "admin" , "password": "unity3d", "search" : "search error"},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
console.log('status',status);
console.log('data',status);
console.log('headers',status);
});
}
});
This gives me error 401 Unauthorized, the headers of the response:
> Remote Address:127.0.0.1:8089 Request
> URL:https://localhost:8089/servicesNS/admin/search/search/jobs/export
> Request Method:POST Status Code:401 Unauthorized Request Headersview
> source Accept:application/json, text/plain, */* Accept-Encoding:gzip,
> deflate Accept-Language:en-US,en;q=0.8 Connection:keep-alive
> Content-Length:65 Content-Type:application/x-www-form-urlencoded
> Host:localhost:8089 Origin:http://localhost:63342
> Referer:http://localhost:63342/UI/UI1.html User-Agent:Mozilla/5.0
> (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
> Chrome/39.0.2171.71 Safari/537.36 Form Dataview sourceview URL encoded
> {"username":"admin","password":"unity3d","search":"search error"}:
> Response Headersview source Access-Control-Allow-Credentials:true
> Access-Control-Allow-Headers:Authorization
> Access-Control-Allow-Methods:GET,POST,PUT,DELETE,HEAD,OPTIONS
> Access-Control-Allow-Origin:* Cache-Control:private
> Connection:Keep-Alive Content-Length:130 Content-Type:text/xml;
> charset=UTF-8 Date:Sat, 29 Nov 2014 19:53:59 GMT Server:Splunkd
> Vary:Cookie, Authorization WWW-Authenticate:Basic realm="/splunk"
> X-Content-Type-Options:nosniff X-Frame-Options:SAMEORIGIN
And the output is :
<?xml version="1.0" encoding="UTF-8"?> <response> <messages>
<msg type="ERROR">Unauthorized</msg> </messages> </response>
Any idea what is going wrong?
If you are sending response in the format of 'application/x-www-form-urlencoded' the actual data format should be the same.
What you are sending currently is a JSON object. You would need to use $http tranformer to tranform the request: Something in line of
transformRequest: function (data) {
var postData = [];
for (var prop in data)
postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
return postData.join("&");
},
See a working fiddle here http://jsfiddle.net/cmyworld/doLhmgL6/