fineuploader / server-examples Goto Github PK
View Code? Open in Web Editor NEWServer-side examples for the Fine Uploader library
Home Page: https://fineuploader.com
License: MIT License
Server-side examples for the Fine Uploader library
Home Page: https://fineuploader.com
License: MIT License
Hi Ray
drag n drop is not working in IE 10 and edge browser
Please let me the possible solution.
Regards
Manidipa
I have my root credentials and IAM user credentials but I am confused which to use where with respect to the following->
AWS_CLIENT_PUBLIC_KEY=?
AWS_CLIENT_SECRET_KEY=?
AWS_SERVER_PUBLIC_KEY=?
AWS_SERVER_SECRET_KEY=?
Plz help me to sort out!
Hi, I am using FineUploaderBasic for sending a video file it's returning like
[Fine Uploader 5.16.0] Received response status 502 with body:
<title>502 Bad Gateway</title>This is to ensure that it is clear that this is to be the expected bucket name, and not the bucket URI.
I suspect the one-size-fits-all PHP example for Fine Uploader S3 may confuse some integrators who don't intend to work in a cross-origin environment, and/or don't really know what CORS is. So, let's create a strictly CORS example, and a strictly non-CORS PHP example. The CORS example is needed for the fineuploader.com S3 demo, since those requests are cross-origin.
Let's call the non-CORS example "s3demo.php" and the CORS example "s3demo-cors.php".
Found via: http://stackoverflow.com/a/17981531/2405667
When I upload a file I assign it an id, I need to then return that id back to the frontend so when the form is submitted I know what file id's are associated with it.
How can I return the id with my response and get access to it?
It's functional and supports all FU features, but it's not well documented maybe a bit messy.
Hi Guys,
I running into an issue when I try to upload a file with 0 bytes in size using I.E 10 compatibility mode. I'm able to upload the file via Chrome,FireFox,Safari. Is this a known issue?
Its also slow when uploading if the file size is 0 bytes.
From AWS s3, AWSAccesskey and AWSSecretkeys are provided. In the demo php server code there are 4 different keys. Which key assosciates to the given access key by aws? Also, what's the expectedhostname?
I am using a multipart form parser to get my policy because bodyparser isn't working anymore.
How to get the file path in HTML 5
The first error I've got was at line 54: request_payload = json.loads(request.body)
, saying that the parameter must be 'str', not 'bytes'. I've fixed it writing this instead: request_payload = json.loads(request.body.decode())
.
Then I've got one at line 113: policy = base64.b64encode(json.dumps(policy_document))
. It said that a bytes-like object was required, not 'str'. So I changed that line to policy = base64.b64encode(json.dumps(policy_document).encode())
, and it seemed to be fixed.
Now I'm getting an error at the next line, 114: signature = base64.b64encode(hmac.new(settings.AWS_CLIENT_SECRET_KEY, policy, hashlib.sha1).digest())
. At some point of the hmac.new
function I get this: key: expected bytes or bytearray, but got 'str'
.
I'll try to fix it, but please tell me if I'm doing something wrong, maybe there's a better way of doing it.
Hi
I've written a basic .ashx handler. I tried to create a pull request from my PC by am denied permission. Not sure what I am doing wrong. I was hoping for some help in refining the handler but it looks like nobody works with the .NET stack.
Can you possibly add my handler code?
public class Upload : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
try
{
var UserId = context.Request["userId"];
var PortalId = context.Request["portalId"];
context.Response.ContentType = "text/plain";
var tempPath = "~/Portals/" + PortalId + "/docs/users/" + UserId;
var dirFullPath = context.Server.MapPath(tempPath);
foreach (string s in context.Request.Files)
{
var file = context.Request.Files[s];
var fileName = file.FileName;
var fileExtension = file.ContentType;
if (string.IsNullOrEmpty(fileName)) continue;
var pathToSave_100 = HttpContext.Current.Server.MapPath(tempPath) + "\\" + fileName;
file.SaveAs(pathToSave_100);
}
context.Response.StatusCode = (int) HttpStatusCode.OK;
context.Response.Write("{\"success\":true}");
}
catch (Exception ex)
{
context.Response.Write("Error: " + ex.Message); // #DEV this needs work
}
}
public bool IsReusable => false;
}
` onSubmit:function(id,file)
{
image = this.getFile(id)
var fr = new FileReader();
var canvas = document.createElement("canvas");
fr.onload = function()
{
img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img,0,0);
}
img.src = fr.result;
}
// onload fires after reading is complete
fr.readAsDataURL(image);
}
Now ,how can I add this canvas to fineuploader?I found about the addFile() method but couldn't find a proper way? This is my fineuploader js->
$('#fineuploader').fineUploaderS3({
signature:{
endpoint:"{%url 's3_signee' %}",
},
uploadSuccess:{
endpoint: "{%url 's3_succes_endpoint' %}"
},
validation: {
allowedExtensions: ["gif", "jpeg", "jpg", "png"],
acceptFiles: "image/gif, image/jpeg, image/png",
sizeLimit: 50000000,
},
callbacks:{
onSubmit:function(id,name){
as `above//`
}
})
I wasn't able to access the bucket or key via POST params. I had to use GET.
function deleteObject() {
getS3Client()->deleteObject(array(
'Bucket' => $_GET['bucket'],
'Key' => $_GET['key']
));
}
https://github.com/Widen/fine-uploader-server/blob/master/nodejs/s3/s3handler.js#L145
This condition where it checks for parsedMaxSize always false in my case.
When I remove it and only check the bucket name, the upload starts to display progress, but I get "The request signature we calculated does not match the signature you provided. Check your key and signing method." 403 header, even though I followed instructions here:
the response content above should be '{"invalid": True}'
As it is now, the xhrOrXdr.responseText will fall into the except clause because it's just an object and jQuery can't parse it as JSON. In fact, "invalid" will be the only thing that makes it into the responseText at all.
Here's the beginning of the try/except: https://github.com/FineUploader/fine-uploader/blob/c1b4954f21381dbd664e379abf571c988e2265c0/client/js/uploadsuccess.ajax.requester.js#L42
@uberdanzik pointed out some interpreter warnings in the PHP examples in #26.
Should probably fix those in the other servers too. Not critical, but it is something
As total file size goes over the length of an int at 4GB, the current codebase fails to parse the totalfilesize when submitting files larger than that.
In RequestParser change all references to totalfilesize to long and parse Longs.
Also in your Receiver update any references to totalfilesize to long.
Thumbnail creation is a core feature for file uploaders (especially ones geared towards images). Since most javascript-jquery lightboxes are built for thumbnail galleries, likewise, mainstream uploaders should contain thumbnail creation capabilities. Pre-packaged lightboxes usually include examples with thumbnails that are 75x75 pixels and 3-5 KB. If a fileuploader does not have easily accessible and customizable "server side" thumbnail saving, the uploader is not suitable for mainstream use.
Thumbnail-based Lightboxes
PrettyPhoto
MagnificPopup
Blueimp's Lightbox Image Gallery
Blueimp's Jquery Fileuploader comes with php and node.js server scripts with built-in thumbnail creation. End-users can simply change directory locations by editing a few lines of code.
Blueimp's UploadHandler.php has the following code for unsized image directories:
'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
'upload_url' => $this->get_full_url().'/files/',
Furthermore, end-users can uncomment two lines to start creating thumbnails in a specified location:
'thumbnail' => array(
// Uncomment the following to use a defined directory for the thumbnails
// instead of a subdirectory based on the version identifier.
// Make sure that this directory doesn't allow execution of files if you
// don't pose any restrictions on the type of uploaded files, e.g. by
// copying the .htaccess file from the files directory for Apache:
//'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/thumb/',
//'upload_url' => $this->get_full_url().'/thumb/',
// Uncomment the following to force the max
// dimensions and e.g. create square thumbnails:
//'crop' => true,
'max_width' => 80,
'max_height' => 80
In node, the options are in one segment at the top of the code:
options = {
tmpDir: __dirname + '/tmp',
publicDir: __dirname + '/public',
uploadDir: __dirname + '/public/files',
uploadUrl: '/files/',
maxPostSize: 11000000000, // 11 GB
minFileSize: 1,
maxFileSize: 10000000000, // 10 GB
acceptFileTypes: /.+/i,
// Files not matched by this regular expression force a download dialog,
// to prevent executing any scripts in the context of the service domain:
inlineFileTypes: /\.(gif|jpe?g|png)$/i,
imageTypes: /\.(gif|jpe?g|png)$/i,
imageVersions: {
'thumbnail': {
width: 80,
height: 80
Please, please, please add the following easily accessible features to the upload scripts:
$unsized_image_dir = 'files/unsized/';
$thumbnail_dir = 'files/thumb/';
$max_width_unsized = $native_image_width; //can be restricted with int value
$max_height_unsized = $native_image_height; //can be restricted with int value
$max_width_thumb = 75;
$max_height_thumb = 75;
$max_file_size_unsized = 10000000000;
$accepted_file_types = array('jpg', 'jpeg', 'jpe', 'gif', 'tiff', 'tif', 'bmp', 'png');
//available values txt, pdf, exe, jpg, etc. etc. etc.
Note: this has nothing to do with client side image previews or re-sizing. I am looking to upload images and then re-size them server side, resulting with two separate images for every image uploaded (a normal size and a thumbnail size). I like large images in which users can click on to enlarge, similar to Imgur. I also need the thumbnails for my image gallery.
Examples need to be better documented to explain how to provide a server for Fine Uploader's use.
I have get error , i debug FineUpload param = null,
I have code fix , very simple
[HttpPost]
public ActionResult Upload(HttpPostedFileBase qqfile)
{
if (qqfile != null)
{
// this works for IE
var filename = Path.Combine(Server.MapPath("~/app_data"), Path.GetFileName(qqfile.FileName));
qqfile.SaveAs(filename);
return Json(new { success = true }, "text/html");
}
else
{
// this works for Firefox, Chrome
var filename = Request["qqfile"];
if (!string.IsNullOrEmpty(filename))
{
filename = Path.Combine(Server.MapPath("~/app_data"), Path.GetFileName(filename));
using (var output = System.IO.File.Create(filename))
{
Request.InputStream.CopyTo(output);
}
return Json(new { success = true });
}
}
return Json(new { success = false });
}
How to get the File Path of the selected file from Fine Uploader control.Appreciate early response.
Regards
Manidipa
Hi, I am using fineuploader to uploade multiple images to S3, But I am getting an issue Signature doesn't match. And I found amazon s3 using version 4 for signature http://docs.aws.amazon.com/AmazonS3/latest/API/images/sigV4-post.png
Amazon s3 people given an example for version 4 http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html. So I tried this example to regenerate exact same signature what they have already, But I am unable to regenerate it.
I have used django example from this repo, but this example outdated, And I solved many issues. Finally I stuck with Signature mismatch.
Code:
DateKey = hmac.new(b'AWS4'+b'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY', b'20151229', hashlib.sha256).digest()
DateRegionKey = hmac.new(DateKey, b'us-east-1', hashlib.sha256).digest()
DateRegionServiceKey = hmac.new(DateRegionKey, b's3', hashlib.sha256).digest()
SigningKey = hmac.new(DateRegionServiceKey, b'aws4_request', hashlib.sha256).digest()
signature = hmac.new(policy, SigningKey, hashlib.sha256).digest()
binascii.hexlify(signature)
Please help me
There is an example using http://flysystem.thephpleague.com/
for upload file?
Thanks
C:\Program Files\nodejs\node_global\node_modules\express\node_modules\serve-static\index.js:40 throw new TypeError('root path required')
^
TypeError: root path required at Function.serveStatic [as static] (C:\Program Files\nodejs\node_global\node_modules\express\node_modules\serve-static\index.js:40:11)
at Object.<anonymous> (C:\Users\joe\Downloads\fine\nodejs.js:40:40)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
Hi,
It will be great if we have an example of server side C# / .net code ...
Thanks...
Hi,
can we use sharepoint rest api to upload file ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.