Hi Friends,
I am trying to upload an image using ajax in laravel 5.4
Issue :
Formdata is empty on server-side
CODE :
View :
<form role="form" action="{{route('auth.upload')}}" method="post" enctype="multipart/form-data" id="form3">
{{ csrf_field() }}
<h3>Upload Logo</h3>
<div class="form-group">
<label class="custom-file upload-image">
<input type="file" id="image" name="image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
</div>
<button type="submit" class="btn btn-upload">Save Image</button>
</form>
JS :
$('#form3').on('submit',function(e){
e.preventDefault();
var url = $(this).attr('action'),
post = $(this).attr('method'),
data = new FormData(this);
$.ajax({
url: url,
method: post,
data: data,
success: function(data){
console.log(data);
},
error: function(xhr, status, error){
alert(xhr.responseText);
},
processData: false,
contentType: false
});
});
Route :
Route::post('home/form3', 'HomeController#store')->name('auth.upload');
Controller :
public function store(Request $request){
if ($request->ajax()) {
return $request->all(); // THIS IS RETURNING EMPTY OBJECT
if ($request->hasFile('image')) {
$name = $request->image->getClientOriginalName();
$request->image->storeAs('public/upload',$name);
$company = new Company;
$url = Storage::url($name);
$company->update(['image'=>$url]);
return response(['msg'=>'image uploaded']);
}else{
return response(['msg'=>'No file has selected']);
}
}
}
return response from server side is :
Object {_token: "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5", image: Object}
image : Object
_token : "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5"
__proto__ : Object
I can see only token is returning but not data of uploaded image. If I submit form without using ajax then it is working fine.
Output if submitted without using ajax (this is the output I am expecting even submitted using ajax):
array:2 [▼
"_token" => "eVEjl9UW4rU69oz1lIIiuNABZVpRJFldDST02Nje"
"image" => UploadedFile {#229 ▼
-test: false
-originalName: "empty-normal.png"
-mimeType: "image/png"
-size: 85494
-error: 0
#hashName: null
path: "C:\xampp\tmp"
filename: "php917E.tmp"
basename: "php917E.tmp"
pathname: "C:\xampp\tmp\php917E.tmp"
extension: "tmp"
realPath: "C:\xampp\tmp\php917E.tmp"
aTime: 2017-05-18 11:17:11
mTime: 2017-05-18 11:17:11
cTime: 2017-05-18 11:17:11
inode: 0
size: 85494
perms: 0100666
owner: 0
group: 0
type: "file"
writable: true
readable: true
executable: false
file: true
dir: false
link: false
linkTarget: "C:\xampp\tmp\php917E.tmp"
}
]
Can any one help me in solving this issue ?
**THANKS IN ADVANCE...
Try this, it will help you.
$(document).on('submit', 'yourformId', function (event) {
event.stopPropagation();
event.preventDefault();
var data = new FormData($(this)[0]);
if (xhr && xhr.readyState !== 400 && xhr.status !== 200) {
xhr.abort();
}
var xhr = $.ajax({
url: "urltoUpload",
method: "POST",
cache: false,
data: data,
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// dataType: 'json',
statusCode: {
404: function () {
alert("status message")
},
500: function () {
alert("server down");
}
},
beforeSend: function (jqXHR, setting) {
if (setting.status !== 200) {
console.log("You can put here")
}
},
error: function (jaXHR, textStatus, errorThrown) {
// Now it will get parse error because dataType is json and response is html
// console.log(errorThrown);
},
success: function (data, textStatus, jqXHR) {
console.log(data);
if (typeof data.error === 'undefined') {
// Success so call function to process the form
console.log('SUCCESS: ' + data.success);
}
else {
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
complete: function (jqXHE, textStatus) {
document.body.innerHTML = "dfafsaf";
}
});
});
In you controller you can use
dd($request->all());
for your sure !!
Related
I want to create an upload adapter for ckeditor,
I have an issue in my laravel ajax application,
here is my code.
export default class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
let data = new FormData();
data.append('upload', this.loader.file);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: '/loadImage',
type: 'POST',
data: data,
dataType: 'json',
async:false,
processData: false,
contentType: false,
success: function (data) {
console.log(data.get('upload'));
},
error: function (request, status, error) {
console.log(error);
}
});
});
}
}
I stuck in responding with ajax to laravel controller.
Here is my Controller function:
try {
$file = $request->file('upload');
$uploader = MediaUploader::fromSource($file);
$uploader->setAllowedMimeTypes(['image/jpeg', 'image/gif', 'image/png']);
$uploader->setAllowedExtensions(['jpg', 'jpeg', 'png', 'gif']);
$media = $uploader->upload();
return response()->json([
'uploaded' => true,
'url' => $media->getUrl()
]);
} catch (\Exception $e) {
return response()->json(
[
'uploaded' => false,
'error' => [
'message' => $e->getMessage()
]
]
);
}
Here is my error
SyntaxError: Unexpected end of JSON input
at parse (<anonymous>)
at ajaxConvert (app.js:11826)
at done (app.js:12294)
at XMLHttpRequest.<anonymous> (app.js:12587)
What is the error in my code ???
I cant get the file information in laravel controller..
How can i solve this issue...? Help me Please!!!
You have data - empty
JSON.parse(''); // SyntaxError: Unexpected end of input
Add verification:
data = data != "" ? $.parseJSON(data) : {};
I want to update my state when I get errors from my ajax call.
My code:
var EmailForm = React.createClass({
getInitialState: function(){
return {
password:'',
email: '',
errors: ''
};
},
componentDidMount: function() {
this.serverRequest = $.get('/accounts/email-form/', function (result) {
var userInfo = result;
this.setState({
email: userInfo.email
});
}.bind(this));
},
submit: function (e){
var self;
e.preventDefault()
self = this;
console.log(this.state);
var data = {
password: this.state.password,
email: this.state.email,
CSRF: csrftoken
};
// Submit form via jQuery/AJAX
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$.ajax({
type: 'POST',
url: '/accounts/email-form/',
data: data,
datatype: JSON
})
.done(function(data) {
toastr.success('Profile updated');
})
.error(function(jqXhr) {
var error = jqXhr.responseJSON; //How can I append this errors to my errors state ?
toastr.error('There is some errors in your request');
});
},
passwordChange: function(e){
this.setState({password: e.target.value});
},
emailChange: function(e){
this.setState({email: e.target.value});
},
render: function() {
return (
<form onSubmit={this.submit}>
<div className="form-half">
<label htmlFor="password" className="input-label">Current Password</label>
<BasicInputPassword valChange={this.passwordChange} val={this.state.password}/>
<span className="form-error is-visible">{this.state.errors.password}</span>
</div>
<div className="form-half">
<label htmlFor="email" className="input-label">New email</label>
<BasicInput valChange={this.emailChange} val={this.state.email}/>
<span className="form-error is-visible">{this.state.errors.email}</span>
</div>
<button type="submit" className="button secondary" >Submit</button>
</form>
);
}
});
I have response errors in error variable. How can I update state errors with this json and display for example state.errors.email easy ? Is this possible ?
use this.setState()
var that = this;
$.ajax({
type: 'POST',
url: '/accounts/email-form/',
data: data,
datatype: JSON
})
.done(function(data) {
toastr.success('Profile updated');
})
.fail(function(xhr, status, error) {
that.setState({
//assign error to whatever you want under `state`
});
});
*make sure this is pointing at the right scope. Or use arrow functions for lexical this.
$.get('some.php')
.done(function(msg){ })
.fail(function(xhr, status, error) {
this.setState({});///here <===
}).bind(this);
or
$.ajax({
type: "GET",
url: "test.com",
success: function(msg){
alert( "Data Saved: " + msg );
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("some error");
}
});
you must use .fail() and you can access to error in .fail() and store in state.
You can do this.
const self = this;
$.get('api-url')
.done(function(msg){
// some work
})
.fail(function(xhr, status, error) {
self.setState({error: xhr.responseJSON });
});
As the this context changes so you can assign it at a variable first to avoid the confusion with the context.
I have this function in my UsersController. I created this JSON response by using the _serialize key:
public function test() {
$arrEmail = $this->User->find('first');
$this->set('foo', $arrEmail);
$this->set('_serialize', array('foo') );
}
Now in the client side, in my phonegap application, I am trying to access this data. So I put the following:
<script>
$( document ).ready(function() {
alert(1);
$.ajax({
url : "http://localhost/database/users/" + 'test.json',
async : false,
cache : false,
crossDomain: true,
dataType : 'json',
type : 'post',
success : function(result) {
alert('success');
alert(JSON.stringify(result));
},
error : function(xhr, status, err) {
//con failed
alert(err+' '+xhr+' '+status);
}
});
});
</script>
The alert gives me the following .
Now I need to access to the username and the other attributes. I tried result.attributename but i always get undefined as a response.
EDIT:
`result.foo.User.id` solved the issue.
I am now trying to build a dnn module using ajax calls. But there is a jquery error stating
SyntaxError: Unexpected token <
I have tried to work around with ajax "url: " and tried to create a new ascx at the root folder but still showing error 404.
My ajax call is as below
$.ajax({
url: "NewsManagement.ascx/Add",
contentType: "application/json; charset=utf-8",
dataType: "json",
method: "POST",
beforeSend: function () {
},
cache: false,
data: {
title : $('#txt_Title').val(),
news_content : $('#txt_Content').val(),
image : $('#file_Image').val(),
chapter_id : $('#sel_Chapter').val(),
is_draft : $('#chk_Draft').val(),
posted_date : $('#dp_PostDate').val(),
created_by : "",
lastupdate_by : ""
},
success: function (data) {
console.log(data);
if (data == "success") {
console.log(data);
}
else {
initMdlError("SERVER : " + data);
}
},
error: function (data, textStatus, error) {
// ERROR IS BEING CALLED FROM HERE
console.log("JQUERY JAVASCRIPT : " + error);
initMdlError(error);
},
complete: function () {
console.log('complete');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is there any way to solve the issues?
The problem you're running into is that DNN isn't handling the requested URL properly that you are calling. If you want to call a service URL in DNN you're going to want to setup routes to handle the calls.
namespace Christoc.Com.Modules.SlidePresentation.services
{
public class SlidePresentationRouteMapper : IServiceRouteMapper
{
public void RegisterRoutes(IMapRoute mapRouteManager)
{
mapRouteManager.MapRoute("SlidePresentation", "{controller}.ashx/{action}",
new[] {"Christoc.Com.Modules.SlidePresentation.services"});
}
}
}
In the Controller you can define the methods available
[DnnAuthorize(AllowAnonymous = true)]
public ActionResult ListOfSlides()
{
try
{
var slides = Slide.GetSlides(ActiveModule.TabID, ActiveModule.ModuleID);
return Json(slides, JsonRequestBehavior.AllowGet);
}
catch (Exception exc)
{
DnnLog.Error(exc);
return Json(null, JsonRequestBehavior.AllowGet);
}
}
https://slidepresentation.codeplex.com/SourceControl/latest#DesktopModules/SlidePresentation/services/SlidePresentationController.cs
sample Javascript
//get slides on initialization
this.init = function(element) {
//var data = {}; //removed because we don't need this
//data.moduleId = moduleId; //removed because we don't need this when calling setModuleHeaders
//data.tabId = tabId; //removed because we don't need this
//serviceFramework.getAntiForgeryProperty(); //removed because we don't need this
$.ajax({
type: "POST",
cache: false,
url: baseServicePath + 'ListOfSlides',
//data: data,
//dataType:"json",
beforeSend: serviceFramework.setModuleHeaders
}).done(function(data) {
viewModel.slides = ko.utils.arrayMap(data, function(s) {
return new slide(s);
});
ko.applyBindings(viewModel);
$(element).jmpress();
}).fail(function () {
Console.Log('Sorry failed to load Slides');
});
};
Here's an example module that does this
https://slidepresentation.codeplex.com/
And a user group video I did years ago on this module.
https://www.youtube.com/watch?v=hBqn5TsLUxA
in my MVC layout page I have the following:
$("body").ajaxError(
function (e, request) {
if (request.status == 403 || request.status == 500) {
window.location = '#Url.Action("LogOn", "Account", new {area = "", msg = "forbidden", returnUrl = HttpContext.Current.Request.RawUrl})' + window.location.hash;
return;
}
window.location = '#Url.Action("Index", "Error")';
}
);
on another page I'm performing an ajax call like so:
...
$.when(refreshActionLinks(row, machineId, packageId)).done(function(a1) {
row.find("span").text(opStatus).removeClass("pending");
progressbar.progressbar("destroy");
$(row).flash(bg[1], 1000);
});
...
javascript function:
function refreshActionLinks($row, machineId, packageId) {
try {
var json = JSON.stringify({ packageId: packageId, machineId: machineId, tabType: $("#TabType").val() });
console.log("refreshActionLinks => " + json);
$row.find("td.options div.actionLinks").html("<img src='#Url.Content("~/Content/images/ajax-load2.gif")' />"); // pending
return $.ajax({
url: "#Url.Action("GetActionLinks", "Packages")",
data: json,
timeout: 50000,
contentType: 'application/json',
type: 'POST',
success: function (data) {
if ($row.length) {
$row.find("td.options div.actionLinks").html(data);
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
} catch(e) {
// hide icons
$row.find("a.action").remove();
}
}
The issue is that while refreshAction function is executing, clicking a menu link causes the ajax call to error out - which in this case is correct. BUT it does take me to /Index/Error page which is NOT correct. I would like "$("body").ajaxError" to handle all ajax errors on the site EXCEPT on the page I'm calling refreshActionLinks. Notice, I already have try/catch surrounding my ajax call. why doesn't that work?
thanks
figured it out:
ajax has a settings:
global: false
now my function looks like this:
function refreshActionLinks($row, machineId, packageId) {
try {
var json = JSON.stringify({ packageId: packageId, machineId: machineId, tabType: $("#TabType").val() });
console.log("refreshActionLinks => " + json);
$row.find("td.options div.actionLinks").html("<img src='#Url.Content("~/Content/images/ajax-load2.gif")' />"); // pending
return $.ajax({
url: "#Url.Action("GetActionLinks", "Packages")",
global: false, // disable error pages on failed ajax calls
data: json,
timeout: 50000,
contentType: 'application/json',
type: 'POST',
success: function (data) {
if ($row.length) {
$row.find("td.options div.actionLinks").html(data);
}
}
});
} catch(e) {
// hide icons
$row.find("a.action").remove();
}
}