i am trying to send a blob image with ajax, this worked fine. however whenever i try out add another dataset in ajax it stops working. i only receive one. here is my code:
var formData = new FormData();
var id = new FormData();
formData.append('avatar', blob);
id.append('id', '<?php echo $token['token_confirmation']; ?>');
$.ajax('upload_img.php', {
method: 'POST',
data: {formData, id},
processData: false,
contentType: false,
i fixed the problem, the problem was that the append worked but it sent it over $_FILES AND $_POST
Related
This is my ajax request:
var files = $('#imgur_attach')[0].files;
if(files.length > 0){
var fd = new FormData();
// Append data
fd.append('file',files[0]);
fd.append('_token',$globalToken);
$.ajax({
type: "POST",
dataType: "json",
contentType: false,
processData: false,
url: host + "/attach-comment-image/" ,
data: {fd},
Controller:
public function attach(Request $request) {
$this->validate($request, [
'file' => 'image|required',
]);
When sending this ajax request, the validator tells me that the "file" field is required. Trying to return request->get('file') returns null.
However, when I do console.log(fd); before the ajax request, it returns the following:
Why is this happening? I don't normally upload files with AJAX over a regular POST request, so I don't understand what I'm missing.
Try stringify data before sending like this:
$.ajax({
...
data: {fd: JSON.stringify(fd),
...
you need to add multipart form data
contentType: "multipart/form-data",
Wrapping the input around with a form tag like this did the trick:
<form method="POST" enctype="multipart/form-data">
Not sure why setting contentType: "multipart/form-data" in the ajax request doesn't work, but this solution works so I'll just use this instead.
I know, similar questions had been asked before.
All questions I found concerns upload within a form and need a submit button. This I don't want. I want upload to start after file selection is made (I'm aware of security risks).
Why is the contend of the file dictionary not send?
The button itself is created by JS:
downLoadBtn = document.createElement('INPUT');
downLoadBtn.id = 'downloadBtn';
downLoadBtn.type = 'file';
downLoadBtn.onchange = function(){upload()}
function upload(){
file = document.getElementById('downloadBtn')
console.log(file['files']['0'])
$.ajax({
type: "POST",
url: '/upload',
dataType : 'json',
data: JSON.file,
success: function (response){
console.log(response);
}
});
}
python:
#app.route('/upload', methods = ['POST'])
def upload():
if request.method == 'POST':
data = request.files
print(data)
return jsonify(data)
What I'm doing wrong?
You pass JSON.file as the data parameter which is not defined in the code you posted, it should be the file tat was selected.
Since your server side code expects multipart from data, you'll have to use a FormData object.
function upload(){
file = document.getElementById('downloadBtn')
console.log(file['files']['0'])
var fd = new FormData();
fd.append('file', file['files']['0']);
$.ajax({
type: "POST",
url: '/upload',
dataType : 'json',
data: fd,
contentType: false,
processData: false,
success: function (response){
console.log(response);
}
});
}
I am new to codeigniter and Ajax, so please be patient with me.
I am attempting a school assignment in which we have to upload a file to our server. I tried to follow the instructions but I receive the error "You did not select a file to upload." Can someone help me please?
Here is my javascript
function uploadFile(){
data = {};
data['file']= document.getElementById('fileToUpload').files[0];
$.ajax({
url:'/admin/conference/presentation/changes/file',
data: data,
type: 'POST',
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});}
And here is the code from CI
$config['upload_path'] = FCPATH.'./';
$config['allowed_tyeps'] = '*';
$this->load->library('upload', $config);
if(!$this->upload->do_upload()){
$upload_error = $this->upload->display_errors();
echo $upload_error;
}
What did I do wrong?
CodeIgniter probably needs data in multipart form data which would require a FormData object.
function uploadFile(){
var data = new FormData;
data.append('file', document.getElementById('fileToUpload').files[0]);
$.ajax({
url:'/admin/conference/presentation/changes/file',
data: data,
type: 'POST',
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});}
Also, specify the name of the file to upload in code igniter
$this->upload->do_upload('file')
I have a form that submits using ajax and I want to use encodeURIComponent() to validate?
I am not doing this on indivudal id and name tags in the form.
How would I use this function to validate the whole form instead of having to do each parts in the form - if that makes sense?
var formData = new FormData(this);
$.ajax({
type: "POST",
url: "/engine/post/poll.php",
dataType:"json",
data: formData, //i want this encoded
mimeType:"multipart/form-data",
success: processJson,
contentType: false,
cache: false,
processData:false
});
The var formData is what is holding all the stuff from the form.
I ended up playing around with it and just added a random var above it with it encoded.
var encodePlease = encodeURIComponent(FormData);
var formData = new FormData(this);
and then using formData var in the ajax.
From client side A, I want to create a file on the fly by javascript and send it to a Django server B via Ajax for further processing.
The javascript code in A is like below. I use blob to create a file without a real uploaded one and send it via Ajax.
console.log("start sending binary data...");
var form = new FormData();
var blob = new Blob([bytesArray], {type: 'example/binary'});
form.append('file_name', blob, 'test.bin');
$.ajax({
url: THIRD_SERVER + 'test_binary',
type: 'POST',
data: form,
processData: false,
success: function(data){
console.log('test_binary ' + JSON.stringify(data));
}
});
However, on the Django server, what I got is like this (when i print request.POST), hence when i used Django FileUpload, it returned an exception.
<QueryDict: {u' name': [u'"file_name"'], u'------WebKitFormBoundarybCp3z7mAduz8BBDq\r\nContent-Disposition: form-data': [u''], u' filename': [u'"test.bin"\r\nContent-Type: example/binary\r\n\r\n\ufffd\ufffd\ufffd\x01\x05\x06\r\n------WebKitFormBoundarybCp3z7mAduz8BBDq--\r\n']}>
So I guess the above javascript doesn't do the right thing to send file to a Django server. Is there any proper way that I can use the FileUpload to handle?
Thanks,
You have to tell $.ajax not to set a content type otherwise it will be set incorrectly
$.ajax({
url: THIRD_SERVER + 'test_binary',
type: 'POST',
data: form,
processData: false,
contentType: false,
success: function(data){
console.log('test_binary ' + JSON.stringify(data));
}
});