I am using jquery file upload. I use it for several pages in a project. For one project I need to upload all the files in one request because I loop trough all the images and after that, a dossier is created and closed. I think it's faster to send all the images at once instead of changing the server side handler. Only thing is, I can't get them together. I founded the option singleFileUploads, this works, but only if you select all the files at once. If drag and drop 2 times, it still uploads in 2 posts (and it makes 2 dossiers.
I have read the documentation (https://github.com/blueimp/jQuery-File-Upload), but can't find out how to get it work. (i know that this is a plugin specially made for multiple posts)
So basically my question is, does anyone know how to get the inserted files before uploading so i can group them and serialize them.
Thnx,
This post might help you:
Multiple File Upload Input
Unfortunately, it does not support IE. But there is still a Flash-based plugin (free) can do that, of course it also supports multi browsers.
Check it out: Demos - Uploadify
You can upload your files during form submit.
var submitFormData = true;
$('#fileFieldId').fileupload({
dataType : 'json',
autoUpload : false,
add : function(e, imageData){
$("#yourFormId").on("subimt",function(){
if(sendData){
imageData.formData = $("#yourFormId").serializeArray();
submitFormData = false;
}
imageData.submit();
});
},
done: function(e,data){
submitFormData = true;
}
});
Related
I'm using UploadProcessor to block specific file uploading into MediaLibrary.
Everything is working good and I can see the alert Sitecore's message. But, Sitecore's error message is not really user-friendly "One or more files could not be uploaded. See the Log file for more details"
So, I'd like to add extra alert box for users. Below is my code, but the javascript is not working.
Some people want me to use "SheerResponse", but Sitecore Document mentions that
The uiUpload pipeline is run not as part of the Sheer event, but as part of the form loading process in response to a post back. This is because the uploaded files are only available during the “real” post back, and not during a Sheer UI event. In this sense, the uiUpload pipeline has not been designed to provide UI. In order to provide feedback to a User, the processor should resort to some trick which emits the JScript code.
http://sdn.sitecore.net/Articles/Media/Prevent%20Files%20from%20Uploading/Pipeline%20upload.aspx
Do you have any idea how to implement alert box??
The Upload control in the Media Library uses flash to upload the files. As part of this upload process, the file sizes are checked using JavaScript and a client side validation is made before the upload.
There are a number of changes you need to make. I'm just going to list them here, you can find all the code in my Github Gists:
https://gist.github.com/jammykam/54d6af46593fa3b827b4
1) Extend and update the MediaFolder.js file to check the file size against the Image Size ONLY if the extension is one specified in config
if (file.size > this.uploadLimit() || this.uploadImageLimitReached(file)) {
...
}
2) Update MediaFolder.xml page to include the above JS. Amend the codebeside, inheriting from Sitecore.Shell.Applications.Media.MediaFolder.MediaFolderForm and overriding OnLoad and OnFilesCancelled, to render restricted extensions and max image size settings so these are passed to the Javascript and display friendly alert.
settings.Add("uploadImageLimit", ((long)System.Math.Min(ImageSettings.MaxImageSizeInDatabase, Settings.Runtime.EffectiveMaxRequestLengthBytes)).ToString());
settings.Add("uploadImageRestrictedExtensions", ImageSettings.RestrictedImageExtensions);
3) Update Attach.xaml.xml codebeside to check image size, inheriting from Sitecore.Shell.Applications.FlashUpload.Attach.AttachPage and overriding OnQueued method:
if (ImageSettings.IsRestrictedExtension(filename) && num > maximumImageUploadSize)
{
string text = Translate.Text("The image \"{0}\" is too big to be uploaded.\n\nThe maximum image size that can be uploaded is {1}.", new object[] { filename, MainUtil.FormatSize(maximumImageUploadSize) });
this.WarningMessage = text;
SheerResponse.Alert(text, new string[0]);
}
else
{
base.OnQueued(filename, lengthString);
}
4) Add a config include with the new settings.
<setting name="Media.MaxImageSizeInDatabase" value="1MB" />
<setting name="Media.RestrictedImageExtensions" value=".jpg|.jpeg|.png|.gif|.bmp|.tiff" />
You can still (and should) keep the pipelines in place, but note from my previous answer I gave the "Restricted Extension" config setting has now changed (into a single setting instead of passing it into the pipeline). The Gist contains the
NOTE that I have tested this using Sitecore 7.2 rev 140526, so the base code is taken from there. If you are using a different version then you should check the base C#, JS and XML code matches what I have provided. The code is commented to show you what has changed.
The above works in the Content Editor, it does not work in the Page Editor! Which in Sitecore 7.2+ uses SPEAK dialogs and it looks like they use a different set of pipelines. That would need more investigation (raise another question, and specify which version of Sitecore you are using).
I got my own PHP image file upload process handler. I was just looking for a jQuery solution to optimize upload bar and multiple file selections. So I spent some hours to get into jQuery File Upload - no ui, basic setup. I did all the js changes I need and tried to implement it to my existing file upload form.
But now I realize, the /server/php/UploadHandler.php is nessassary to the jQuery scripts. Without this php file, I don't get to the "done" event.
I don't want to make use of the file processing UploadHandler class, because I got a lot of own steps, like watermarking, that needs to be processed on uploaded image files. I like to do something like this:
done: function (e, data) {
// alert('done!');
document.upload.submit(); // existing upload form including jQueryFileUpload
},
How do I get rid of the file processing in this PHP Class? I just want "jQuery File Upload" to offer a nice multipart file selection, a jQuery image preview and it's great processing bar.
Is there a way to stop PHP touching files?
I had a similar issue. We wanted a file upload inside an HTML form along with some other data, not a simple upload. For this the provided PHP class isn't sufficient.
You can write your own PHP upload handler easily, use the provided one as reference. Or use some other backend technology. Important was to use the url to the backend upload handler as the form action.
In the JS you have to overwrite the "add" Option of the fileupload widget, if you don't want to submit immediately. "done" is only useful for evaluating the result.
We saved the data inside the add handler in a closure variable and used it to submit, when the user wants to submit. By this the other form data is sent with the upload request automatically. Like this:
(function()
{
var uploadData;
$("#uploadInput").fileupload(
{
add : function(e, data)
{
uploadData = data;
},
... other options ...
});
$("#submit").submit(function()
{
if (uploadData != null)
uploadData.submit();
}
})();
Not sure if that works for multiple uploads, but I hope this helps.
I have a little bit of an unusual situation I guess. I have a page for placing new orders and part of a new order is a variable (0-n) number of files that are to be uploaded and associated with the order on the back end. The user also needs to specify a description for each file.
I've used a couple jQuery upload plug-ins with great success, but in this case I'm not looking to upload a single file when the user hits "OK." What I really need to do is upload a file by passing a local path to some method that will do the upload.
Does anyone know of any plug-ins that do this?
Thanks!
Ajax Uploader could be helpful? I believe it allows multiple uploads.
I'm looking for a javascript/ajax based file upload. The way it would work is this:
1) User clicks browse
2) User selects CTRL and selects the files he wants to upload
3) Via Javascript the user is shown a few loading graphics (1 per each file being uploaded)
4) After each upload finishes, a loading graphic is replaced with a success graphic and the filename of the uploaded file.
So what I'm really asking for is:
1) A way to do javascript/ajax based file uploads.
2) A way to detect when a file starts/finishes uploading, or to call a function when it happens.
Check http://valums.com/ajax-upload/ it's a neat plugin.
I recently faced a similar problem. We had been using Uploadify (http://www.uploadify.com/) to do uploads. I wrote a blog post on how to use Uploadify to perform multiple file uploads:
http://blog.bobcravens.com/2011/03/upload-multiple-files-with-progress-using-uploadify/
There are a couple of supported options:
Use a single 'input' element and select multiple files.
Use multiple 'input' elements to select a single file each.
Hope this helps.
Bob
Is there a way to queue file uploads without resorting to Flash or Silverlight, just with cleverly used forms and JavaScript? Note that the upload should be executed asynchronously.
By "queuing" uploads I mean that if the user tries to upload multiple files, they should not be transferred simultaneously, but rather one at a time, in a single HTTP connection.
I don't believe it's possible to do this on a single HTTP connection, due to limitations of the spec.
However, you may get almost the same behaviour by placing the <input> fields in separate forms (be it with HTML or JavaScript) and submitting them in order.
Place their targets on an <iframe> and use the iframe.onload event to trigger the next form in the list.
Additional notes:
See this for reference targeting iframes. Note that this feature is unsupported in HTML/XHTML Strict.
The form.target attribute must be equal to the iframe.name attribute. iframe.id will not work; It causes a pop-up window in IE6 and FF3.5.
A working example of 'all at once' uploading using targeting is available here. I've cleaned up this example a bit and used it. It works in IE6 as well as any first-class browser.
I have it on good authority that Uploadify is very good. Moreover, it supports queues natively. A simple example, which assumes you've already created a form "file" element with an id of "foo" and an element to use as the queue with an id of "queue". See the docs for more info.
$("foo").uploadify({
'uploader' : 'uploadify.swf',
'script' : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads',
'queue' : "queue"
});
One option I have seen used before, although I don't have a link or an example, is use an iframe. Basically, the files are submitted to the iframe and JavaScript watches to see when that iframe reloads and then submits the next one. It's not pretty and I think I tried, but couldn't get it to work across browsers (which I needed at the time, including IE6).
Broadly looking at it, what needs to be done:
A function to dynamically add forms(to html) with input type as file. One form will have only one file input field. These forms will be our file upload queue.
A submit function that will submit these forms one after another asynchronously.
That's simple logic I can think for now [have to code when I get home].
If you're looking for a .Net and more specifically Asp.Net MVC solution, take a look at this post, http://dimebrain.com/2010/01/large-or-asynchronous-file-uploads-in-asp-net-mvc.html. I had it bookmarked for reference.
this jquery plug claims it does without using swf
http://valums.com/ajax-upload/
There is a simple efficent way of uploading files asyncronysly with xmlhttprequest: refer to https://developer.mozilla.org/en/using_xmlhttprequest in the "In Firefox 3.5 and later" section. With this you can upload files asyncronysly getting also the progress percent of upload. With firefox 3.6 and later you can also upload asyncronyly multiple files. I am making a js function for doing in a more simple way, when finish i will post it.
In the recent past, I wrote a jQuery plug-in that would allow you to do something like this. I can't post the code, but I can describe how it worked. If it doesn't make sense, let me know, as it has been a while.
There were a set of upload form elements. When a file was selected, it would post to a hidden iFrame, the contents (via base64) of which were copied into a hidden form field. Then, when the final form is submitted, the contents of the hidden form fields are used to get the file information.
Erick