Hello I am working on multi step registration form and it contains file uploads in the intermediate step . I am storing each value in the form in the cookie to work it with browser back button and and reset the same in the final form which i want to post at the. But how to store the file upload in the cookie so that i can set it when user clicks on a browser back button. Also i need to submit it along with the final form.
You can't store a file in a cookie, you are going to have to store it on the server and keep a reference to the server within the cookie if you want it to work as you describe.
Something you could do is keep the entire form on one pageload and swap the content of a div dynamically. That way you could just hide the form elements you don't need, including the file form. A submit button at the end would take all the hidden inputs, with the file and post them all to the server.
Related
what i am trying to do is to have one file with forms that can be filled out, some sort of setting page. When the form is filled out id like to display the input in another file. So one page to put the input and another one to display it.
I already tried to do it with .getElementById, it worked in the sense that i could display the input but only on the same page.
Thank you for your help
From what you have mentioned, you can use WebSockets . You cannot use selectors that are in a different page.
When you fill the form, send a message to server and then the server can emit the message. Just like a chat room.
You can use session variables to do that.
For example Once the form is filled user clicks on the submit button, that will sent the form elements (e.g.name,number,text,etc.) to the session variables using POST method.
And the session variables are accessed,modified throughout the session.
You can store form info into the browser local storage
localStorage.setItem('key', 'value') to create or modify data
localStorage.getItem('key', 'value') to access data
localStorage.removeItem('key') to delete data
localStorage.clear() to delete all data
I'm building a web app in which the HTML code is indirectly editable by the user. Elements are added according to user input. For instance, input boxes can be directly inserted by the user pressing 'enter', however the web page from my server is a static page. I want the user to be able to click a 'save' button, and the whole page on the now-edited client side is saved to the original file which was sent so their edits are saved for next time they visit my site.
Saving the file is not allowed to be done on the clients local disk.
How can I go about doing this?
let save =document.querySelector('btnSave');
save.addEventListener('onclick',saveFile);
function saveFile(e){
...
}
This is my scenario:
I have a form with some information like full name, birthday... and one input is filesupload with an auto upload option
If I use auto aupload, files will be uploaded to server before the form is submitted. If user cancels form submission, The db record is not created hence I do not need the file uploaded anymore and this lead to trash files on my server.
Is there any way I can handle this so i do not have too many trash files in the upload folder on the server?
Form your question i think what you want to do is to be able to delete a file if the the form data is not submitted and the file has auto-uploaded right?...
These are two ways to achieve this:
1. Do not auto-upload in the first place
There is no real reason why you should upload the file itself to server FILE_UPLOAD_FOLDER. Instead, convert the file into a base64 string which you can save in your db instead of using the file-path as link. When you want to render you can convert the string back to a file
2. Create a method that listens to the cancel button click.
I would assume that you have a variable that holds FILE_UPLOAD_PATH, hence just create a javascript function to delete the file and put it in the onClick attribute of the cancel button.
Main problem is values written in input elementss disseapear after page reload (submit , refresh etc.)
I have a completed form ... /form element. Traditionally, I can insert a php line.
<input value="<?php if(isset($_POST['foo']))echo $_POST['foo'] ?>">
This solves the submit part. However, I feel that this is the worst solution, in my case. I have hundreds of input elements in my form. There are even some inputs to produce input tables. Number of input elements are so much that i became curious about finding a work around.
Is there a way to store input->values before the submit operation and inject them after page reload?
So that, the user can upload a file, file will be parsed by php core. And when the page reloaded both user originated inputs and file originated values are exist.
To simplify:
After "file submit & read & append file values to form", user shouldn't need to fill inputs that s/he already filled. I need an idea to achieve this, different then "inserting a php line to every single input element."
In such a situation I could recommend sending the file via AJAX and handling the response of that thereafter and then only injecting the values from the process and uploaded file when you get the response from the server.
Alternatively you could use localstorage or cookies to persist the information. However both local storage and cookies have a defined limit on what they can store. Cookie can only store 4KB in total which doesn't allow much.
Without uploading via AJAX, you could write a javascript function to find all inputs with jQuery/javascript and save their values in localstorage and on new page load to a check to see if there are any present and inject them back into the same inputs based on id/class/ etc with jQuery making sure to delete the localstorage values when done.
I need to download a file from a server and to get a pop-up 'save as' box on the client. I can't do this in Ajax, so I create a hidden form in the client JavaScript, and I submit the form in the JS when a button is clicked. The server gets a POST, and it sends the file back as an attachment, and the client produces the 'save' box.
So far, so good, except that there are two problems here:
1 - I want the JS to delete the newly-created form when the user has completed the download. I suppose I could just leave a useless hidden form in the DOM, but it's not ideal. The problem is that form.submit() executes asynchronously, so I don't know when to delete the form - I can't simply do it after executing form.submit()
2 - Sometimes the user actually needs to download two files. This code doesn't work:
form1.submit(); // download file 1
form2.submit(); // download file 2
The client only executes/completes one of the submits - I can do both by putting an alert between the two, for example, but I need to do it properly.
If I was doing this with Ajax, I'd just make the calls synchronous, but I can't find a way to do this with form submission. Ideally I'd like an attribute to make the submit synchronous (something like .setAttribute('async', false), which doesn't work).
Any ideas? Or another way to download two files with two save-as dialogs?
A great trick is to use a cookie. The trick works like this:
Create your temporary form, and add two extra fields that you populate, one with a cookie name and the other with some unique value (could be random, could be a timestamp or a counter; doesn't really matter).
Submit the form.
At the server, the code should do whatever it normally does to create the download. It should also create a new cookie with the given name and value. Return the response.
Back at the client, right after submitting the form, start an interval timer to check (every 100ms or so) to see if there's a cookie with the chosen name and chosen unique value. As soon as you see the cookie, you know that the form response has arrived!
As to downloading two files, I don't think there are any provisions in HTTP for two attachments. You can of course return something like a zip file.