Is it possible, on any browser, to indicate the percent complete of a file upload without requesting that information from the server?
In other words, is there any browser which knows (in a javascript-accessible way) how much of a file it has uploaded?
Browser file uploads don't provide a scriptable handle for JavaScript.
Typically how this is done is via a an AJAX call to the server, which then passes back the data based on the server's file upload status (which can be scripted). I don't think this can be done on the client side alone.
Related
Currently, I have a PHP app running on Heroku using a Postgresql database. I want my users to be able to upload an image to a folder on my dropbox, and store other information (in this case, product information such as price, title, weight, location of the image on dropbox) on my database.
Right now, I'm using a file input inside an HTML form to submit the image by posting the whole form to my server (including the image), and then I use cURL to send the image to dropbox and wait for the response to succeed. On success, I create my database record that has the other information I mentioned earlier.
This works well for small files, but Heroku has a 30 second timeout that I can't change. For large files, the whole file uploads to the server, and then it uploads to dropbox. These two upload operations are time-intensive and takes more time than the timeout allows.
I had the idea of sending the file to dropbox using javascript (jQuery ajax commands specifically) so that it's handled by the client, and then POSTing to my server on success, but I'm worried about how secure that is since I would need to have my own authorization tokens in the source code that the client can view.
Is there any way for PHP to send a file from the client to an external URL without it touching the server? How do I do this securely?
This sounds like a good fit for the Dropbox API /2/files/get_temporary_upload_link endpoint.
You can call that on your server to retrieve the temporary upload link, and then pass that link down to the browser. You can then have some JavaScript code perform the upload directly from the browser using that link.
Since only the /2/files/get_temporary_upload_link endpoint call requires your Dropbox access token (whereas the temporary upload link itself doesn't), you can keep your access token secret on the server only, without exposing it to the client. And since the upload happens directly from the browser to the Dropbox servers, you don't have to pass the file data through your own server, avoiding the timeout issue.
First off, I know this seems illogical when I could just send the download URL to the server. The issue with that is that user's can access these download links and so for those who can I need to be able to download it. I can't really explain why as I am under NDA.
I am trying to download a file from a URL via the client (browser) and stream the data directly to the server where the file is saved so the client essentially acts as a "middleman" and does not require the file to be downloaded to the client's machine.
I have been experimenting with "socket.io-stream" and "socket.io-file" but i am having a few issues with both. "socket.io-stream" allows me to upload a specific file from the client to the server but the uploaded file has a size of 0kb and doesn't have any examples on Github.
"socket.io-file" has examples, which I followed and currently have it setup so I can use an input tag to select a file to upload to the server successfully.
From what I can see the "socket.io-file" upload function takes a file object as the parameter.
So I have two questions really:
Is there a plugin for JS (Browser) & NodeJs (Server) that would allow me to do this?
or
How can I create a File Object from an external url?
I solved this is the end, using a chrome extension to download the file as a blob object, pass the object to the content script and then use socket.io-stream to upload it to the server.
I want to upload user uploaded file (from website <form>) to my FTP server, in which I want to bypass the server and want that file should be sent to FTP server directly. Is it possible using PHP or JavaScript?
In current scenario when I upload file using HTML form and PHP to Apache server, the file is stored in /tmp/ directory and then I can transfer it to FTP location. But this takes double time in uploading as the filed is first uploaded to Apache server and then to the FTP server.
Cloud servers run this way, where Apache server can be by passed and file can be posted directly to cloud server)
I want this so that we can overcome the HTTP part and want to upload large file to FTP server without getting any HTTP upload restrictions.
The HTML form tag does not support the FTP.
You cannot use PHP either as it cannot access local (as of webbrowser) files.
So JavaScript is the only likely solution.
The XMLHttpRequest class theoretically supports FTP:
Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp).
But in reality it probably does not.
See the accepted answer to What is the syntax to do a cross-domain XMLHTTPREQUEST to an FTP server?
So actually, there does not seem to be any solution readily available.
If possible, run a web server on the FTP server host and send the files using the web server (HTTP).
Another alternative is to stick with the transferring via your web server, but in a streaming mode. Post your file to the web server. Make the handling script continuously read the incoming data and have them continuously uploaded to the FTP server.
You won't save a bandwidth, but you will save time (as both transfers happen nearly in parallel).
Using the ftp_fput with a handle to the standard input should do (didn't try).
its very difficult to FTP data(BIGfile) to backup server without using HTTP protocol in a web application.
Lets say, S1-( Client Browser ), S2-(code container server), S3-(Files Backup server) and we want to upload 2gb file from s1 using FTP.
use case diagram This can be done by "JavaApplet" . we can embed uploader applet in webapplication. This applet will run inside browser sand box.
go through link sample code for ftp using applet
provided you have to enable java on your browser.sample code
ftp block diagram for side load
I'm having issues with a small script I'm creating. It downloads large(ish) files from one domain (around 15Mb each) using AJAX, and I want to then upload / post them to another domain also using AJAX. Downloading isn't a problem. I've added a nice download status bar, and have checked that the responseText is stoed in a variable, which works fine.
The script then attempts to use AJAX POST to upload this data to another domain. I've set the 'Access-Control-Allow-Origin:' header on my domain, and the domains can both 'talk' to each other fine. Is it the AJAX that's not letting me upload such a large chunk of data? It actually crashes the browser.
Any ideas on how I should handle large files downloading then uploading straight away, would be greatly appreciated.
EDIT:
I'm trying to download a file from domain A to the users computer (but not save the file, just store it in a variable), then upload it straight to domain B.
Thanks! - Dan.
I would skip the downloading of the data through AJAX.
If i'm understanding what you're trying to do. You could download the data in your PHP, showing the progress using AJAX. Then within the same PHP code on the backend you could send the data to the next location. You could even send an signal through AJAX to tell your client side code that the download had finished and the sending had begun and have a progress bar for that.
My App involves heavy client side image manipulation. Since the files are modified so frequently during a users session we do not physically upload them to the server until the user is finished and chooses to save the image(s).
The images are read from the client using the html5 file API and stored in memory as base64 strings where the user proceeds to perform his/her manipulations quickly and efficiently.
When the user chooses to save we transfer the string or strings to the server via a standard ajax POST and then build the image into a physical file server-side.
What I would like to do is provide a progress bar for this final upload stage.
Now, I am well aware that the html5 spec includes support for file upload progress reporting. However we are not using the standard upload methods, instead, as mentioned above the images are sent as strings.
So my question really boils down to the following:
A) Is there anyway to actual measure the actual bytes sent during a simple post (PHP serverside). If so this would work as I already have the image size in bytes from the HTML5 filereader api.
B) If not is there anyway I can convert the base64 data into actual files on the fly and send them via the standard html5 upload method, reporting the progress as we go.
In either case... If so, how?
Many thanks in advance.
It's easier when you send the Base64 image via ajax. Ajax works with a callback function, so just use an indicator of some sort to let the user know that ajax has been initiated (i.e. the file download has started ). On completion the callback function will run, now you can turn off the indicator whatever it might be.
As far as measuring actual bytes, via ajax I'm not sure.
This method
showing progressbar progress with ajax request
suggest estimating it. I would take it a step further and maybe time how long it take the callback over say 10 tries( use this average to estimate your progress bar and also use the 90% trick mentioned above ).
Or if you want to encode/decode your Base64 text.
How can you encode a string to Base64 in JavaScript?
Depending on the server technology you are using, there are several options.
Use Comet or Javascript long polling to get the progress of the upload from the server, and update the progress bar from the client side
If you are using .Net technologies in the backend, explore the SignalR library, which will provide all the plumbing to provide real time communication between the server and the client.