HTML-Javascript - Filechooser showing only server-side files - javascript

I hope the following isn't too tricky.
I have a simple html button. Now I want to open a filechooser as soon as a user clicks on this button.
I do this like the following:
$('.button').click(function()
{
$('<input type="file"/>').attr('value');
});
This opens a filechooser, but I want this file-chooser to only show files on the server, not on the client. I've searched the net but couldn't find an adequate solution so far.
Any proposals are welcome :)

Impossible, sorry. You'd need to use server side code to make a tool that allows the end user to browse the server's files.
The file input is used for the end user to choose file(s) on their machine. It has no knowledge of the server's files.

It's not tricky, but you can't use Input tag for it. The steps are:
Create a module to traverse the directory on your server and output is a JSON format in whatever server implementation that you choose
Create a REST endpoint to give the browser the JSON output from step #1
Use AJAX to call this REST webservice and get the directory listings
Use Tree Widget to basically build the file structure based on JSON (I am sure if you look, one is probably there already for you to use)

There's no simple way to do it. If you use jQuery UI you can use a plugin like this:
http://gusc.lv/jquery/gcmedia.html
With a server-side scripts that outputs a list of the files you want to make browseable.

Related

How to download data to a client in AngularDart?

How can I provide the user of a web-app with a download-link to programmatically created data in AngularDart?
I thought this would be an easy task, since the download of data could be handled via data-links. But it turns out that AngluarDart doesn't let me use data-links since they are considered unsecure. In a pure Javascript environment I would use Filesaver.js, but also this is not possible with AngularDart (at least I didn't find a way to use it there).
What I really want to do: I create data in the app with code. At the end i have a json-structure that needs to be downloaded to the client computer of the user. He should be presented with a file select dialog where he can enter a filename and then the data should be saved there. And this should be initiated by a click on a button.
Up to now i didn't find a working way to make this happen in AngularDart. I tried BrowserClient, a-tags with download attribute, forms with data-url, but nothing works.
If anybody could give me a hint how to make this work, I would be very happy. A hint on how to use Javascript-Libraries (like FileSaver.js) in AngularDart would also be welcome.
I don't use Flutter and also I need this to work in the browser. So File from dart:io is no solution for me (this will be one of the first things you find, when searching for a solution). Also it is no solution to save the file to the server and download it to the client.

NodeJs temporary file creation, serve and deletion using tmp or something else

I am trying to make a compiler in which users make code at abc.com/newProject and their output is in an iframe, that iframe need to be served files that are made at the abc.com/newProject. So I will be doing a POST of JSON obj at abc.com/compile-project that will create files and those will be used by the iframe, after being used those should get deleted. Files are basically JS files that iframe will fetch using script in header.
So a pseudo-code will look something like this:-
app.post('/compile-project', function(req, res){
//Directory created using node tmp
//files created in the directory
//These files are accessible using <script src="/js/file1.js"></script>
//when the current connection requests the files they get deleted
});
Any help will be appreciated thanks.....
I am trying to make a compiler [...] Any help will be appreciated thanks.....
I would strongly discourage you from doing that if you don't know what you're doing (and considering the fact that you're asking how to save a file then apparently you don't).
The requirements that you described are extremely simple but you need to have much deeper understanding of everything that's going on to avoid serious security problems that you will encounter with no doubt along the way.
What you describes can be done without even using a file system, since all your files are served only once so it doesn't make much sense to store them in actual files. But even if you insist on the file system then all you need is to use fs.mkdtemp to create a temporary directory, use something like the uuid module for unique IDs to use in the filenames, then use fs.writeFile to write a file. This is all you need for the file upload endpoint. Now in the download endpoint all you need is to use fs.readFile to read the file and fs.unlink to remove it. That's it.
Now, it will surely get you into trouble of failures on browser reloads, back button not working, and finally security issues of people being able to serve any random code from your servers leading to vulnerabilities too numerous to even list here.
Take a look at the source code of repl.it and JS Bin on GitHub:
https://github.com/replit/repl.it
https://github.com/jsbin/jsbin
to appreciate the scope of the project that you are willing to undertake.

How to send a javascript file (with several functions in it) from the server to the client side?

I need to have the functionality in the server side in order to hide the implementetion to the final user.
I didn't find a topic with this kind of solution.
I have a .js file with functions I use within the html5 file.
The js files are "called" in the html by using the script tag, but through the url the user can track them and see the .js file content. I don't want this to happen.
$getScript() does the job, but again the url can be cathched, thus the file content too. Much the same with $ajax function.
Everything work ok, but I want to hide the js content.
The .js file is something like this:
var x, x,....
function A(){...}
function B(){...}
and so on, I use A(), B() functions in the html.
Which is the best approach to get the content file from the server without doing the url visible?
Server: nodejs. (I send some json files through socket.io correctly, but I don't know how to achieve this other issue.
Thanks in advance, best!
If you are sending sensitive information to the client then you are doing it wrong. No matter if the client has the URL to the script, they will still be able to find it if they are determined as long as it is sent to their computer.
Find a different way to accomplish what you are trying to do without sending sensitive information to the client. It is not safe.

Write a line to javascript file

Im using a array to display some images in a website:
var paintingImages;
paintingImages =
[
{
url: 'images/objects/ron.jpg',
alt: 'ron'
}
];
This js code is written in paintings.js and my main js code is written in the file main.js
I have made this website for a artist and I want to give him the opportunity to login and add pictures to his website. I'm not that good with php, but adding images to a ftp in a folder is no problem.
Because I'm using a array for retrieving the images, I need to be able to add items to the array.
This is the part where I'm stuck. I don't know how to edit a existing js file, so the next time I open the website, the items (images) will been shown.
Activexobject is not a option because it's only possible in IE.
In summary:
I need to add a item to a array
I need to save this into the file, so the next time the website opens, it will be shown
I'm not verry good with php, I prefer javascript
Can't use Activexobject because of the use of multiple browsers
You can not simply modify a javascript file sitting on the server from browser side javascript.
You need to implement some server side logic.
If you don't like PHP, but like JavaScript, check out NodeJS for example.
With Node you should be able to build some lightweight serverside logic to modify your json array file with additional images.
You would need to change your logic .. You need to send this data to server anyhow . and when you load your next time take it back from server and update your webpage accordingly. I would suggest use any javascript MVC framework like backbone, angular.js. it will help you.
Use a database.
Save it to a database server (You figure this out, could be via forms, xhr, websockets, etc.).
On page load, load the correct data for the current user.
Create the $userPaintings array (call it what you want) from the user data in PHP.
Then simply output a JS object in the page with PHP:
<script>
var paintingImages = <?php json_encode($userPaintings); ?>
</script>

Selecting text file then reading its contents in PHP

I was having a problem with pasting huge amount of text in a text area in HTML as it causes delays and slow processing time. Then one of the responders here in Stackoverflow suggested I upload the text file instead.
Now I am having problems on just how to do that exactly. I've been researching for hours but couldn't find the answer I'm looking for. What I need is for the user to select the text file then PHP reads the contents of that file into a variable. The file contains server logs so it should be huge.
I've been researching and options like fopen() or file_get_contents() seem to only open specific files, I need it dynamic, the user must select the file himself. Also, I am confused if I want to upload the file into the server or just read it's contents without uploading. I maybe prefer just reading.
We run a team that checks the user log of any users having issues, we have a tool that downloads a text file of any selected user, we then need to read that log into our PHP website/tool.
What you're looking for, on the client side, is <input type="file" name="myfile"> which allows the user to browse for a file - of any type - and upload it to the server. After it's uploaded, you get access to it from PHP through the $_FILES structure. See more here.
You may try this
file_get_contents($_FILES['uploadedfile']['tmp_name']);
Store this result into one variable. Print this result. Check what will be shown.
But the condition is you should use html form. I think you know this basic concepts.

Categories

Resources