Uploadify and ASP.NET Data Annotations / Validation - javascript

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.

Related

Is it possible to remove just some of the files from a user multiple file input selection using js before submitting the form to the server?

I am trying filter some of the user selected files in a multiple file input element in my html5 form prior to submission. It seems like you can either remove ALL of the user selected files from any file input on the form or none of the user selected files from a file input before submitting the form and uploading to server. It would be nice to be able to remove just any offending files before uploading. Otherwise must allow the files to be uploaded and have php deal with the uploaded files post submission. Thanks for any ideas.
It looks like my suspicions were confirmed and the only way to add files to a file input is to set it equal to a dataTransfer object, ie:
fileInput.files=evt.dataTransfer.files;
evt.dataTransfer.files represents the files the user selected/dropped and cannot be changed via js code on the page.
I was not able to add files to a file input using formData.append() to append single files over multiple additive iterations to a file input.
This solution below is working. The process is to instantiate your own dataTransfer object on page load. Then get the user uploaded files from evt.dataTransfer.files on each drag or browse and iterate through them. When you find files that meet your criteria add them to your own custom dataTransfer object. Once your own dataTransfer object is all set with the files you want added after each user drop, update fileInput.files= your own dataTransfer object.
onload:
var dT=new dataTransfer(); var fileInput=document.forms[0].elements['files[]'];
//now on each drop you will get the user selected files as:
evt.dataTransfer.files so you always start with that.
function dropHandler(evt) {
//prevent default action
evt.preventDefault();
evt.stopPropagation();
//for each file in the user selection, validate them as you wish
//and only add the ones you want to the dataTransfer object you already created.
for (const file of evt.dataTransfer.files) {
//if this validate that etc
//if file is good to add
dT.items.add(file);
}
//at the end of each drop
//once you have added only the files you want to your own dT object
//update your form's file input's files to the latest version of your dT object's files
fileInput.files=dT.files;
}//end drop handler function`
Now you have your form's file input populated with only the user selected files you want, have weeded out the rest and are ready for form submission.

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.

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.

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