Hello,
I would like to use image uploading with Ajax post. My codes are as follows;
<input type="file" id="file" data-size="sm" data-badge="false" data-iconName="glyphicon-inbox" data-buttonName="btn-primary" name="receipt">
$.ajax({
url: '',
type: "post",
data: {'_token': '{{ csrf_token() }}','receipt':$('#file').val()}
});
$receipt = $request->file('receipt');
$fileName = $receipt->getClientOriginalName();
$fileExtension = $receipt->getClientOriginalExtension();
$name = str_slug($fileName) . str_slug(str_random(5)) . '.' . $fileExtension;
$move = $receipt->move('Backend/avatar/',$name);
$ex->receipt = $name;
$ex->save();
But, I am getting this error;
Call to a member function getClientOriginalName() on null
I have a lot of inputs. The form is like Personal Info. I have to use my codes like that. How can I solve this ?
i have same issue with uploading
for this error because the $('#file').val()
is give you the file name with extension thats why the getClientOriginalName and getClientOriginalExtension will not work and you will get a null return
for solution i dont have as iam still waiting for help here
https://laracasts.com/discuss/channels/general-discussion/how-to-deal-with-upload-input-with-vuejs
You need a FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
@sylar but is it possible to pass the FormData with vuejs ??
Why not ? I'm not familiar with vuejs but i guess u can send formdata object through $http.post or something like this in (vuejs world)
I got it working by using the new html5 ajax formData object and then in my ajax request setting the processData and contentType to false like so: (Note this will only work ie10+)
var submitAjaxRequest = function(e) {
var formData = new FormData(this);
$.ajax({
type: POST,
url: "",
data: formData,
processData: false,
contentType: false,
success: function() {},
});
};
$('form[data-remote]').on('submit', submitAjaxRequest);
Please or to participate in this conversation.