Develop Reference

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

$_POST and $_FILES empty after AJAX file upload

I am new to web development, and the latest problem I have been having is ajax file uploading...
Right now I have two HTML input fields; a file input and a button.
<input type="file" name="Frame" id="Frame_"/>
<input type="button" name="FrameButton" id="FrameButton_" value="UPLOAD"/>
After the button is clicked I then call a function that has the following code..
var frame = document.getElementById('Frame_');
var frameImg = frame.files[0];
var form_data = new FormData();
form_data.append('frame', frameImg);
jQuery.ajax({
url : './handler.php',
type : 'post',
data : form_data
contentType : false,
processData : false,
success : alert("Frame Uploaded")
});
When I var_dump() the $_POST and $_FILES array it shows both arrays as empty. This is despite the "Request Payload" in Chrome Dev reading
Content-Disposition: form-data; name="frame"; filename="GoldFrame.jpg"
Content-Type: image/jpeg
In which I am under the impression that this means the information of the file that I select on the front end is being successfully "post"ed to my handler.php file. Is this a wrong interpretation?
Either way, could someone please give me an answer to my problem? Or atleast point to a resource that might have my answer? There seem to be many similar questions along the same lines, but I haven't seen one that has a solid answer.
I have used iframes for this kind of thing in the past, but that seems like a really hacky method, and I would like to have the flexibility to use ajax for this kind of task in the future.
Help is appreciated.

Try this.
Form (index.html)
<form id="uploadForm">
<input type="file" name="frame" />
<input type="submit" value="UPLOAD" />
</form>
Script (script.js)
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "handler.php",
type: "POST",
data: new FormData(this),
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});
}));
Server Side (handler.php)
<?php
var_dump($_FILES);

When posting a file and/or text, This set of codes is also useful for debugging purposes. You can use this to see if your post is too large as that too can cause empty $_POST & $_FILE arrays even though its posted.
print_r($_POST); /* Looks at the $_POST array. (Will be empty if $_SERVER['CONTENT_LENGTH']/1000000 is greater than ini_get('post_max_size') ) */
echo "<br>";
print_r($_FILES); /* Looks at the $_FILES array. It will also show you the file size in bytes: divide it by 1 million (1000000) to get the megabytes value. (Will be empty if $_SERVER['CONTENT_LENGTH']/1000000 is greater than ini_get('post_max_size') ) */
echo "<br>" . $_SERVER['CONTENT_LENGTH']/1000000 ; /* This will give you the size in megabytes of your $_POST */
echo "<br>" . ini_get('post_max_size'); /*This will show you the post_max_size in your php.ini file*/
echo "<br>" . ini_get('upload_max_filesize'); /*This will show you the upload_max_filesize in your php.ini file*/
// phpinfo(); // You might not need this function but you can use it for more information on your php.ini file. It can help you find its location (for maybe editing purposes) and view its data.

Are you var_dump()-ing your $_FILES/$_POST arrays in the handler.php file?
If you are trying to dump these variables in the file that has the ajax call, it won't work because AJAX is making the front-end call, and the files/post variables are server side variables ... which means only the handler.php file will have these variables available.
Try adding the var_dump() call in handler.php, and output that result in the ajax call, and I am hopeful you will see the results you are looking for.

OrientDB - upload image via HTTP API

Hey OrientDB Community.
I'm attempting to upload an image into my DB via HTTP API. In my super basic web-page, I select a file and click upload. Simple. Once the button is clicked, I have javascript handling it with jquery and ajax.
Context: This is an educational tool which will have student profiles with their pictures. These images won't be too big (10MB - 20MB-ish).
Here is the HTML upload form:
<h2 class="heading-blue">Upload Image</h2>
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input id="upload_image" type="button" value="Upload" />
</form>
Here is the javascript code:
$('#upload_image').on('click',function(){
console.log("UPLOADING IMAGE");
var formData = new FormData($('form')[0]);
$.ajax
({
type: "POST",
url: "http://localhost:2480/uploadSingleFile/DemoPlayground",
data: formData,
??
??
success: function (){
alert('SUCCESS!');
}
});
});
I'm not sure what to use where it says "/uploadSingleFile/" in the ajax URL parameter. Also, I'm not sure what else needs to be included in the ajax call. (Hence the "??"'s up above).
Some possibilities that I've been reading about:
Call a server-side function and pass the binary data (the image) to the function for it to handle the rest. If this is a good idea, I'm not sure how to do it...so help would be appreciated.
I've read in a couple places that Orient uses Jetty to perform this action. Any pointers on that?
I've got other types of HTTP API to OrientDB requests working, but this one is troublesome and I can't figure it out on my own.
I'm open to looking at this from new angles. Please help! :) THANKS!

upload file via ajax with jquery easy ui

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;
});
});