469,913 Members | 2,017 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,913 developers. It's quick & easy.

File-type (Image) validation before upload

hsriat
1,654 Expert 1GB
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
9 4465
acoder
16,027 Expert Mod 8TB
Pass 'f' to c.onStart().
Mar 6 '08 #2
hsriat
1,654 Expert 1GB
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
16,027 Expert Mod 8TB
Do you mean startCallback?
Mar 6 '08 #4
hsriat
1,654 Expert 1GB
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
16,027 Expert Mod 8TB
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
1,654 Expert 1GB
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
16,027 Expert Mod 8TB
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
1,654 Expert 1GB
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
16,027 Expert Mod 8TB
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.

Similar topics

reply views Thread by chris | last post: by
5 posts views Thread by simon place | last post: by
3 posts views Thread by Pernell Williams | last post: by
reply views Thread by Giulio | last post: by
8 posts views Thread by Brandon McCombs | last post: by
7 posts views Thread by Joseph | last post: by
1 post views Thread by Mika M | last post: by
reply views Thread by thjwong | last post: by
17 posts views Thread by Peter Duniho | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.