JS code to display file path on a hidden upload file field - javascript

I used the Shaun Inman's method to create a customized "upload file" button, and it works just fine.
Trouble is, this method doesn't display the file path that the user has uploaded.
Can anyone help me with a simple JS code to have the file path displayed when selected.

Newer versions of browsers do not send up the file path for security reasons, that is why you are not seeing it.
IE8 value depends on security zone

Related

When a file is uploaded to a website, can the website see the file path it's uploaded from?

When uploading a file, before pressing the upload button, the folder/file path is visible in the website's upload form.
.
Is the website able to record that data?
Normally a website could possibly record any data typed into a web form - is this any different?
It doesn't appear to work. I created the following fiddle https://jsfiddle.net/5samkn5a/
Basically I took an input
<input type="file" id="input"/>
And set a listener to its value
$(function(){
$("#input").change(function(){
console.log($(this).val());
})
})
Then I tried it in the latest chrome/firefox/edge
They all give a fake path as value. The only thing that's real is the file name. May be that some browsers actually expose the full path, but not the ones I tested.
It makes sense that the browser is shielding this information since at least on windows when you are choosing a document it will most likely reside in your current user directory. So the path will contain your local user name and that's not something you want to give to a random website, right?

Js - Cache file, open it, detect changes and upload

I have a file structure on a web page, and look for a solution for the following scenario:
The chosen file should be downloaded in browser cache and opened (if it's an excel document, open with excel, etc.).
Now when the user changes the file, it should be detected and the file should be uploaded again.
Is this even possible with JavaScript?
If yes, where do I store the file (temporary internet folder?) and how do I detect the changes?
The only way for this to work you would need to have the user select the downloaded file, and then check for modification.
HTML
<label for="excelFile">Select the excel file: </label><input type="file" id="excelFile" />
JS
//Change event to detect when the user has selected a file
document.querySelector("#excelFile").addEventListener("change",function(e){
//get the selected file
var file = this.files[0];
//get the last modified date
var lastModified = file.lastModified;
//check lastModified against stored lastModified
//this assumes you store the last mod in localStorage
if(localStorage['excelLastMod'] < lastModified){
//It has modified update last mod
localStorage['excelLastMod'] = lastModified;
//do upload
}
});
If you know your user is using Chrome you can use Chrome's FileSystem api
The way you describe it: No, that is not possible in JavaScript.
It sounds like you want an FTP client.
When the user changes the file, it should be detected and the file should be uploaded again.
That is not possible due to JS having almost no access to the file system.
The only way you can access a file at all is by requesting the user to select one, see:
How to open a local disk file with Javascript?
So the most you could do would be:
File is downloaded.
Based on browser & settings, file may be opened automatically, or not.
User is presented with a file selection dialog that they can use when they are done editing.
Compare selected file to file on server and upload if changed.
After downloading a file, you have no control over it.
For applications that have a protocol registered (such a steam://, for example), you might be able to request the URL being opened in a program, but that would require an if per file type/program.
Detecting file changes is not at all possible (because you have no access to the file), and uploading again requires the user to select the file manually, using a file dialog.
Thanks for your help and ideas. I saw a software (https://www.group-office.com/) which includes this function so there has to be way to do it.
New Idea, using chrome filesystem api (#Siguza already said it):
Create file from servers database on users local filesystem with filesystem api
open file locally (should work with filesystem:http://www.example.com/persistent/info.txt, or?)
poll last changes of file every x seconds
if change detected, upload file back to servers database
I saw some problems with excel locking the files Check if file has changed using HTML5 File API
but except of that this should work, shouldn't it?

Trigger file upload via Javascript only

I want to write a browser add-on that automatically upload file on the page. So this will be done in pure Javascript.
This is what I have / know:
input#someId of the file upload input
File name and location in the computer
I am trying to "hardcode" in the console for now as a "Proof of Concept" but I cannot get it to work.
I have tried these two methods:
inputElement.click() as inputElement is the querySelector of that input.
Use initMouseEvent from what's the equivalent of jquery's 'trigger' method without jquery? but gave me error Uncaught TypeError: Cannot read property 'dispatchEvent' of null
So my questions are:
How to trigger click input of file upload element?
Better: how to process the upload completely? Basically pass the filename+location for upload to start (like when user clicks OK to open the file from the dialog)
UPDATE 1:
I was reading this http://www.thecssninja.com/javascript/fileapi
Maybe uploading file from File System is not possible. How about these alternatives:
We can grab a file from url (http)
The file is just image and in Javascript memory (base64)
Anyone of the above should be OK if they can be automatically upload and bypass the dialog box and search the file via local File System. I am thinking what if the image DOM or even canvas can be just dragged?
As people commented, you cannot do that. For security reasons, you have absolutely no access to programmatic fill an file input. Think about it, some dude could add a simple script to steal files from your computer and you wouldn't even know!
As far as I know, can't be done.

Does method writeFile work in IE8?

I am writing Dropbox web-application and use Client Library for the Dropbox:
https://github.com/dropbox/dropbox-js.
For uploading file choosen by user I use method writeFile. Html object File(< input type=file >) is passed as parameter data. It works fine in FireFox.
It is said that this library is tested against IE9 and IE10.
Does method writeFile work in IE8?
If it does not work in IE8 then is there way to use html form for uploading file to dropbox?
Dropbox docs does not give example how to upload file by html form.
Is there some example?
writeFile takes the contents of the file, not an HTML input tag. See http://coffeedoc.info/github/dropbox/dropbox-js/master/classes/Dropbox/Client.html#writeFile-instance.
This means your JavaScript has to have access to the actual contents of the file to use writeFile. The HTML5 File API might help here, but it certainly doesn't work in IE8.
I think this means you'll need to upload the file to your own servers (via a standard form submit) and then transfer the file from there to Dropbox.
EDIT: Remove a clause claiming general poor support for File API. It looks like it's not that bad: http://caniuse.com/#search=file%20api

Getting full file path of a clients file using a file dialog box

I am trying to allow users to upload pictures to the server.
I am trying to create a similar system to any website that has an 'attach' file or 'upload image' feature. All I need is to get the full path of the file select by the file dialog.
I tried using this for the file dialog with no success:
<input type="file">
This method does not provide the full file path, due to security reasons. My question is how can I create a similar input dialog to websites like tinypic, photobucket, etc.. that can help users input the full file path of a given image, into an input field?
I am aware that this cannot be done using the method above for security reasons, however, I have seen this done before on various websites without any problems, I was wondering what I had to do to implement a similar file dialog that helps fill in the text, which is a full file path, of an input field?
It is not possible to get the file full path on local machine using browser and javascript.
However, as you would like to upload the file to the server, the easy possibility I see is to use html form with input type file. You will receive the file on your http server when the form is submitted.
Here is a very good url http://www.cs.tut.fi/~jkorpela/forms/file.html that explains the whole process nicely.

Categories