At a form, I have a file input field (for image) and I want to add an optional way to fill this field by fetching data via ajax API and this returns me the URL of an image.
How can I set the content of the field input as the URL image, especially is it possible without passing a hidden a hidden text field to pass this image URL to the server?
File inputs are for uploading the content of files from the client to the server. Since browsers won't let you (as a page author) download a file on behalf of the client, this isn't possible.
If what you were asking was possible, I could make you download a multi-gigabyte file just by making you visit my webpage. That wouldn't be a good situation to be in.
If you don't want the user to download and re-upload a file, then you don't want a file input. The other solution you mentioned (a field just containing the URL) sounds perfect for this.
Related
I am working on a real-time chat application, and I want to allow users to upload their own images to use as avatars. When a user uploads an image, the backend displays the following URL: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. When I log in to the app and check the console, however, I am greeted by the following message: Not allowed to load local resource: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. I was testing, and I then decided to change the input type from file to URL, and I then pasted the random address of a google image, and then when I loaded it back into the app the image had disappeared. Is there any way to allow for user-uploaded images to be displayed? I am using stream-chat API if that also helps, as well as Heroku and nodejs.
Keep the input as type="file". The user is picking a file from their disk. It won't have a URL.
fakepath comes from trying to treat the file input as a string instead of as a file. If you are using JavaScript, don't use the value property of the field as it is only useful for informational and debugging purposes. If you are submitting a form then it needs to be able to handle file inputs (and the default enctype doesn't).
Upload the image to a server. How you do this depends on your approach, if it is with a form then the enctype attribute needs to be set to multipart/form-data, if it is with Ajax then you should start with a FormData object.
On the server, parse the request (the specifics depend on your server side environment) and save the file somewhere.
Give the file a URL (either by saving it to a place that static files are served from or by having another server side process read the file (from wherever you saved it) on demand).
I am new in web development and what I am trying to achieve is as follows:
On a page where user create a blog
User upload image to a CDN via ajax and page will show image after
ajax success.
The uploaded image to CDN has a new file name and obviously URL address but the filename in input type="file" remains to be the original file name. During form submission, the ajax-returned filename has to be submitted for server side processing.
I am not sure if I am doing it the right way as how I would normally observe on many websites. My question is, how do people normally sync filenames in above case when an Ajax upload is used and the file name has been changed and stored in CDN prior to a final form submission?
I am using Django but I guess that doesn't really make a huge difference.
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).
I have a html page with a form ,with few input fields, check box,radio buttons.
User can fill up the forms.
Is there any way , the user will be able to download the form (with the filled in data) in pdf format ?
1 more question, Any way to save the filled in form in html format or image format (of course File-> save of browser and screenshot are there) using java script code or html code , on a button click ?
I have tried http://code.google.com/p/jspdf/ , didnot able to get through it.
Thanks
[Adding a few more points]
if generating a pdf file using JS/HTML is not possible then ....
A bit more into it
Currently I am creating a server using C# application and when user requests a html page , I am sending the same to user.
that html page contains a form , which is needed to be filled
and I want the user to save the filled form in pdf format.
For now , I am able to process the static html form -> convert to pdf and provide the download to user ,
But can't get a way to enable the user to save the filled in form.
When the user presses the submit button , I can get all the filled in data using httpResponce object(GET/Post Method)!! , is there a way I can generate a pdf file using this httpResponce object parameters?
Or any way I can send the current html page content (e.g. getting all the contents in a div using jquery/javascript) and send it back, when user presses the submit button, in that way I can generate the pdf file at server side and provide a download - PDF format
Please ask , if I am not able to describe my question !!
jsPDF is an open-source library written by our lead developer, James,
for generating PDF documents using nothing but Javascript. You can use
it in a Firefox extension, in Server Side Javascript and with Data
URIs in some browsers. http://snapshotmedia.co.uk/blog/jspdf
Using only javascript to generate the PDF is not possible at this time. Using server-side scripting, it is possible to send the data to a server and let the server generate the PDF which is then sent to the user.
(Update): Using PHP, you can generate PDFs in the server-side using dompdf - HTML to pdf converter. Here is a demo: http://eclecticgeek.com/dompdf/docs_0-6-0/demo.php
In Google Chrome, there is a "Print to PDF" option. If you don't want to do any programming on the server side, you can just ask your users to access the page using Google Chrome. After filling out the form, they print the page as PDF.
I'm afraid I might know the answer to this already. I'm hoping to present an HTML5 form offline in which a user can select an Image to upload. Once the user gets back on line the image will be uploaded. I can extract all the data from the file input, but is there a way to send the data via post to save the blob on the server?
I'm using jQuery and have a Rails backend (typical fileuploads are handled through CarrierWave).
You can create online event and call submit() on form that has your file image.
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
http://api.jquery.com/submit/