plupload
Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight.
Plupload: Multi-runtime File-Uploader
I'm using plupload to make an ajax file uploading.
Now the plupload.Uploader class has many options but none are additional data.
For Example :
var uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'pickfiles',
container : 'contact_container',
max_file_size : '10mb',
url : 'upload.php',
flash_swf_url : '/plupload/js/plupload.flash.swf',
silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
],
resize : {width : 320, height : 240, quality : 90}
});
What i'm trying to achive is i have a folder in my server where all the uploads
are being saved.
I neeed inside the folder to create a sub-folder to each user that have uploaded files there.
How can i add data like id of the user to the instance of plupload.Uploader?
Or if i'll wrap a form inside the container div, will i be able to see it in the $_REQUEST?
Or is there some other way i can achive this?
Source: (StackOverflow)
I am using plupload version 1.3.0
More specifically how I have to define my controller action to support chunking? Can I use the HttpPosteFileBase as a parameter?
At the moment I am using the following code to initialize the plugin
In the HEAD tag
<link type="text/css" rel="Stylesheet" media="screen" rel='nofollow' href="<%: Url.Content( "~/_assets/css/plupload/jquery.ui.plupload.css" )%>" />
<link type="text/css" rel="Stylesheet" media="screen" rel='nofollow' href="<%: Url.Content( "~/_assets/css/plupload/gsl.plupload.css" )%>" />
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/plupload/gears_init.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/plupload/plupload.full.min.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/plupload/jquery.ui.plupload.min.js" )%>"></script>
On document ready
$("#uploader").pluploadQueue({
runtimes: 'html5,html4,gears,flash,silverlight',
url: '<%: Url.Content( "~/Document/Upload" ) %>',
max_file_size: '5mb',
chunk_size: '1mb',
unique_names: true,
filters: [
{ title: "Documenti e Immagini", extensions: "doc,docx,xls,xlsx,pdf,jpg,png" }
],
multiple_queues: false
});
Source: (StackOverflow)
I had it working.. but I noticed once the files I was uploading get bigger (around 4000k) the controller would not be called..
So I added in chunking which fixed that problem.. but now when I open the file its full of garbage characters...
So what is the correct way to upload large files with plupload/MVC 4 ?
Here is my current code
$(document).ready(function () {
var uploader = new plupload.Uploader({
runtimes: 'html5',
browse_button: 'pickfiles',
container: 'container',
// max_file_size: '20000mb',
url: '@Url.Action("Upload", "Home")',
chunk_size: '4mb',
//filters: [
// { title: "Excel files", extensions: "xls,xlsx" },
// { title: "Text files", extensions: "txt" }
//],
multiple_queues: true,
multipart: true,
multipart_params: { taskId: '' }
});
and the controller
[HttpPost]
public ActionResult Upload(int? chunk, string name, string taskId)
{
string filePath = "";
var fileUpload = Request.Files[0];
var uploadPath = Server.MapPath("~/App_Data/Uploads");
chunk = chunk ?? 0;
string uploadedFilePath = Path.Combine(uploadPath, name);
var fileName = Path.GetFileName(uploadedFilePath);
try
{
using (var fs = new FileStream(filePath, chunk == 0 ? FileMode.Create : FileMode.Append))
{
var buffer = new byte[fileUpload.InputStream.Length];
fileUpload.InputStream.Read(buffer, 0, buffer.Length);
fs.Write(buffer, 0, buffer.Length);
}
//Log to DB for future processing
InstanceExpert.AddProcessStart(filePath, Int32.Parse(taskId));
}
Source: (StackOverflow)
Amazon has multipart upload functionality where you can send a file in chunks and get it assembled on S3. This allows for some nice resume like functionality for uploading to S3. From another question i got this nice link: Rails 3 & Plupload
My question is does anyone have any examples where they used the plupload chunking feature with the Amazon multipart feature? Ideally with carrierwave & fog.
I can see it doing the following:
- Generate Unique ID for the upload with plupload,
can we do an event when the plupload
starts?
- Attaching an ajax request to
the chunk completed with the ID
- Having ajax controller method on the
server which uploads to s3 using the
ID
- when all are complete fire a
controller action to reassemble
There is supposedly some PHP code which does some combining, but not with S3 and i can't stand to read PHP.
Source: (StackOverflow)
When files are added i want to start the upload process automatically. I called the start function at the end of FilesAdded but it doesn't start the upload.
uploader.bind('FilesAdded', function(up, files) {
var str = "";
for (var i in files) {
str += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
}
$('#filelist').html(str);
up.refresh();
up.start();
});
Here is my creation code
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight',
autostart : true,
url: '<%= images_path %>',
max_file_size: '10mb',
multipart: true,
browse_button: "pickfiles",
container: "the-uploader",
drop_element : "drop-area",
multipart_params: {
'_http_accept': 'application/javascript',
'<%=request_forgery_protection_token%>': '<%=form_authenticity_token%>',
'<%=request.session_options[:key]%>': '<%=request.session_options[:id]%>'
},
filters: [
{title: "Images", extensions: "avi,jpg,jpeg,png,zip"}
],
});
Source: (StackOverflow)
I'm using plupload to client scaling of pictures before they are uploaded. I like the feature that it gracefully falls back to html4 if the user doesn't have flash, silverlight etc engines installed.
I want to be able to start the upload when the user clicks certain elements on the page and i want to handle the events (sometimes stopping a file dialog from opening). In fact i'd like to pop open the file dialog using javascript.
Ok, so HTML4 (or rather the browser, except chrome :P) won't let me do this, unless the user clicks a browse-button (or an overlay covering a browse-button), so when i get the fallback to HTML4 i'll accept that i can't do it, but most users will have flash or silverlight installed and they do not have this restriction. So my question is this:
How do i trigger the file open dialog in plupload (keeping in mind i only need the flash and silverlight engines to do this).
Source: (StackOverflow)
So, I've implemented plupload using flash runtime in MVC3.
It works perfectly, in the sense that it uploads using the correction Action and runs it all. However, I'd really like to be able to control the response, and handle it in plupload, but I can't seem to get any response through.
I've tried overriding fileUploaded, but I can't seem to get anything out of the arguments. I've tried return simple strings, json and what have you. I can't seem to get anything out on the client side. And of course being sent through flash, I can't even debug the requests with firebug :/
The same with the Error event, and throwing exceptions. It correctly interprets the exception as an error, but it's always that #IO ERROR with some code like 2038 or something coming out the other end. I can't show my exception string or anything at all. Can anyone help?
Bonus question: How would I send session/cookie data along with the plupload, so I can access the session in my action?
Source: (StackOverflow)
When I use plupload to chunk files (setting option chunk_size), I get a separate PHP request for each chunk. Looking at $_FILES variable, each chunk is of type "application/octet-stream".
Is there any simple, standard and comfortable way how to combine these pieces in PHP at server-side?
With sanity guaranteed (e.g. when one of the pieces is missing etc.).
Source: (StackOverflow)
Yes, I've seen this question already, but I'm finding information that contradicts its accepted answer and Nick Johnson's blog on the GAE docs.
The docs talk about uploading more than one file at the same time - the function to get uploaded files returns a list:
The get_uploads() method returns a
list of BlobInfo objects, one for each
uploaded file in the request.
But everywhere I've looked, the going assumption is that only one file a time can be uploaded, and a new upload url needs to be created each time.
Is it even possible to upload more than one file at the same time using HTML5/Flash using Plupload?
Source: (StackOverflow)
I am trying to send custom POST variables with each uploaded file.
I have it set up so that each file has 2 fields where users can enter tags and a description for that file.
The code I am using is
uploader.bind('UploadFile', function (up, file) {
$.extend(up.settings.multipart_params, {
'tags': $('#tags_' + file.id).val(),
'description': $('#description_' + file.id).val()
});
});
The above code seems to work for every file except the first.
Is this the proper way to send custom post data for individual files?
Source: (StackOverflow)
I'm working on an app that will have file uploads. I want to create a reusable file upload component that be can be included on any of the pages that need file upload functionality. I was originally thinking that I could just use a JSP tag. However, we recently discovered AngularJS and now want to use it throughout the app. So, I want to create a directive that will allow me to simply put a <myApp-upload> tag to stick in my upload functionality.
I first made my upload functionality it's own HTML page to make sure the AngularJS was playing nicely with the Plupload plugin. I put together something like this:
<html ng-app="myApp">
<head>
<script src="resources/scripts/angular-1.0.1.min.js"></script>
<script src="resources/scripts/myApp.js"></script>
</head>
<body>
<style type="text/css">@import url(resources/scripts/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<script type="text/javascript" src="resources/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/scripts/plupload/plupload.full.js"></script>
<script type="text/javascript" src="resources/scripts/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<div id="uploadContainer" ng-controller="FileUploadCtrl">
<div id="dropArea" style="border: 1px black dashed;">Drag files to here<br><br><br></div>
Files to upload:<br>
<div ng-repeat="currFile in uploader.files">{{currFile.name}} ({{currFile.size}})</div>
<br><br>
<!-- For debugging -->
{{uploader.files}}
</div>
</body>
</html>
The myApp.js looks like this:
function FileUploadCtrl($scope)
{
$scope.uploader = new plupload.Uploader({
runtimes : 'html5,flash,html4',
url : 'media/upload',
max_file_size : '10mb',
container: 'uploadContainer',
drop_element: 'dropArea'
});
$scope.uploader.init();
$scope.uploader.bind('FilesAdded', function(up, files) {
$scope.$apply();
});
}
When I drag files in, I see the file names appear and the output of {{uploader.files}} change from [] to the files in the uploader object. So, now I want to make it into a directive. I take all the content that's in the body tag and save it to a file called upload.html. I then added the following to myApp.js:
angular.module('myApp', [])
.directive('myAppUpload', function () {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
Then, I have an HTML file like this:
<html ng-app="myApp">
<head>
<script src="resources/scripts/angular-1.0.1.min.js"></script>
<script src="resources/scripts/myApp.js"></script>
</head>
<body>
<myApp-upload>
This will be replaced
</myApp-upload>
</body>
</html>
When I load this HTML page, the <myApp-upload> tag does bring in the upload.html file. However, it doesn't do any of the data binding. At the bottom I see {{uploader.files}} instead of [] that I was seeing initially when it was it's own page.
I'm very new to AngularJS, so I'm sure I'm just missing something, or doing something wrong. How do I get this directive working?
Source: (StackOverflow)
It is mentioned in this very related question (Upload directly to Amazon S3 using Plupload HTML5 runtime) that amazon now allows CORS uploads using HTML5, but has anyone successfully configured plupload to push files to s3 using the 'html5' runtime? Responses to the related question do not offer any implementation details.
Here is my current plupload configuration:
$("#uploader").plupload({
// General settings
runtimes: 'html5,flash',
url: 'http://s3.amazonaws.com/' + $('#Bucket').val(),
max_file_size: '20mb',
multipart: true,
multipart_params: {
'key': '${filename}', // use filename as a key
'Filename': '${filename}', // adding this to keep consistency across the runtimes
'acl': $('#Acl').val(),
'Content-Type': 'binary/octet-stream',
'success_action_status': '201',
'AWSAccessKeyId': $('#AWSAccessKeyId').val(),
'policy': $('#Policy').val(),
'signature': $('#Signature').val()
},
file_data_name: 'file',
multiple_queues: true,
filters: [
{ title: "Image files", extensions: "jpg,png,gif,jpeg" }
],
flash_swf_url: '/Scripts/plupload/plupload.flash.swf',
});
The above code is working for the 'flash' runtime, so the policy is generated and signed correctly.
Am I missing any arguments in the multipart_params configuration object?
Also, I am using the following CORS configuration on my s3 bucket:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Do I need to make any other configuration changes to the s3 bucket to allow CORS uploads from the 'html5' plupload runtime?
Thanks in advance for any help that can be provided.
Source: (StackOverflow)
I allow multiple images to be uploaded to my site. They click "Choose Image" and then are presented with a dialog they can use to select an image from their disk. The image gets uploaded and then they can choose another. However, the next time that they click "Choose Image", they have to re-navigate to their images folder. This makes it not much fun to upload many images.
I am currently using Uploadify, but the user says that the same problem occurs when uploading sample images using the Plupload demo page.
The user is using Windows 7 and IE9. I am also using Windows 7 and IE9 and am not experiencing the issue. I have full admin rights with UAC turned off, so maybe that has something to do with it?
Any ideas? Thanks!
Source: (StackOverflow)
Introduction
I'm trying to achieve something relatively simple, in a potentially complicated environment. I would like to upload files, from a JavaScript widget (Netvibes UWA format) to a local intranet server, using the plupload jQuery UI plugin.
Problem
I've set my code up seemingly correctly - the plupload container appears and I can happily select and upload files. The uploading seems to work - each file hits 100% - but when I check my Firebug console, I get the following error:
OPTIONS upload.php - 403 Forbidden
And the files does not upload to my specified files directory.
Environment
- Origin server is
frogserver.curriculum.local on internal IP 192.168.3.15
- Recipient server is
staff.curriculum.local on internal IP 192.168.3.60
- Origin server is linux, but I have no direct access to HTML/JS/PHP/SQL, everything has to be done via the aforementioned Netvibes Universal Widget API. It's an enclosed Virtual Learning Environment solution provided by www.frogtrade.com
- Recipient server is Windows/IIS
Code
JavaScript
widget.onLoad = function(){
$( "#datetime" ).datepicker({ dateFormat: "yy-mm-dd" });
Input.init();
/* plupload */
$("#uploader").plupload({
// General settings
runtimes : 'html5,flash,html4',
url : 'http://staff.curriculum.local/frog/LOTS/upload.php',
max_file_size : '1000mb',
max_file_count: 20, // user can add no more then 20 files at a time
chunk_size : '1mb',
rename: true,
multiple_queues : true,
// Resize images on clientside if we can
resize : {width : 320, height : 240, quality : 90},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip,avi"}
],
// Flash settings
flash_swf_url : '/user/74/186718.swf'
});
// Client side form validation
$('form').submit(function(e) {
var uploader = $('#uploader').plupload('getUploader');
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function() {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
} else
alert('You must at least upload one file.');
return false;
});
}
HTML
<form method="post" action="../dump.php">
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
</form>
PHP
The PHP script I'm using is the bundled upload.php file handling script, with the addition of this code at the top:
// * - stands for all domains
header("Access-Control-Allow-Origin: *");
I've also changed the upload directory target:
// Settings
//$targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
$targetDir = 'files';
Thoughts
- I'm not sure if this is classed as being a "cross-domain" file transfer or not? I've tried to set it up as if it is, hence the
Access-Control-Allow-Origin header in my PHP script
- The Netvibes UWA and VLE setup may be getting in the way, somehow
- The IIS permissions on the LOTS folder for the Internet Guest account appears to be correct (i.e. "Read" permissions) but I'm not entirely sure; it has "Deny" on "Special Permissions" and I can't seem to see what those permissions are, or change that
Edit: IIS Permissions
Just checked, and everything seems correct:
Source: (StackOverflow)
up.removeFile(file) works only if the upload is not in progress.
Is this a bug, or exists some other function I missed to call?
Source: (StackOverflow)