Get file object by giving hardcoded path in javascript - javascript

I need to get file from my disk (i.e. local machine) by giving a path in javascript. How to do that using javascript or jquery? I have get the file on single button click by giving hardcoded path. I don't want to browse file by using <input type="file">
Following is my code:
<button id="btnCallApi">Call Api</button>
<script>
$('#btnCallApi').on('click', function (evt) {
var files= "file:///H:/abc/xyz/testTxtDoc.txt";
alert(files);
});
</script>
How to get that file object from specified location path?

use jQuery.ajax().
$.ajax({
url: "file:///H:/abc/xyz/testTxtDoc.txt"
}).done(function(data) {
alert(data);
});

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

How to write path to files in Magento? File is not found, even when I set the absolute path

everyone!
I try to create custom application sending (to emails) form the site on Magento.
For doing it, I call post.php file in this way:
$('form#send-profile').submit(function(event) {
event.preventDefault();
var output = true,
array = $(this).serialize();
if (output) {
$.post('post.php', array, function(data) {
$('input[type="text"], textarea').val('');
});
};
});
I`ve placed post.php into the root folder (and tried it with different folders too).
But I had this result in any conditions:
POST http://vescorte.com/post.php 404 (Not Found)
Maybe Magento has some special way to set paths? Tell me please, if you know how to cope with this problem.
First of all , which version of magento do you use ?
Next, if you want to development any new function , you need create a module
try this link magento-2-module-development
In the template file in which you mentioned JS code, you can mention the Magento base URL function to get full base URL like below:
$.post('<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>post.php', array, function(data) {
$('input[type="text"], textarea').val('');
});
Still if you face issue then try to remove all the code from post.php and run with simple text to check file request complete or not.

Load yaml file using javascript and get the data in the yaml file

I am creating a function to load a yaml file via javascript and however I am stuck on how to get the data from the yaml file where I will subsequently use the data to fill up labels in my HTML page.
Here is my progress for the javascript so far:
<script>
// YAML file to Javascript object
$.get( 'yaml/cars_loan.yaml', function( text ) {
var obj = jsyaml.load( text );
console.log( obj );
});
</script>
*This is the updated correct codes
Set the $.get() datatype parameter to be text. jsyaml needs yml type text data to load.

Getting the size of an uploaded file React JS

How would I go about finding the size of an uploaded file in React JS?
Let's say, your jsx is like <input type="file" onChange={this.fileChangedHandler}/>
Now, in your fileChangedHandler, you'll have to do something like below:
fileChangedHandler = (event) => {
let file_size = event.target.files[0].size;
//or if you like to have name and type
let file_name = event.target.files[0].name;
let file_type = event.target.files[0].type;
//do whatever operation you want to do here
};
You will first need to grab the input type file upload like
var uploadDocuments = document.getElementById('file-0'); //grab html file-upload element
and can get the file size using .size attribute.
uploadDocuments.files[0].size //this gives the size of uploaded file
React.js is just used for your view. You can use normal javascript for everything else.
If you wanted to find a file's size at some url with jquery:
var req = $.ajax({
type: "HEAD",
url: 'some/url/here',
success: function () {
console.log(req.getResponseHeader("Content-Length")); //Filesize
}
});
In the success callback you could save the size into React's state using setState(), then display the size in a div within your render method.
You are also not limited to using jquery for the HEAD request. SuperAgent is another popular one.

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

Categories

Resources