How to handle auto-uploaded file in cancelled form submission - javascript

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.

Related

What exactly is Django's FileField doing when one clicks the "Browse" button and selects a file? Can I replicate this behavior with Javascript?

When rendered, a Django form with a FileField will have a "Browse" button. When clicked, this allows a user to browse through their system, select a file, and hit OK, presumably giving some reference to the file's location, its contents, etc.
This is before the "Submit" button is hit, so nothing is sent to the server—and there are no network requests made, thus there is no actual Python running anywhere. I assume Javascript is doing something because the name of the file pops up, and, somewhere, a reference to the file is stored (and sent to the server when the user clicks "Submit"). The FileField is populated somehow, but I'm not sure how.
What exactly is going on here?
I ask because I'd like to replicate this behavior with some AJAX/Javascript alterations. My intended process is this:
User makes recording (I use WebAudioTrack)
User clicks "Save," this sends a Blob from the AudioBuffer to some view via AJAX
That blob is processed into a WAV file and saved as a temporary file (or something like this).
Via some other script, that file is used to populate the form's FileField as if the user had clicked "Browse" and selected a file manually themselves
I'm having problems with Step 4, and it's because I don't know what's actually going on when a FileField is populated (or any instance of a user selecting a file for some HTML field).
(Just to emphasize, I'm talking about what happens before the user clicks the Submit button.)

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.

Retrieve PDF from iframe

Is it possible to retrieve a PDF from an iframe and submit it back to the server?
My use case is to display a PDF form to the user, and let them submit the form after filling it out. I haven't found anything indicating this is possible, but I'm remaining hopeful for the moment.
You can add a submit button inside the PDF itself while generating it, and treat the data comming from your PDF form in the same way you would deal with an HTML form.
In order to achieve this, you will need to add a button annotation to your PDF form, and attach a "submit form" action to it. See Chapter 8 - Interactive Forms of the PDF Reference Document from Adobe for more details.
You can create then an asp.net page that processes the input from the PDF form. Note that the field names of a PDF form can be used in asp.net Request object to collect the data.
If you want to submit the whole file instead, you can do so by setting a flag in the "submit-form" action that you need to add to your PDF file, but I do not recommend doing this in general since it will consume more bandwidth from your server.

Uploadify and ASP.NET Data Annotations / Validation

I'm using uploadify to do file uploads on a form. The files are required on the form. The properties on my model which represent the files have the Required data annotation applied.
I have got uploadify working well and saving the file on the server.
The trouble I'm now having is with validation. I can't figure out how to not show the required messages once the file has been uploaded. Uploadify doesn't seem to set the value attribute on the file input.
I've tried hooking up the onComplete event and setting the file input's value attribute to the Id of the file that was returned by my script but this doesn't work either.
Am I right in the process I'm using?
User opens form
User selects file
Uploadify sends the file to my upload script
Upload script saves file, creates DB row for the file and returns Id
Javascript puts the Id of the file in the DB in the file input's value property.
User submits form
Server side code links file to the form submission
Is there a better pattern? This doesn't seem to be working for me because of the validation.
Because you cannot set the value property of a file field using javascript (for security reasons) you could use a hidden field instead. So modify step 5 like so:
5) Javascript puts the Id of the file in the DB in a hidden input field corresponding to some property on your model that will have the Required attribute.

File Upload and Cookie

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.

Categories