By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,277 Members | 1,244 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,277 IT Pros & Developers. It's quick & easy.

File-type (Image) validation before upload

hsriat
Expert 100+
P: 1,654
How can I add my validation script to this file upload code?

Validation Script:
Expand|Select|Wrap|Line Numbers
  1. function validate(frm) {
  2.     if (!/(\.(gif|jpg|jpeg|png))$/i.test(frm.file.value)){
  3.         alert('Invalid file type.\nPlease attach a valid image file');
  4.         frm.file.focus();
  5.         return false;
  6.     }
  7. return true;
  8. }
Upload Script
Expand|Select|Wrap|Line Numbers
  1. function startCallback() {
  2.     //VALIDATION SCRIPT NEEDS TO BE ADDED HERE
  3. }
  4. function completeCallback(response) {
  5.     dcdRes(response);
  6. }
  7. AIM = {
  8.  
  9.     frame : function(c) {
  10.  
  11.         var n = 'f' + Math.floor(Math.random() * 99999);
  12.         var d = document.createElement('DIV');
  13.         d.innerHTML = '<iframe style="display:none;" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
  14.         document.body.appendChild(d);
  15.  
  16.         var i = document.getElementById(n);
  17.         if (c && typeof(c.onComplete) == 'function') {
  18.             i.onComplete = c.onComplete;
  19.         }
  20.  
  21.         return n;
  22.     },
  23.  
  24.     form : function(f, name) {
  25.         f.setAttribute('target', name);
  26.     },
  27.  
  28.     submit : function(f, c) {
  29.         AIM.form(f, AIM.frame(c));
  30.         if (c && typeof(c.onStart) == 'function') {
  31.             return c.onStart();
  32.         } else {
  33.             return true;
  34.         }
  35.     },
  36.  
  37.     loaded : function(id) {
  38.         var i = document.getElementById(id);
  39.         if (i.contentDocument) {
  40.             var d = i.contentDocument;
  41.         } else if (i.contentWindow) {
  42.             var d = i.contentWindow.document;
  43.         } else {
  44.             var d = window.frames[id].document;
  45.         }
  46.         if (d.location.href == "about:blank") {
  47.             return;
  48.         }
  49.  
  50.         if (typeof(i.onComplete) == 'function') {
  51.             i.onComplete(d.body.innerHTML);
  52.         }
  53.     }
  54. }//got the code from www.webtoolkit.info
HTML File[html]<form action="upload.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback})" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" name="submit" value="Upload" />
</form>[/html]

Its working too good, but I need the validation first.
Mar 5 '08 #1
Share this Question
Share on Google+
9 Replies


acoder
Expert Mod 15k+
P: 16,027
Pass 'f' to c.onStart().
Mar 6 '08 #2

hsriat
Expert 100+
P: 1,654
Pass 'f' to c.onStart().
I had done that and it's working fine.

But now the problem is, how can is pass the same argument, f to completeCallback function?
Mar 6 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Do you mean startCallback?
Mar 6 '08 #4

hsriat
Expert 100+
P: 1,654
Do you mean startCallback?
No, that's done.

I'm talking about line 4 in the upload script.

Means after uploading is done, I want to know which form has uploaded this image, so I can add image element in the corresponding row. There are multiple uploads.
Mar 6 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Add a second parameter to the callback function and pass that in frame and loaded too so that it can be passed to completeCallback().
Mar 7 '08 #6

hsriat
Expert 100+
P: 1,654
Add a second parameter to the callback function and pass that in frame and loaded too so that it can be passed to completeCallback().
I passed the parameter in form as this completeCallback('img_sfsdag')
* img_sfsdag is the id of the row.
Expand|Select|Wrap|Line Numbers
  1. function completeCallback(id, response) {
  2.     alert(id); //shows correct value, ie. img_sfsdag
  3.     alert(response); //shows undefined
  4. }
But after that, instead of staying on same page, the browser is moving to upload.php, the form action.

So, now completeCallback() not reading the response properly.

Even earlier there wasn't any response argument passed, and it worked fine.
Mar 7 '08 #7

acoder
Expert Mod 15k+
P: 16,027
I meant soething like this:
Expand|Select|Wrap|Line Numbers
  1. function completeCallback(f, response) {
  2.     // make use of form here.
  3.     dcdRes(response);
  4. }
  5. AIM = {
  6.  
  7.     frame : function(f, c) {
  8.  
  9.         var n = 'f' + Math.floor(Math.random() * 99999);
  10.         var d = document.createElement('DIV');
  11.         d.innerHTML = '<iframe style="display:none;" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+f+','+n+'\')"></iframe>';
  12.         document.body.appendChild(d);
  13.  
  14.         var i = document.getElementById(n);
  15.         if (c && typeof(c.onComplete) == 'function') {
  16.             i.onComplete = c.onComplete;
  17.         }
  18.  
  19.         return n;
  20.     },
  21.  
  22.     form : function(f, name) {
  23.         f.setAttribute('target', name);
  24.     },
  25.  
  26.     submit : function(f, c) {
  27.         AIM.form(f, AIM.frame(f, c));
  28.         if (c && typeof(c.onStart) == 'function') {
  29.             return c.onStart();
  30.         } else {
  31.             return true;
  32.         }
  33.     },
  34.  
  35.     loaded : function(f, id) {
  36.         var i = document.getElementById(id);
  37.         if (i.contentDocument) {
  38.             var d = i.contentDocument;
  39.         } else if (i.contentWindow) {
  40.             var d = i.contentWindow.document;
  41.         } else {
  42.             var d = window.frames[id].document;
  43.         }
  44.         if (d.location.href == "about:blank") {
  45.             return;
  46.         }
  47.  
  48.         if (typeof(i.onComplete) == 'function') {
  49.             i.onComplete(f, d.body.innerHTML);
  50.         }
  51.     }
  52. }
The response is d.body.innerHTML.
Mar 7 '08 #8

hsriat
Expert 100+
P: 1,654
Thank you too much!!

Now I understand how was the response reaching the completeCallback() function. That was my main confusion! I was stuck here for 2 days.

Now its working fine!

Thanks,

Harpreet
Mar 7 '08 #9

acoder
Expert Mod 15k+
P: 16,027
You're welcome! Glad you have it working.
Mar 7 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.