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

How to upload and process CSV File using ExtJS Client Side

I am trying to Upload a CSV File containing IP addresses using Ext-js and have it processed and converted into a JSON Object on the client-side before sending it to the server to be added to the repository.
I need to parse the CSV, convert it into a JSON Object and then add the information to a Data Store- but I'm terribly stuck.
Are there any existing libraries that can help achieve this?
I am looking at avoiding jQuery/HTML5. Is there a way we can do it exclusively using Javascript / Extjs?
I tried going through a lot of examples- but most of them use jQuery/HTML5 API/ Papa-Parse or prefer doing it server side.
My 'Upload' Button handler function looks like this:
handler: function () {
var file = Ext.getCmp('form-file-win').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
var importedAddresses=[];
reader.onload = function (oFREvent) {
importedAddresses=oFREvent.target.result;
};
reader.readAsText(file);
this.dataStore.add({
id: '',
name: 'Imported from CSV',
});
win.close();
}

Unfortunately there is no way to access the content of the file on the client side.
You have two options:
You either post the file to the server and process it serves-side and give a json response for your javascript
Or you need to use HTML5 to access a local file. Here is a tutorial on how to do that: local file processing

Kendo UI multiple files upload issue

I am using a Kendo File Upload control to upload multiple files. Only few of the files are getting uploaded (especially first and last) or some random ones. Is there any solution for this ?
Index.cshtml :
<input name="files" id="files" type="file" multiple="multiple" />
JS File :
$("#files").kendoUpload
({
async: {
saveUrl: "/Controller/GetUserUploadedFiles",
removeUrl: "/Controller/Remove",
autoUpload: false,
allowmultiple: true
},
select: function (e) {
onSelect(e);
},
success: function (e) {
},
error: function (e) {
}
});
//Controller Method
[HttpPost]
public void GetUserUploadedFiles(IEnumerable<HttpPostedFileBase> files)
{
//Custom logic here
}
Also, it would be great if i can get all the files as Enumerable in one controller method call rather than having it called multiple times for multiple files.
Is there anything i am missing or doing wrong ?
Thanks,
Srini

This code will upload all the files that were selected in Kendo Upload, and then run code on each.
[HttpPost]
public void GetUserUploadedFiles()
{
Request.Content.LoadIntoBufferAsync().Wait();
var result = Task.Factory
.StartNew(() => Request.Content.ReadAsMultipartAsync().Result,
CancellationToken.None,
TaskCreationOptions.LongRunning,
TaskScheduler.Default).Result;
var contents = result.Contents;
HttpContent httpContent = contents.First();
Stream file = httpContent.ReadAsStreamAsync().Result;
if (file.CanRead)
{
// Code that will be executed on each file
}
}
You can get the filename by using:
string filename = httpContent.Headers.ContentDisposition.FileName.Replace("\"", string.Empty);
You can get the uploaded file media type by using:
string uploadedFileMediaType = httpContent.Headers.ContentType.MediaType;

IIRC, the kendo batch option will only upload the files as a collection if selected at the same time (browse, then select more than one file). Once you select additional file(s) they will be sent in another request. The only way you can force the files to be posted during the same request is to use the synchronous mode rather than async. Good luck.

How can I unzip the zipped file using AngularJs?

I want to unzip the zipped file while downloading the file using AngularJS.
I am trying with the following code,
For eg:
<a download="My_File.PNG" target="_self" ng-href="Path of the zip file/My_File.PNG.zip">My_File.PNG</a>
How can I download the actual file My_File.PNG from My_File.PNG.zip in the browser?

You can't do it from angular directly, but you can call use the JSUnzip library which you can call from your angular controller https://github.com/augustl/js-unzip
var myZip = ... // Get it with an XHR request, HTML5 files, etc.
var unzipper = new JSUnzip(myZip);
unzipper.isZipFile(); // true or false
unzipper.readEntries(); // Creates "entries"
unzipper.entries; // Array of JSUnzip.ZipEntry objects.

It's a little bit late, but the problem is in the angular request. You have to pass a special parameter, as in
$http.get('...', { responseType: "arraybuffer" }).success(successfunc);
and then proceed with the unzip. Search for this...

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