We Keep Coding

How to handle auto-uploaded file in cancelled form submission

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.

Uploading image via AJAX and pass file name using Django form submission

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.

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).

Processing a file upload with javascript before saving to database in Cakephp

I have a form that includes a file upload.
I need to extract some meta information using javascript from the file before saving the contents of the form to my database.
What would be the best way, if any, of achieving this?
To clarify: The issue isn't the with extracting the file meta but rather how to access the $_FILES array and execute a js file with this data before finally allowing the form to submit to the server.
How I am achieving this currently:
I submit the form to the controller action
It saves the data and then it sets a view variable with the location of
the uploaded file before re-rendering the initial view upon successful form submission
The view checks if the variable is set, and if it is, executes the
javascript which basically extracts the meta now that it can access where the file is, and updates the db
with an ajax call.
The above method is not ideal in that the meta belongs to the same row of data that is saved when the form first submits so ideally I would like to include it initial form submission and not when the page is rendered again after the form has been submitted. Seems like a bit of a dirty hack to me but I can't as of yet see another way this can be achieved.

I would suggest uploading using ajax (SWFUpload/Uploadify) and then sending data back to the view with the processed file data.
You can upload the file, issue a number of callbacks, and finally return the rendered filedata back to the waiting javascript function that issued the request.
Just my two cents

What sort of metadata? To answer your question, yes, this is possible, but only if the browser supports the File API. This excludes IE9 and older. For more information, see this MDN article on FileReader. There are various libraries that will extract specific types of metadata from files. For example, if you are interested in parsing EXIF metadata from an image file, you should look into something like jQuery-fileExif.

File Input filling with data from URL

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.