1

in a aps.net mvc4 app based on user credentials

such as for general users - they can upload 4 images of type .png, .jpg only with max 10k file size each admin users - they can upload 10 images of any file type with max 100K file size each

currently, we have it checking for these conditions on the server after the image is uploaded to the server

Looking for a way to do the checks on the client itself prior

thanks

Kumar
  • 10,997
  • 13
  • 84
  • 134
  • Are you using the Image plug-in on the toolbar? If so, are you using the "Browse Server" button on the "Image Info" tab on the dialog, or the "Upload" tab and the "Choose File" button? This distinction is important. – bcr May 20 '13 at 19:03
  • @bcr, yes using the image plug-in using upload tab and choose file button – Kumar May 20 '13 at 19:55

1 Answers1

1

It seems to me that the most direct way is to hack the JavaScript code for the Image plug-in. One aspect of the plug-in dialogs that I found not to be properly documented was the fact that the onOK() function can return false to prevent dismissal of the dialog itself. You can trigger validation in there to return false from onOk() when that validation fails.

In the human-readable version of the Image plug-in code you'll find onOk() starting on line 361 of this particular version.

I would put a max file size setting in the ckeditor/config.js file, and check against that for your validation.

As far as getting the actual size of the file, I'm guessing that once the user selects a file in the file chooser, you can access information about that file. I don't know if there's something in the CKEditor API for that, or if you'd have to leverage some other JS library, but you'd need to get the file size of the client's selected file somehow. In onOk() you could trigger your custom code to determine this, and handle validation against the maximum size specified in config.js. There are probably easy-to-find examples of how the configuration is used in general. I think getting the local file size might be the trickiest part.

I'd suggest poking around in the image plug-in JS as linked above, starting at onOk() and working out from there to see if you can find anything useful/helpful there already.

The CKEditor version 4 documentation page seems to be somewhat nicer than the one for version 3, but I don't know which version you're using. I'd suggest investigating the API documentation for your version (note that I found the version 3 docs to be incorrect when it came to preventing the dialog dismissal; I had to figure that out by looking at the CKEditor code itself, via the documentation site, as I locally only have the minified source files).

This answer may also be helpful; it's focusing on a custom file dialog rather than the standard one.

Community
  • 1
  • 1
bcr
  • 1,983
  • 27
  • 30