I use a library that accepts a file as one of its parameters and it uses something like
<input type="file" id="file" name="files"/>
to get the needed file. Now, what i want is to send the file from my node.js server to the client via rest API like this:
$.get ('/getfile', function(data) {
reader = new FileReader();
reader.onload = function(theFile){
//some code here
};
reader.readAsText(f);
});
However, if i use something like this on the server side:
app.get('/getfile', function (req, res) {
var pathx = 'path to file';
res.download(pathx);
});
when it reaches the client, it does not see it as a file, rather the variable data, contains the contents of the file. how can i send a file down to the client so that the client can still see it as a file.
I can't post comment, so need to write an answer.
$.get call is a part of your client side code, right?
And you want to download file using jQuery.
Then there are 2 parts.
1. You need to have method on the server that serves file correctly (headers set up, etc). Open your browser and go to that address. What should happen is your browser downloads file. If it doesn't, you need to resolve this issue first.
Then you'd make your client make some calls using jQuery to download file. How to do this you can find in other answers like Download File Using jQuery
Now, can you say whether you have successfully completed step 1?
Related
In my frontend PHP page I have a simple upload file input object:
<input type="file" v-on:change="fileAdded">
My fileAdded function within my JS file simply takes the event object (e) and grabs the file in order to obtain other information regarding the file itself:
if (e.target.files !== undefined) {
v.data_file = e.target.files[0]
}
I then put the data file and a request code into a fetch statement to my backend:
fetch("pages/gp/gpBackend.php", {
method: "POST",
body: v.form_data_obj
})
Within my backend php page I use the $_FILES array to grab information like the filename and extension of the file to then pass along to a python script that I have which will unpack the data in the file itself.
During this phase of operation of my webpage, everything works fine, I send the response back to my frontend, handle the data accordingly and move on.
The rest of my frontend requires the user to input certain data before submitting a second post back to my backend with a different request code.
In that instance I send another FormObject with all the needed data to my backend in the same manner I did with my file upload POST. However this time my $_FILES is now empty and I cannot access the file name or extension of the file I uploaded earlier.
I cannot seem to find out why this is the case? I have a near identical set up on another frontend/backend php page I have for the same site that through both POSTS maintains the files in $_FILES to be used however often it is needed. But for this page, without me being able to tell the difference, when I POST another request to my backend the second time $_FILES is empty.
I can provide any additional details that would be needed to answer this question so please let me know. I do know it is not a file size issue as not only do I have the .ini configured for an admin (me) set file size limit, but the file I'm currently using as an example during development is significantly smaller than the max file size on my web server.
Thank you for any help anyone can provide!
PHP $_FILE must serve with a with enctype as this way.
<form action="upload.php" method="post" enctype="multipart/form-data">
Hope this help: https://www.w3schools.com/php/php_file_upload.asp
This is part of an experiment I am working on.
Let's say I upload a file eg: .psd (photoshop file) or .sketch (sketch) through the input type file tag, it displays the name of the file and can be downloaded as a .psd / .sketch on click of a button (without data corruption)
How would this be achieved?
Edit 1:
I'm going to add a bit more info as the above was not completely clear.
This is the flow:
User uploads any file
File gets encrypted in the client before sending to a sockets.io server
User on the other end receives this file and is able to decrypt and download.
Note: There is not database connected with the sockets.io. It just listens and responds to whoever connected to the server.
I got the enc/dec part covered. Only thing is uploading and store as ? in a variable so it can be encrypted and doing the opposite on the recepient end (dec and downlodable)
Thanks again in advance :)
I think these are your questions:
How to read a file that was opened/dropped into a <file> element
How to send a file to a server
How to receive a file from a server
When a user opens a file on your file element, you'll be able to use its files property:
for (const file of fileInputEl.files) {
// Do something with file here...
}
Each file implements the Blob interface, which means you can call await file.arrayBuffer() to get an ArrayBuffer, which you can likely use directly in your other library. At a minimum, you can create your byte array from it.
Now, to send data, I strongly recommend that you use HTTP rather than Socket.IO. If you're only sending data one way, there is no need for a Web Socket connection or Socket.IO. If you make a normal HTTP request, you offload all the handling of it to the browser. On the upload end, it can be as simple as:
fetch('https://files.example.com/some-id-here', {
method: 'PUT'
body: file
});
On the receive end, you can simply open a link <a href="https://files.example.com/some-id-here">.
Now, the server part... You say that you want to just pass this file through. You didn't specify at all what you're doing on the server. So, speaking abstractly, when you receive a request for a file, you can just wait and not reply with data until the sending end connects and start uploading. When the sending end sends data, send that data immediately to the receiving end. In fact, you can pipe the request from the sending end to the response on the receiving end.
You'll probably have some initial signalling to choose an ID, so that both ends know where to send/receive from. You can handle this via your usual methods in your chat protocol.
Some other things to consider... WebRTC. There are several off-the-shelf tools for doing this already, where the data can be sent peer-to-peer, saving you some bandwidth. There are some complexities with this, but it might be useful to you.
I'm trying to build an Electron-based app, mostly using code from my existing web app. The electron version connects to my server and often relies on that online content. I am using Ajax requests (using Jquery) handle things like the user logging on, and a php session is created, which is required to access most of the content.
I am now trying to get Javascript to automatically download a .zip file and save it to a location, without the user doing anything. I failed to do this using an Ajax request, so have tried to use the Node.js 'request' module. Then however, it wouldn't download the file because it was not authorised (because the request creates a new session, different to the existing, logged-in one).
How can I get something like the following to work?
const fs = require("fs");
...
$.ajax({
url: "my-server/file.zip",
success: function (data) {
fs.writeFile("local-file.zip", data);
}
});
Note - I think it failed due to some issue with the way the downloaded data is encoded, but don't understand exactly what the problem was.
Alternatively, is it possible to use the existing ajax session in the request module, and download it that way?
I am trying to create a button on my website that will allow a user to downlaod a .csv file. I currently have the site hit the server and the server generates a string of text which is in the format of a csv file. I am not sure where to proceed. Do i save this string to a file on the server and then send the file to the client (I would prefer not to create files on the server side) or do i send the client the string of text and then create the file on the client side? I would like the button to function as a user would expect a download button to work (ie a they are given a choice as to where to save the file and a progress bar shows the progress f the file download)
I am using Nodejs and express on the server side.
Once the file is generated just put a link to the file location in your page:
Clickable text
The browser will know how to handle this and prompt the user where they would like to save the file. Once the user specifies this the file will be downloaded to the user's computer.
If you want to just create the file in memory and then send it to the user you could do something like this if you are using asp.net MVC:
public FileStreamResult MyFunction(/*your parms*/)
{
System.IO.MemoryStream stream = FunctionThatCreatesMyCalendarStream();
//you may need stream.Position = 0 here depending on what state above funciton leaves the stream in.
//stream.Position = 0;
FileStreamResult result = new FileStreamResult(stream, "text/csv");
result.FileDownloadName = "myfiledownloadname.csv";
return result;
}
EDIT: If you are using node.js look at this post - Nodejs send file in response
This is a callback function that I currently use to send a csv. You can put the button so that it calls this function, and sends the csv. when you call this service, automatically downloads a file to your compurer.
function(req,res){
// Process that does the csv and stores it in a variable csv_variable
res.writeHead(200,{'content-type':'text/csv'});
res.write(csv_variable);
res.end();
});
Hope this helps!
I have a web application which clients are using.
Behind the scenes I'm generating logs on the clients' machine (because JavaScript or jQuery is running client side), but I'd like that log file to get to the server.
I don't have to use the input type as file.
Last note: I'd like to push this/these file(s) to the server without the user having to know about these files.
How can I do this? Is there any plugin I can use?
through javascript you can do form.submit() if the form contains a input type file then the file will get uploaded to the corresponding server folder.
Else you can also use Ajax to upload file using libraries like http://code.google.com/p/upload-at-click/
Best solution will be using the FileReader API
You cannot upload files from a client without the user first selecting the file. This is by design and cannot be bypassed.
Since you create the log files yourself (somehow), simply save a copy of the information that is posted to these files in a local variable or local storage of some sort, and send that instead. It's a simple AJAX call to do this...
function sendLog(logdata) {
$.ajax({
url: "savelog.php/aspx/whatever",
type: "post",
data: {
log: logdata
}
}).success(function() {
alert("it worked!!");
});
}
If you cannot save the log data to a local variable or storage then I don't see any way of doing this without user intervention.