I am trying to add some emails taken from an inputbox into a .txt file present on my webserver. Here is the code :
email = document.getElementById("mail").value;
$.ajax({
url: 'maillist.txt',
datatype: 'text',
type: 'PUT',
data: email + '; ',
success: function(data) {
alert('Should have work yay!');
}
});
but that doesn't work on any browser. :(
I have tried using javascript classic methods but it was a no go as well...
I would need either a PUT or POST method, either jQuery or JS, to be able to do this on internet explorer 8 and up as well as firefox and chrome. Emails should appear in the text file as
email1#cooldomain.com; email2#cooldomain.com; .....
Just so it works with our in-house VBA Macro. :)
Also, could there be a method for dropping data into XML files (aka create a new XML entry with form data)? And also, is it possible to upload a file from client side to server side using jQuery? Because i would need users to fill up forms and drop their data into an XML file, and link up a file they choose with that. That way they could add stuff into the XML themselves and they would show up brand new into the webpage.
Kindoff "reddit" or "4chan" like if you know the references.
Thanks for your time, really appreciated!
You can't post from a browser to a text file on the server side. You need to have some sort of code on the server side that will receive the HTTP PUT, and persist the data to a file local to the server.
Related
I'm using Apify to crawl about a hundred pages, and I wish to download the HTML files of all the pages I visit into a dropbox folder. How do I specify this in my jQuery Ajax code?
Sorry in advance, I am quite new to Javascript and everything web-related.
I've tried to follow these tutorials already: https://forum.apify.com/t/data-download-from-within-crawler/48 and https://www.dropbox.com/developers/documentation/http/documentation#files-save_url, however, I am only able to download the HTML file of the second page I visit. I know that my crawler works perfectly fine and visits all the sites it needs to, as I am getting the results I need from these pages, so the problem seems to be that I am not specifying that I want to download all the HTML files. How do I do this?
(In my actual code I have written in the correct Oath-token, I just don't want it to be available online for everyone to see)
var html = $('html').html();
var url = "https://content.dropboxapi.com/2/files/upload";
$.ajax({
url: url,
contentType: "application/octet-stream",
headers: {
"Authorization": 'Bearer ' + 'My Oath-token',
"Dropbox-API-Arg": "{\"mode\":\"add\",\"path\":\"/a.txt\"}",
},
type: 'POST',
data: html,
autoRename: true,
max_results: 1000
});
What I am getting out of this is one file saved as a.txt in my dropbox, which is what I wanted, only that this file only includes one HTML file, not a file including all the files my crawler had visited.
This code is the first thing my crawler meets for every new page it visits.
I'm making a collaborative editor for websites, much like Google Docs, but it's built for coding and development. I want to allow multiple users to edit a file at the same time, and push their changes both to the server and the other person viewing the file. How could I do this?
I can't figure out how to synchronize the data between users. The code I have right now is as follows:
AJAX in JS:
function update(f, txt){
$.ajax({
type: 'POST',
data: {text: txt, file: f},
url: "save.php",
});
}
save.php:
$file = $_POST['file'];
$contents = $_POST['text'];
file_put_contents(dirname(__FILE__) . "/preview" . "/" . $file,$contents);
You can use EventSource to stream data from server to browser or WebSocket to stream data both to server and from server. That is, each client receives the stream of the file continuously, see for example How to read and echo file size of uploaded file being written at server in real time without blocking at both server and client?.
plnkr provides a real time sharing option and is open source. Consider locating and reading the code for that application and adjusting for what you are trying to achieve.
So I'm making a browser based game, and in order to create an account for this game I have the JS file call a PHP file (POST) to write an XML file.
This works, I get the file in cPanel, in the right directory, with the right content. Meaning I can open it, but only in cPanel. When I try to access it via browser I get a 404, but only for about 30 min, then it'll just magically start working.
This same PHP file is called later on in the game to update XML files, and the same thing happens. I can confirm that the PHP works exactly as it should, because I can see that the file/directory is perfect.
Here's the interesting bit, if I create an XML file manually or update it manually, it works instantly. It's only the XMLs created by the PHP file that take forever to load.
It's like the server doesn't realize that there was a change on it, until half an hour after the fact. That is, unless I did it manually.
My PHP:
<?php
$filename=$_POST['fileTo'];
$newfile=fopen($filename,"w")or die('Can not open');
$string=$_POST['stuff'];
fwrite($newfile,$string) or die('Could not write');
fclose($newfile);
?>
My AJAX call:
$.ajax({
type: 'GET',
url: writeDirect,
dataType: 'xml',
success: function(result) {
},
cache:false,
error: function(error) {
$.post('PHP/Accounts/creatAcc.php', { fileTo: userWrite, stuff: writeStuff }, function() {
signIn(userATFS, passCe);
});
}
});
Update:
I've decided to access the games directory directly from the browser. This gets even more interesting.
First thing I did was create a new account called testFile, I get the standard error on the GET because the game can't access the newly created account.
Then I opened the directory in Chrome, this is interesting:
The index clearly shows that testFile.xml exists
Then I try clicking on it, but this is where it breaks
The images 404 despite the file clearly existing
And no, changing the permissions on testFile.xml did not change anything.
I believe I've found the answer. I think it was just that server that was weird like that. I was using x10 basic and decided to switch over to another service and now it works.
In form, There is a field of file
<input type="file" name="file">
<input type="button" value="upload">
I want to upload image file onto server but I can't able to upload the image. Is there any solution in only javascript? Please help me to find this answer.
Thanks..!
This isn't possible with JavaScript alone, you will need to use a server side language to process the actual uploading of the file.
This will do the job in Firefox, IE does not support FormData, so you should find another way
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<form id="data">
<fieldset>
<div>Asset File: <input id="image_file" name="image_file[]" type="file" /></div>
<div><input type="submit" value="Submit"></div>
</fieldset>
</form>
<script>
$(function() {
$("form#data").submit(function(event){
event.preventDefault();
var url = 'http://server.com/upload';
var image_file = $('#image_file').get(0).files[0];
var formData = new FormData();
formData.append("image_file", image_file);
$.ajax({
url: url,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (status) {
// do something on success
}
});
return false;
});
});
</script>
Your web site files are stored at the server. JavaScript runs at the client-side.
The images must be stored somewhere. But the client-side JavaScript have access to the user's browser window (or tab). and user's cache. You cannot write files at the server storage using only client-side JavaScript.
The ways images are uploaded and downloaded:
Download:
You send request to the server using JavaScript (ajax for example). In this request you say: "GET http://my-site/images/cool-dog.png" This is static request that try to access images/cool-dog.png from your public folder on the server. Every server has option that allows you to determinate which folder will contain all the files for the static requests.
STATIC request is when you try to access a file with an extension (cool-dog.png)
Upload:
As we know, everybody can write client-side JavaScript to the console: Every major browser has debugging tools. And everybody can send any kind of request to your server from Postman for example.
It will be bad to accept all of there request. Somebody may want to upload 100GB file at max speed. That may affect the application and server performance or even hack the application.
You need server-side logic to determinate which file is good for your server and where this file must be stored, since the JavaScript know only about client-side storage (cookies, localStorage, sessionStorage, cache, etc...).
Upload process is:
You send request from the client-side JavaScript to the server-side. For example : POST http://my-site/uploadImage with the image data.
The server-side accepts that request. For example: Router.get('uploadImage', function() {...Server side code...}). Since http://my-site/uploadImage is dynamic path (we do not have extension) The server-side Router will wait for this kind request and if it's requested the server-side code must check the file size and extension (.png or .dll) and etc... And if the file is good for your application then you can write this file to the server location.
The different server languages and technologies has different methods for processing requests and writing files.
If you want to extend your knowledge you need to learn at least one server-side language and technology. You cannot make flexible applications only with client-side logic.
If you are familiar with JavaScript yet. You may want to learn NodeJS. This site contains great tutorials for NodeJS beginners.
PHP is also easy to learn if you can found some good tutorials.
Here is tutorial how to upload files using nodeJS
and here is another for PHP
I have an application which is javascript and HTML to be delivered with about 500 short (18MB) videos on 2 physical discs. I'm making an ajax request to check a file exists before displaying it, if it does not I prompt the user to insert the other disc.
video.innerHTML = "<p class=\"no-video\">Working...</p>";
$.ajax({
url: "movies/"+num+".mp4",
type: "HEAD",
success: function(){showVideo(num);},
error: function(){video.innerHTML = "<p class=\"no-video\">Please insert the other disk and click ok</p>";}
});
This works fine in Firefox, but takes about a minute to figure out the file is actually there in IE (if the file is missing it is fast), I'm assuming this is because IE does not respect type: "HEAD" but it still should not take that long to load an 18MB file from DVD.
I'll have to test more browsers next.
Does anyone have any suggestions?
(would prefer not to have to re-load the HTML when the disc is swapped)
Interesting thought about using HEAD with the file system. Another solution is to use some sort of a file that acts as a table of contents for what's on the disc.