Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

DataObjectManager Module /

Discuss the DataObjectManager module, and the related ImageGallery module.

Moderators: martimiz, UncleCheese, Sean, biapar, Willr, Ingo, swaiba, simon_w

Modifying uploadify module: Restrict upload file size by file type.


Reply


8 Posts   6056 Views

Avatar
James Bolitho

Community Member, 33 Posts

12 March 2011 at 8:09am

Edited: 12/03/2011 8:19am

Hi all,

I have been working on a non-profit site for my local Football team. This is the first site I have done in Silverstripe and I think the framework is great and the possibilities are awesome. I have installed the DataObjectManager and Uploadify which is working well on Silverstripe 2.4.5. I would like to implement one last bit of functionality to prevent non web techie website admins from breaking the site and would be grateful if someone could help. The problem is with the GD limits on the host and when you upload an image larger than 2MB it causes issues.

What I would like to achieve is detailed in this post below but using the uploadify module instead of the SWFUpload module.

[url]http://www.silverstripe.org/dataobjectmanager-module-forum/show/7628?start=8[/url]

From looking on the uploadify forum I have seen the following post but unfortunately I have got stuck as I am having trouble understanding how to implement this.

[url]http://www.uploadify.com/forums/discussion/4857/implementing-dynamic-sizelimit-depending-on-file-extension/p1[/url]

Am I correct that I should be editing the following file in the uploadify module "javascript/uploadify_init.js" ?

Can anyone help?

Thanks,

Jim

Avatar
UncleCheese

Forum Moderator, 4096 Posts

12 March 2011 at 8:54am

Shouldn't need to modify anything. Just use

$two_megs = 1024*1024*2;
$yourUploader->setVar('sizeLimit', $two_megs);

Avatar
James Bolitho

Community Member, 33 Posts

13 March 2011 at 12:08am

Hi Uncle Cheese,

Thanks for the really quick reply... :-).

I tried something similar to your suggestion on a test front end form and got it work but in the admin area this just gets ignored and I am able to upload image files in excess of 2 Meg so I am probably doing something wrong. I can post the code I am using but I think this rule is too general for the needs of this website as it prevents all types of files larger than 2 meg being uploaded. So what I was hoping is that it would be possible to set it up something like the following:

e.g. $allowedMaxFileSize = array('*' => 3000000, 'jpg' => 100000, 'jpeg' => 100000, 'gif' => 100000, 'png' => 100000, 'pdf' => 500000); etc.

As per the post about the old SWFUpload module [url]http://www.silverstripe.org/dataobjectmanager-module-forum/show/7628?start=8[/url] the example shows editing the my_handlers.js file and adding the file size conditions in there. Is it possible to do this with uploadify module? It would be great if this is possible or another solution could be suggested...?

Thanks,

Jim

Avatar
James Bolitho

Community Member, 33 Posts

22 March 2011 at 10:12am

Hi again,

I have been looking into this a bit more and have managed to make some progress. The code below inserted into the uploadify_init.js file works in so far as producing the alerts however the file is still uploaded so this is missing something.

onSelect: function(event, queueID, fileObj) {
               $e = $(event.currentTarget);   
               var ext = fileObj.name;
               ext = ext.substr(ext.length-4).toLowerCase(); //gets last 4 chars (extention type)
               switch (ext) {
                  case '.png':
                  case '.jpg':
                  case 'jpeg':
                  case '.gif':
                  if (fileObj.size >= 1024000 ) {
                     alert("Filesize is too big!" + '\n' + "Your file must be no larger than 1MB.");
                     $jQuery('.uploadify').uploadifyCancel(queueID);
                  }
                  break;
               default:
                  alert("The file you tried to upload is not allowed." + '\n' + "Try one of the following files:" + '\n' + "jpg, jpeg, gif, png");
                  $jQuery('.uploadify').uploadifyCancel(queueID);
               break;
               }
            }

If anyone has any ideas to get the file to stop being uploaded that would be appreciated. Will post back if I find a solution in the meantime.

Thanks,

Jim

Avatar
UncleCheese

Forum Moderator, 4096 Posts

22 March 2011 at 10:20am

I'm not sure this is right: $jQuery('.uploadify').uploadifyCancel(queueID);

Where is $jQuery defined?

Avatar
James Bolitho

Community Member, 33 Posts

23 March 2011 at 1:05am

Yes that was not right. It was a copy and paste job from the uploadify forum and it was a combination of tiredness and not paying attention. Apologies for that. The code below slightly modified works as far as I have tested and provides the solution I was looking for so I hope it helps others.

onSelect: function(event, queueID, fileObj) {
               $e = $(event.currentTarget);
               var ext = fileObj.name;
               ext = ext.substr(ext.length-4).toLowerCase(); //gets last 4 chars (extention type)
               switch (ext) {
                  case '.png':
                  case '.jpg':
                  case 'jpeg':
                  case '.gif':
                  if (fileObj.size >= 1024000 ) {
                     alert("Filename: " + fileObj.name + " is too big!" + '\n' + "Your file must be no larger than 1MB.");
                     $('.uploadify').uploadifyCancel(queueID).find('.preview').show().html('<div class="no_files"></div>');
                  }
                  break;
                  case '.pdf':
                  case '.doc':
                  case 'docx':
                  if (fileObj.size >= 5120000 ) {
                     alert("Filename: " + fileObj.name + " is too big!" + '\n' + "Your file must be no larger than 5MB.");
                     $('.uploadify').uploadifyCancel(queueID).find('.preview').show().html('<div class="no_files"></div>');
                  }
                  break;
               default:
                  alert("File extension: " + ext + " is not allowed." + '\n' + "Try one of the following file extensions:" + '\n' + "jpg, jpeg, gif, png, pdf, doc, docx");
                  $('.uploadify').uploadifyCancel(queueID).find('.preview').show().html('<div class="no_files"></div>');
               }
            }

Thanks,

Jim

Avatar
UncleCheese

Forum Moderator, 4096 Posts

23 March 2011 at 2:40am

Cool. Do you think maybe rather than hardcoding all those values you could put them into the PHP wrapper so you could set them on an instance level? Right now, you're kind of stuck with whatever is in the JS.

Avatar
James Bolitho

Community Member, 33 Posts

24 March 2011 at 12:57am

I know what you are saying. In my case this is fine for what I need currently but can understand that it is quite rigid and wouldn't suit all applications. I don't really have the time to look into this just now but I think it is definitely worth looking into at some point as this will make the uploadify module just that little better than it already is :-).

Thanks,

Jim