when i upload file in mvc3 project i need validation for sicze limit and user only upload image, doc and xls file. should be there like required field, wrong selection of file, size limitation in asp.net mvc3
Personally, I use the Telerik uploader control and I set this as the method that runs when the file is selected but it can be used with a standard file uploader as well
function onSelect(e) {
if (e.files[0].size > 256000) {
alert('The file size is too large for upload');
e.preventDefault();
return false;
}
// Array with information about the uploaded files
var files = e.files;
var ext = $('#logo').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif', 'jpeg', 'jpg', 'png', 'tif', 'pdf']) == -1) {
alert('This type of file is restricted from being uploaded due to security reasons');
e.preventDefault();
return false;
}
return true;
}
Basically, it says if the file is over 256k it's too big and will only allow gif, jpeg, jpg, png, tif and pdf files...
Related
I've managed to upload images through drag & drop to a SP 2013 library by intercepting the paste and fileUploadrequest events (+ added mandatory headers and used /_api/web/getfolderbyserverrelativeurl(\'/sites/theSite/theLibrary\')/files/add(overwrite=true,%20url=\'aDynamicFilename.jpg\') as the request's URL).
The problem with this approach is that even if the image is uploaded, the image is not inserted in the editor (no error). I'm not setting config.uploadUrl for this approach.
Q#1: Is there any step which I should go through after the image is uploaded? Like telling the CKEDITOR instance to insert the image?
Later on, I've noticed that if I'm setting the config.uploadUrl to the same URL as I'm using above, the editor inserts successfully the image. The problem is that, from my trials, the config.uploadUrl is initialized together with the CKEDITOR instance (therefore, can't be assigned dynamically for each image, in case that multiple images are dragged and dropped on the editor).
Q#2: Is there another way to configure the uploadUrl or maybe some other config property that would allow the custom upload to work and insert the image in the editor?
Eventually made it work by following a similar approach as the on in this repo:
RyanSiu1995/ckeditor-ImageUploader
Use a FileReader and start loading the image when it's pasted to the
CKEditor
On the fileReader's onload event, create a img element in the
editor's document object with some opacity and with the fileReader's
Base64 string as the src
On the fileLoader's uploaded event, remove
the img and re-add it with the actual file's url (changing the src
attribute on the img was not triggering the editor's change event, which I was hooking into,so I chose to replace the whole element)
Here's the relevant section from the ckeditor-ImageUploader plugin:
fileDialog.on('change', function (e) {
var fileTools = CKEDITOR.fileTools,
uploadUrl = fileTools.getUploadUrl( editor.config, 'image' ),
file = e.target.files[0],
loader = editor.uploadRepository.create(file),
reader = new FileReader(),
notification,
img;
// verify
if (!/image/i.test(file.type)) {
notification = editor.showNotification( 'Please check the correct format.', 'warning' );
setTimeout(function() {
notification.hide()
}, 2000);
return false
}
loader.upload(uploadUrl);
// preview image
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (e) {
img = editor.document.createElement('img');
img.setAttribute('src', e.target.result);
img.setStyle('opacity', 0.3);
editor.insertElement(img);
}
loader.on('uploaded', function(evt) {
editor.widgets.initOn(img, 'image', {
src: evt.sender.url
});
img.setAttribute('src', evt.sender.url);
img.setStyle('opacity', 1);
});
loader.on('error', function() {
img.$ && img.$.remove();
});
fileTools.bindNotifications(editor, loader);
// empty input
fileDialog[0].value = "";
I'm trying to set up Dropzone.js to handle multiple files at the same time, but also upload each one in 1mb chunks. I can't seem to find the right DZ configuration for this.
When I add "uploadMultiple: true" to my working chunking implementation of DZ, Chrome throws this error: "Uncaught Error: You cannot set both: uploadMultiple and chunking."
The Problem: "autoProcessQueue" was set to "false" because I only wanted to process when the user hits a "submit" button. Even with "uploadMultiple" not set to true, Dropzone will upload more than one file (presumably consecutively rather than simultaneously) as long as the queue is auto-processed.
The Solution:
Dropzone.js calls "chunksUploaded" once all the chunks for a file are uploaded. After the first file successfully uploads all of its chunks, reset the "autoProcessQueue" option to "true." After "queueComplete," set it back to "false" in preparation for the next upload.
See the answer here to understand the chunksUploaded callback, in the context of using it to concatenate chunks following upload: How to concatenate chunked file uploads from Dropzone.js with PHP?
See the end of this thread for turning on/off autoProcessQueue: https://github.com/enyo/dropzone/issues/462
Javascript sample snippet:
( I stripped out all Dropzone and Ajax options to highlight the relevant parts )
var myDropzone = new Dropzone(target, {
chunksUploaded: function(file, done) {
// ajax below posts to a script that merges the uploaded chunks of the current file
$.ajax({
success: function (data) {
myDropzone.options.autoProcessQueue = true;
done();
}
});
}
});
myDropzone.on("queuecomplete", function() {
myDropzone.options.autoProcessQueue = false;
});
I am using CKFinder 3 intergrated with CKEditor. Now, after resizing an Image and clicking on Choose Resized, I want to move/copy the resized image to another folder using javascript. I am able to get upto the following code.
CKFinder.start({
onInit: function (finder) {
finder.on('file:choose:resizedImage', function (event) {
var file = event.data.file;
var resizedData = file.get('imageResizeData');
var resized = file.get('imageResizeData').get('resized');
// Need help here to move the resized image to another folder.
});
}
});
NOTE: I am using ASP.NET Connector.
You can use command:send request to send CopyFiles request:
https://docs-old.ckeditor.com/ckfinder3/#!/api/CKFinder.Application-request-command_send
Parameters taken by CopyFiles can be found here:
https://docs-old.ckeditor.com/ckfinder3-net/commands.html#command_copyfiles
I am using FineUploader in my form using this : http://docs.fineuploader.com/branch/master/features/forms.html.
The problem is that, in my form file field is optional.
If I send the form I have this and the form doesn't proceed:
Error On submit
And my js code :
var uploader = new qq.FineUploader({
element: document.getElementById('my-uploader'),
maxConnections:1,
callbacks: {
onAllComplete: function(id, fileName, responseJSON) {
location.reload();
}
}
});
Fine Uploader is a file upload library. As such, you must provide it with files to upload. It is not a form submission library, and will not submit a form unless a file is involved. If you would like to submit a form without a file, you will need to omit attaching Fine Uploader to the form. Your best bet in this case is to allow the file to be sent independent of the form submit.
You can check if there are 0 files: in that case, don't trigger fineUploader "uploadStoredFiles" method. E.g.
var fineUploaderTrigger = jQuery('<div id="fine-uploader"></div>');
fineUploaderTrigger.fineUploader({
template: 'qq-template-manual-trigger',
autoUpload: false, /* important */
[...]
});
var submitButton = $('#submit');
// Trigger upload
submitButton.on('click', function (e) {
e.preventDefault();
// go on also if there are no files to upload
if ($('.qq-upload-list li').length > 0) {
$('#fine-uploader-manual-trigger').fineUploader('uploadStoredFiles');
} else {
submitButton.off('click');
submitButton.click();
}
});
$("#downloadPdf").click(function () {
$(".img-indicator").hide();
html2canvas($("#frame"), {
onrendered: function (canvas) {
var image = canvas.toDataURL(
'image/png');
image = image.replace('data:image/png;base64,', '');
$("#generatedImg").val(image);
window.open(image);
}
});
});
I want to save this image to folder that is located on a server,
and I want to save that image with specific file name too.
JavaScript/jQuery run on the client side and cannot access the server folders. You need to create a web page on your server that will receive the file from your JavaScript/jQuery and saves it in the folder. Then you can call this page from your JavaScript/jQuery using $.ajax.