My folder hierarchy looks like this:
a/a.XML
a/b/b.XML
I will select the a.XML file and read it. Now I have path of b.XML file.
My question is how to push this file in a FileList as I am not getting it through <input type="file">, since I only have the files path. I have searched for a solution, but I didn't found any help how to push a file in a FileList without it's input tag. I want my code to be run in google chrome.
My current code for reading a.XML file through an input tag looks like this:
if(filePath.files && filePath.files[0])
{
reader.onload = function (e)
{
output = e.target.result;
console.log("file path");
console.log(output);
}
}
If b.xml is placed in the FileList, then I can easily read this file so I only have b.xml path and I want to push this file in FileList interface.
It is not possible to add paths to a FileList because of security issues.
Related
i have a file in the file system named temp.gz
the temp gzip file contains files and folder
i would like to extract them and have them in a folder like we would normally unzip a file in OS.
i have tried below code but thats not meant for extracting files to folder.
const unzip = zlib.createUnzip();
var input = fs.createReadStream(inFilename); /path/to/temp.gz
var output = fs.createWriteStream(outFilename); /path/to/output/folder
Above didnt work and i believe the reason is that it writes to a file and i have provided a directoy.
my requirement is extract files to directory.
zlib.gzip(responseData, (err, buffer) => {
// Calling gunzip method
zlib.gunzip(buffer, (err, buffer) => {
console.log(buffer,pathFileName);
fs.appendFileSync(pathFileName, buffer);
});
});
above i was trying to unzip as per the docs and write buffer to the output file and didnt create a folder as expected and didnt add the files there
sure i am missing something but not sure what.
For minimal example, I have
Host: 111.222.111.123
Username: user_name
Password: pass_word
File to upload is selected with HTML input element
I can upload the file manually to the target directory on the server with a client like FileZilla.
The target directory is where the file should be uploaded. Its location on the Internet is https://nameofsite/targetdir/, so the file should be reachable on the internet for anyone as https://nameofsite/targetdir/1.html.
But is it possible to upload the file to the server with javascript?
I tried this example taking to account #mcrdy455's answer, but anyway it's not clear what the FtpConnection is:
<input id="fileForUpload" type=file onchange="upload()">
<div id="fileContents"></div>
<script>
function upload() {
var file = document.getElementById("fileForUpload").files[0];
if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
document.getElementById("fileContents").innerHTML = evt.target.result;
var ftp = new FtpConnection("ftp://111.222.111.123/");
ftp.login("user_name", "pass_word");
ftp.put(file, "1.html");
ftp.close();
file.close();
}
}
}
</script>
Uncaught ReferenceError: FtpConnection is not defined
After searching on the Internet, I'm still not sure what project FtpConnection belongs to. Other examples use URLs instead of IP addresses (111.222.111.123).
E.g. Ftp.createCORSRequest('POST', "http://www.ftpjs.xyz/upload.aspx") in this one. I would like not to complicate things (with CORS) and use the 111.222.111.123 address.
If FileZilla can do the job, why couldn't javascript do it? How?
The JavaScript code can NOT access files from your filesystem, use an input type file, and read the file through the FileReader: You can fine more info on how to do this here, Once you have the correct file/blob object you code should work
I would like to be able to edit a file that has been selected for upload. I want to search and replace text in case absolute files should be made relative...
I notice in the File API I can do some of it, but I get a little stuck:
document.getElementById('exampleInputFile').onchange = function(event) {
var fileToLoad = event.target.files[0];
if (fileToLoad) {
var reader = new FileReader();
reader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
//Use logic to remove absolute files
//Upload S3
};
reader.readAsText(fileToLoad, 'UTF-8');
}
};
I am trying to figure out how now to convert that text to a proper File so that I can upload it to S3 using an existing api that expects something returned by: event.target.files[0] code above.
I do not want the server to handle any heavy lifting here if I can avoid it (files can easily be a few megabytes since they can be 3D models).
Assuming you know the url of the file when it lands in the S3 bucket, you can retrieve the file using a http.get, which will give you the contents of the (I assume plain text file). You can then parse that file and do whatever modification you need to do on the contents. If the file has changed, you can then write it back to the S3 bucket to replace the original file.
On AWS you can use Lambda to execute NodeJS code when an event is triggered (for example an upload to a specified bucket).
Im trying to build file preview feature before file being uploaded to the server.
Im stucked with the problem of reading file from the user's computer, not a server
Im usuing jquery Fileupload which fires the file processing on the change function
return $('#new_order_file').fileupload({
change: function(e, data) {
return $.each(data.files, function(index, file) {
read_file(file);
console.log(file)
});
},
});
Log gives File - name, size, type, proto and LastmodifiedDate
Than, this part is tricky for me, I know that I have to use FileReader() but Im not sure how to
function read_file(f){
var reader = new FileReader();
reader.onload = function(e) {
$('#CO-show-model').css('display', 'block');
loaded(f.name, e.target.result);
};
reader.readAsArrayBuffer(f);
}
Next, loaded function is for displaying the file model using three.js
function loaded(file) {
var uploaded_file = file // gives 404
// var uploaded_file = './stl/test-file.stl' // ASCII test
}
The fucntion itself is good, I tested it with an hardcoded path to some test file. But the problem is that it was on a server. Now, script gives an 404 for http://example.com/filename.stl which is true, because I pass file.name there. If I just pass file, it gives 404 for http://example.com/[object%20File]
Edit 1:
I tried suggest ReadAsDataUrl, but seems to be that it's not supported by three.js. Also, the FileReader() seems to be ok
Your file is an object so you have to get the right attribute from it.
Take a look here Filereader Mozilla documentation
It's a security feature. Browsers will not give you the actual local url to the file you are uploading.
See How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
Edit: Maybe what you are looking for is this question instead? What is the preferred method for loading STL files in Three.js
I need to get upload path of my uploaded files via jquery-file-uploader.
$('.new_plotphoto').fileupload({
done: function (e, data) {
var filess = data.files[0];
var filename = filess.name;
var filepath = filess.filepath;
console.log(filename); // this shows filename
console.log(filepath); // this shows undefined
}
});
Path of uploading file is a secure feature. From W3C File API docs about file name:
The name of the file; on getting, this must return the name of the
file as a string. There are numerous file name variations on different
systems; this is merely the name of the file, without path
information.
File path will be enabled only then you upload directory:
<input type=file multiple directory webkitdirectory onchange="console.log(this.files)">
In this case webkitRelativePath(for WebKit browsers) field of file object will be not empty. But it will show path only inside uploaded directory.
Also note that iOS browsers then uploading images always have this file name: image.jpg and no info about path.