upload file via ajax with jquery easy ui - javascript

I'm trying to give users the possibility to import data from a file that is located on their computer by using jQuery EasyUI form widget:
<form id="my_form" method="POST">
<input type="file" name="my_file" id="my_file" />
</form>
var file_name = $('#my_file').val();
if(file_name)
{
$('#my_form').form('submit', {
url: [url_to_call],
onSubmit: function(param){
param.file_path = file_name;
}
});
}
Then when the user browse on his/her computer for the file, I wanna send the path to a jQuery ajax query to perform some upload action. The problem I have is that filename returns something like this:
C:\fakepath\[name_of_file]
Because of the fakepath string, I am not getting the real path to where the file is located on the user's computer. Does anybody know how I can fix this issue please?
Thank you

Tried this plugin http://malsup.com/jquery/form/#getting-started
this plugin provide a method called AjaxSubmit() which work fine for upload the image. I have used it in 2011.
it's have some issue in IE (old version like 6,7). You need to write some hacks. on the backend Firefox and IE upload the correct file-stream format like Data/Image but in Chrome (Webkit) you will got Octet Stream. You need to parse the file format on server to check that file is not wrong.

I have no idea what your form() function does, as no such method exists in jQuery, but the usual way of uploading a file to the server would be something like this :
$('#my_file').on('change', function() {
$.ajax({
url : [url_to_call],
data : new FormData($('#my_form').get(0)),
processData: false,
contenttype: false
}).done(function(param) {
param.file_path = file_name;
});
});

Related

Replace "C:\fakepath\" to "\\server\folder\"

I use javascript code to take the file path and paste it into the text input. I am wondering how to make it substitute a predefined server path in front of the file name instead of the path "C:\fakepath", e.g: "\server\dir\data".
$('input[type="file"]').change(function(){
$('input[type="text"]').val( $(this).val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data">
<input type="file" onchange="this.form.filename.value = this.value">
<input type="text" name="filename">
</form>
The String object has a number of methods that you could use for this. For example using substr:
<script>
$('input[type="file"]').change(function(){
$('input[type="text"]').val( '\\server\\dir\\data'+$(this).val().substr(11));
})
</script>
Some browsers have a security feature that prevents JavaScript from knowing your file's local full path and because of which you are getting fakepath in the file path url. This security feature is added so that the server won't able to know the filesystem of your machine.
In case you you want to remove the fakepath from path then what you can do is to -
$('input[type="text"]').val( '\'+$(this).val());
This will show the the path as \file_name.extension
of what you wrote i guess that you are trying to do file upload by sending the file data from files object to the server by ajax but you cannot send this path or replace it because it's a random path generated when the server received the file to be uploaded but you can easily use FormData object to send the file to the server then you can handle it from your server
Here's an example
var photo = document.getElementById("photo")
photo.addEventListener("change",function(event) {
var form_data = new FormData();
form_data.append("file",event.target.files[0]);
$.ajax({
url: './phpScripts/up.php',
type: "post",
processData: false,
contentType: false,
data: form_data
}).done(function(e) {
//Code here
})
})
the last point if you wants to get the file path just test the event in the console console.log(event) then search for files object when you can find the file path and access it

Javascript Ajax upload file to Python backend

I got stuck how to make my code work, I am trying to upload file using javascript to my python code.
here my HTML
<div class="form-group">
<label for="upload_list" class="control-label">Upload List</label>
<input name="upload_list" id="upload_list" type="file" class="form-control" multiple="true" />
</div>
<a id="make_order" role="button" class="btn btn-primary" href="#">
here my JS that handle the upload.
$("a#make_rfq_order").bind("click", function(ev) {
var customer_upload_list = $('#upload_list').val();
ajax.jsonRpc('/shop/order', 'call', {
'upload_list': customer_upload_list
});
});
and here my python code
def customer_order(self, **post):
if post.get('upload_list'):
.....
if order and order.id:
.....
if post.get('upload_list'):
.....
values.update({
'name': '{0}_{1}'.format('file', upload_list.filename),
})
order.write(values)
return True
if I use 'name': '{0}_{1}'.format('file', upload_list), its work, but only handle the file name,
how to get the actual file submited to my server?...
I'm unable to comment, so I'm answering as best I can, but knowing a bit more about your python server would help (are you using a specific framework or did you code your own python server from scratch, etc...)
I think you're sending the path of the file, not the file itself with this part:
var customer_upload_list = $('#upload_list').val();
Try the below instead:
var file = $('#upload_list').get(0).files[0];
Also, it looks like you're trying to include support for multiple files.
Have you tried building a FormData by iterating over the selected files and adding the FormData to the POST?
Something like this may work, or at least get you in the right direction:
var files = new FormData();
for(var i=0;i< $('#upload_list').val().length;i++){
var file = $('#upload_list').get(0).files[i];
files.append('files[]', file);
}
$.ajax({
url: 'upload.php',
type: 'POST',
data: files
});
the received data will be in list form on the server side, so remember to alter the code to look for a list.
You may have to play around with other paramaters in the POST, like contentType and dataType or processData, but I think the above is sufficient to get a result

How can we download the dynamically generate file from server?

I want download the file from server (I knew that we can't use AJAX, and serve is Servlet) and which dynamically generate according to the parameters.
Now I have the parameters in format JSON, like:
{"limitTo":"name","searchFor":["AAA","BBB","CCC"],...}
So, how can we send the request to the server with those paraleters? Do we need create some inputs?
Thanks, I found the solution which uses dojo/request/iframe, without window.open
And the code likes :
require(["dojo/request/iframe"], function(iframe){
// cancel the last request
iframe._currentDfd = null;
iframe("something.xml", {
handleAs: "xml",
data : "your json"
}).then(function(xmldoc){
// Do something with the XML document
}, function(err){
// Handle the error condition
});
// Progress events are not supported using the iframe provider
});
And then we can see download window.
Here is an article about dojo/request/iframe

How to use file Uploader in kendoui with angularjs?

I'm using kenoui uploader in angularjs,
i can able to upload files but i can't able to save that file.
my questing was how to i given saveUrl and removeUrl in option
this is my code below,
index.html
<input name="files"
type="file"
kendo-upload
k-options="fileAttachmentConfig"
k-select="onSelect" />
index-ctrl.js
$scope.fileAttachmentConfig = {
async: {
saveUrl: 'app/images/client',
removeUrl: 'remove',
autoUpload: false
}
}
So How to handle that saveUrl and removeUrl also how to save file to my local path?
saveUrl and removeUrl are path to your Save/Remove method in Controller or something like that.
You must implement method in backend (server side) where you can save file on server (your local path).
Check demos in this examples or C# demo server side.

krajee bootstrap file input upload

First , i am a french web developer ( sorry for my poor english )
i 'am looking for a bootstrap php image upload with thumbnail.
i would like to make an upload image file like :
[http://www.2ememain.be/inserer/][1]
the Krajee plugin ([http://plugins.krajee.com/file-input][2]) seems to be the one i am looking for..
But i have some problems with the upload..
i get the error message:
item1.png: SyntaxError: Unexpected token e
my form:
<input id="input-700" name="kartik-input-700" type="file" multiple=true class="file-loading">
js:
$("#input-700").fileinput({
uploadUrl: "upload.php",
uploadAsync: true,
maxFileCount: 10});
upload.php:
echo "test";
if (empty($_FILES['input-700'])) {
echo json_encode(['error'=>'No files found for upload.']);
return;
}
// get the files posted
$images = $_FILES['input-700'];
var_dump($images);
More strange:
when i delete echo(test);
i get the error:
No files found for upload
Thanks for your support
if you have another solution , i shall be glad to get it..
Since you have set the uploadUrl parameter you are using the ajax uploads feature (instead of native HTML form submission).
You need to ensure that you return a proper JSON encoded data response from the server action (as set in uploadUrl) else the plugin fails. You can read the plugin documentation for ajax uploads where this is highlighted. For example, even if you do not have any data to send - you can send a empty JSON string like {}.

Categories

Resources