JavaScript - Default values of file inputs - javascript

In my app, users can fill a form (all kinds of inputs, including file inputs). At any point and after posting that form to backend, they can edit the form. In that case, the text/selects/numbers... are set to the value entered by the user previously.
What would the best practice be for file inputs ? I know I can't "preload" them for security reasons.
These files are stored on the backend. I need to find a way to figure out :
If the user hasn't changed the file
If the user has changed the file
If the user wants to remove the existing file (if possible ?)

Related

Pre populate a file input

I'm working on a job board site which submits user applications to a third party site. The users have to provide following information while applying: name, contact details and resume. Since these fields are also available on user profile on the site, we want to pre populate the form fields, allowing users to change the information as they like.
Now, all other fields can be populated without an issue. However, file input field can't be populated due to security violations. Is there a work around possible using FILE API and BLOB objects?
What I'm planning to do is the following:
Create a blob object from file URL on server
Read the blob as an array buffer using FileReader.
Attach this file to file input field <- this is what I'm not able to figure out and need help with.
Also, if there is any alternate way to achieve this, please let me know. I'm using PHP and JavaScript to generate the form, so I can do the preprocessing in PHP.
Attach this file to file input field <- this is what I'm not able to figure out and need help with.
It is not possible to set a value at FileList object of <input type="file"> element.
You can create and append a File object to a FormData object and submit FormData using XMLHttpRequest()
var data = new FormData();
data.append("file", /* Blob | File */, "filename.ext")
Creating an answer just to give a little more insights into how I solved this issue, and why there was an issue in the first place.
Background: I've created a custom WordPress plugin for a client, which fetches the job applications from various sites, and displays them inline. We also allowed application submission, where the users could attach their resume, and the same was submitted to the original job posting. Since, a lot of users access the website on their mobile, they do not have the resume available on the same. In such a case, we wanted to offer them a facility to use a resume stored on their profile.
Potential Solution: The simplest way to do this would've been to fetch the file contents via ajax from user's profile, and attach it to the form before submission. However, for whatever reason, this didn't work.
Applied Solution: The solution that worked is pretty old school. Instead of submitting the application directly, we submitted it to an intermediate page, which fetched the file contents from user's profile, modified the form data and submitted via curl. This also saved the double data exchange on user's end (file download and re-upload).

Saving a file client side with Meteor

I was looking around trying to find a solution but was unable one. What I want is the take whatever the user enters into text fields and save those into an xml file. Then I want to prompt the user to save that file.
What I mean is to get the info from many different input fields through document.getElementById('id').value and put that into the file.
For example:<lessonname>document.getElementById('lessonname').value</lessonname>\n

Saving input->values without embed php

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.

Save the client HTML content back to the Server as a HTML file

I want to create an HTML form on the Server. When the client completes the form and clicks submit, I want to be able to save HTML form and data in a single HTML file on the server.
The best suggestion I have seen is using JavaScript. Use a client side script that on click will save the document.InnerHTML to a var that can then be submitted back to the server.
Is this the best approach, or is there an easier way?
Even though I have no idea why you want to save the whole html code because I'm sure there will be parts that are the same for every user and you will be wasting memory, but ok.
So there are two ways to do this:
1. is javascript as you said
2. would be to put all the generated html code into a hidden form input (already on server side)
the first one seems more comprehensive and this is what I would do but the second one would also work for users with js disabled.
I wouldn't really recommend this way, because I'm still a huge fan of saving data in a database, but here's a general outline of what to do:
User fills out the form and submits.
Server-side code executes a method:
a. String holding the template for your HTML page with placeholders for the fields.
b. Use String.Format to put all the user input into the correct places.
c. Create a file, write the string to the file, and save.
d. Return file name to user.
HTML files are not that large, but still you risk using up your hard drive space. Also, you need write permissions which introduces security risks.
Going the database route:
1. User fills out the form and submits.
2. Server-side code saves the data to a database, and returns a link (with querystring string of ID and possibly a user id to help with security) to the user.
3. Whenever the user goes to the link, the server-side code repopulates the form with the ID passed.

Pre-fill a form with attached file taken from some URL in Django

I have a form with "subject", "body" and "file" fields on some page on my Django site.
If "subject" and/or "body" parameters exist in GET, I pre-fill them in the form from server side.
I want to do the same with "file" field - more exactly, I want if there is an "URL" parameter in request.GET, take the file from this URL and pre-fill the "file" field with it.
I've googled and still have no idea how to implement this whether with pure Javascript or with server-side help, and from my experience, it isn't possible (or at least hard to do) in most browsers due to input type="file" nature.
Is it in fact possible to implement it in some way?
You can't pre-fill a file field. But I don't think you need to use one at all, since you're getting the file from a URL, not from the user's local machine. Just use a normal text field for the URL, and get the file server-side (eg using urllib) after the form is submitted.
Most sites that do something like this implement it with a second form where you attach the file. Doing the upload via ajax means you do need to store the file on your server for some amount of time, and then your original form just needs a reference to that file so you know when you're done with it.
Then you just need to know when you can delete it.

Categories