I want to allow my clients to be able to have a save-dialogue come up to save data that I've stored in Javascript. I can't direct them to an existing file because you can't modify the file system directly with Javascript.
Is it possible to send data directly to be saved (of course through a save-dialogue. Otherwise, it would be a crazy exploit). I'm trying to make it so my users can create content on my site and be able to download it.
You could use links with dataUrl to create a save link : (this need you to encode your data using base64)
var a = document.createElement('a');
a.href = "data:text/plain;base64,"+base64_encode("plop");
a.innerHTML = "save";
document.body.appendChild(a);
You can get the base64_encode function at http://phpjs.org/functions/base64_encode:358 .
Users would need to right click the link and choose "save as..." to save the file on their filesystem.
You could create a save button, and then offer a download dialog. And by allowing users to upload the file again, and parse its contents, you could load your application.
There are several ways of doing that:
Server Side
Store the serialized form data (or whatever data) in a data base with a unique id, and give the ID to the user, when he wants to load, he'll supply the ID, and you'll whip the data for him.
Account system, assuming you have an account system, you can link each form data to a specific user.
Serialize the data in a way, and give it to the user as a downloadable file, then when he wants to recover, he will upload the file, you parse it, and display it for him.
Of course both solutions require an AJAX solution to communicate with the server.
Client Side
If your site is modern (You don't care about old browsers) you can use Local Storage to save his input on his computer, and then automatically load it from his memory when he returns. Note that browser support is not great, you should use Modernizr or something similar to test for it.
What about using server sessions and storing content there based in DialogId and SessionId.
Flows:
1. user stores info. session_id[dialog_id] =
2. user retrieves info. = session_id[dialog_id]
You may use json and base64 to transmit bulk and structural info.
I suppose you want to save the data in a file on the client's computer.
You cannot do it directly because JS cannot access the local filesystem.
But you can achieve it via the server. You would at the same time
send the data to the server and download it to the
client. The download opens the usual "Save As..." dialog where the client
can specify the file name.
A possible concrete implementation uses a form that makes a POST
request to the URL save.php, passing the data to be saved in
a hidden input field save_data. The result of the request is
directed to an invisible <iframe>.
<form action="save.php" method="post" target="save_target" onsubmit="save();">
<input type="hidden" id="save_data" name="save_data" value="" />
</form>
<iframe id="save_target" name="save_target" src="#"
style="display:none; width:0; height:0; border:0px solid #fff;">
</iframe>
The JS function save() prepares the data to be send:
function save() {
document.getElementById("save_data").value = ...;
return true; // or false if something wrong
};
The PHP page save.php on the server processes the POST request and downloads the
data:
$data = $_POST['save_data'];
$size = strlen($data);
$contentType = "text/plain"; // MIME type
$defaultName = "x.txt";
header("Content-Type: $contentType");
header("Content-Disposition: attachment; filename=$defaultName");
header("Content-Length: $size");
echo $data;
Related
I am using Laravel/Jquery with barryvdh/laravel-snappy to create a pdf on the fly from database data.
In the controller I have:
if ($request->ajax())
{
$document = Document::url($id)->first();
$pdf = PDF::loadView('app.documents.whitepapers.pdf', compact('document'));
return $pdf->download('filename.pdf');
// return response()->send($pdf->download('filename.pdf'), 200, $headers);
}
How can I push this PDF to the browser so that is available as a download?
When I do it without Jquery it is working perfectly. The reason that it is behind a Jquery function is that I use a Modal with a form to collect a persons data before the download can be initiated. This has ajax validation.
You will not be able to present the file as a regular download via JavaScript. In order to show a download prompt to the user, you'll need an extra step in your workflow.
I would suggest the following workflow:
User submits modal form
Form is validated via AJAX. If validation passes, respond with a URL to download the user's PDF from, instead of the PDF itself.
Your JavaScript redirects the user to this URL. Note that this is a redirect, rather than another AJAX request (see top.location.href)
When the user accesses that URL, you are able to deliver the PDF using the code snippet you provided in your original question. This snippet sets the content-disposition of the response appropriately, forcing the download prompt to appear in the user's browser.
If you need to customise the PDF generation for each user, make sure to include the user's ID (or another piece of identifying information) through to step 4.
What I want to do is to have a set of editable Excel files on my webpage:
I give links to what for the user represents an Excel file
With a click, the user's default program for editing Excel files (say, MS Excel) should open
After finishing editing, the file should be uploaded to my server transparently for the user, and next time the user visits my page, they should see their edited file and be able to edit it again
What I have considered:
JavaScript Excel-like grid. However, I did not find a JavaScript library with sufficient features, such as easily moving rows (any advice of a good JavaScript Excel component?)
Saving to DropBox / Google Docs /... using their APIs. However, it requires the user to have an account, and it will probably require me to manage user's DropBox passwords (and not all users will want to share passwords with me). Also, I will need to have interfaces to Google Drive, Miscrosoft OneDrive, and who knows how many other services.
Allow the user to download the file and rely on the user to upload it back again. However, this is too complicated for the user, and the users will forget to upload the files, which means losing their edits. Any way or uploading the file automatically upon closing?
A macro in my Excel files that would contact my server before exiting. However, this requires the user to enable macros (security alarm) and may be unreliable if the connection breaks. I did not evaluate whether this is technically possible.
Or what is the best / simplest way to achieve this?
(I know how to generate Excel files and how to open them from the webpage; my problem is how to get the user's edits back to the server transparently for the user.)
I think the easiest way to do this ("get the user's edits back to the server transparently for the user") is to use AJAX (JS) requests to PHP scripts.
AJAX is great for doing things in the background (asynchronously), but it can't edit the server. Just add an event listener in JS (an onchange or onblur, perhaps) and send an AJAX request every time the user edits the file.
PHP is a great server-side scripting language, and you can edit files with it.
EDIT: Example (on request)
Assuming that the Excel file is stored in a string in a <textarea> for simplicity (for now), you can set a listener to get the data from it (in jQuery), and send an AJAX request:
HTML:
<textarea id="excel"></textarea>
JS:
$("#excel").change(function() {
var excelFile = $(this).val();
$.ajax({
url: "updateFile.php",
method: "post",
data: { data: excelFile }
});
});
PHP (updateFile.php):
<?php
$data = $_POST["data"];
$file = fopen("FILENAME.xlsx", "w+");
fwrite($file, $data);
fclose($file);
?>
I am trying to save user data while on later i give the option to user to see his unsaved work.I got all the data but image upload file is missing.I i am trying to save file field like this in DB :
$files = $_FILES;
$__fields['file'] = json_encode($files);
Then i save this field to DB.I tried to set the file field like this but no luck.
$files = json_decode($row['file']);
jQuery('#myimg'). val('<?php echo $files->name;?>');
what i am doing wrong ? I want that when customer see his unsaved data the file field is filled like he leaved it.Only file field is creating issue for me.Thanks
When a user unsaved a file means he doesn't uploaded to your server. the file is being in his local computer.
And Its not possible to take that it from php side. unless you upload the file.
Do one thing when the user select file then upload it to your server and keep it in a temporary place and then do your job.
hope this helps
As per the documentation, $_FILES is an associative array of items uploaded to the current script via the HTTP POST method. See manual
What you need to do;
Grab the contents of $_FILES on the initial HTTP POST.
Validate the image
Save the image to your server
Store the location of the saved image in the database, to be read later
OR
Use a 3rd party API
http://api.imgur.com/
See http://www.w3schools.com/php/php_file_upload.asp
(sorry for a w3schools link)
I want to access url of file which user select through pop up file directory navigation window. My browse button tag is:
<input type="file" id="loadFile"/>
On the back end, i can access the file url in javascript, but not sure how to do it in PHP.
You have to have the correct enctype for the form.
Otherwise, you utilize the $_FILES super global.
This is covered extensively in the PHP Manual regarding uploads.
The original filename is available in $_FILES['load file']['name']
Since it seems that you actually want a way to have the user provide a url to a file, the way to handle that is to simply implement a text input and accept the url there, and process the url on the server, using an HTTP client that fetches and stores the file on the user's behalf.
For years people have been using the curl extension, which is fast and highly functional. There are also a number of client libraries written in php like Guzzle.
Here's my problem:
I have 2 web applications and want to upload a file from 1st to 2nd one. So I have to face with 'Same Origin Policy' issue.
In my case I own the 2nd Website and the 1st one is not mine. It's for my new customer of my existing web application and is developed with php and due to my lack of php knowledge I can't do server-side php coding. So I only can put some JavaScript code into one of its pages. So I don't have the proxy server option either.
And the third problem is I have to get this file uploading work in all browsers (including IE8+); so I also can't use the File API and XHR.
Any solution to my nightmare?
I don't know how much data you need to send upstream, however, here are two options:
1) MAKE AN IMAGE REQUEST THAT CONTAINS ALL PERTINENT DATA IN THE URL:
Parse the data you want to send upstream into query string parameters that get submitted to a special web service that knows how to read and collect this data from the URL. The server response should be empty. NOTE: URLs should not exceed 2000 characters. If you have a large data set, you will want to use option 2.
EXAMPLE:
/* I'd recommend doing the following with jQuery or some other JS framework */
var img = document.createElement('img');
img.src = "http://website2.com/uploadHandler" +
"?data1="+encodeURIComponent(data1) +
"&data2="+encodeURIComponent(data2);
document.getElementsByTagName("body")[0].appendChild( img );
OUTPUT (at end of body tag):
<img src="http://website2.com/uploadHandler?data1=myName&data2=myInformation" />
This will cause a HTTP GET request to be made to your server at the above address. The trick is that you're not actually going to serve an image but rather collect data from the request.
2) FORM POST:
Use javascript to create a form and populate that form with input fields containing the data you wish to upload. You can automatically submit this form using myForm.submit(). Using jQuery this would look something like:
$(document.body).append( $('\
<form name="myform" action="http://website2.com/uploadHandler">\
<input type="text" name="data1" value="myName" />\
<input type="text" name="data2" value="myInformation" />\
</form>') );
document.myform.submit();
Using this technique will cause a new page to load. However, you could use a redirect on the server side to redirect to the original page. Read the following if you choose to redirect: http://www.theserverside.com/news/1365146/Redirect-After-Post